/**
 * OSHIDA — about / accordions.
 *
 * @figma 2014:2631  Group 419 — OPEN item, 1168 x 473.48 at (136, 2650.59)
 * @figma 2014:2632  panel — rgba(0,0,0,.32), r=30, hairline edge
 * @figma 2014:2633  head — 24 / 900 / -0.01em, box 2703.20–2735.20
 * @figma 2014:2634  body — 19 / 200 / 2.3, 1030.22 wide at (208.08, 2803.85)
 * @figma 2014:2635  Vector 448 — the divider, 1030.06 wide at x=204.97
 * @figma 2014:2636  Vector 451 — chevron, 23.77 x 7.59, at the inline END
 * @figma 2014:2637 / 2641 / 2645  the three closed items, 1168 x 144.80, 25.8 apart
 *
 * The 69px inline padding is measured: the divider runs 204.97–1235.03 inside
 * an item spanning 136–1304, i.e. inset 68.97 on both sides. Putting that
 * padding on the ITEM (not the summary) is what makes the divider — a plain
 * border-block-end on the summary — land on exactly those two x positions.
 *
 * B1's marker is a plus/minus; this design draws a shallow chevron, so the two
 * bars are re-angled here. Nothing about the open/closed mechanism is touched:
 * it is still <details>, still works with JavaScript off.
 *
 * Owner: work package C2.
 */

.o-about-accordions {
	padding-block-start: var(--o-about-gap);
}

.o-about-accordions .o-accordion {
	gap: var(--o-space-sm); /* 3149.87 - 3124.07 = 25.8 */
}

.o-about-accordions .o-accordion__item {
	padding: 0 clamp(20px, 4.8vw, 69px);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-lg);
	background-color: var(--o-veil-panel);
}

.o-about-accordions .o-accordion__summary {
	gap: var(--o-space-md);
	padding-block: clamp(24px, 3.9vw, 56px); /* (144.80 - 32) / 2 */
	border-block-end: var(--o-line-width) solid transparent;
	border-radius: 0;
}

.o-about-accordions .o-accordion__item[open] > .o-accordion__summary {
	border-block-end-color: var(--o-line-soft);
}

.o-about-accordions .o-accordion__title {
	font-size: var(--o-fs-h4);
}

/* --------------------------------------------------------------------------
 * The chevron — 23.77 x 7.59, 24px in from the summary's inline end
 * -------------------------------------------------------------------------- */

.o-about-accordions .o-accordion__marker {
	inline-size: 24px;
	block-size: 10px;
	margin-inline-end: 24px; /* 228.74 - 204.97 */
}

.o-about-accordions .o-accordion__marker::before,
.o-about-accordions .o-accordion__marker::after {
	inline-size: 14px;
	block-size: 2px;
	border-radius: 2px;
	background-color: var(--o-text);
	inset-block-start: 50%;
	opacity: 1;
}

.o-about-accordions .o-accordion__marker::before {
	inset-inline-start: 0;
	translate: 0 -50%;
	rotate: 30deg;
}

.o-about-accordions .o-accordion__marker::after {
	inset-inline-start: auto;
	inset-inline-end: 0;
	translate: 0 -50%;
	rotate: -30deg;
}

/* Open flips the V into a caret. */
.o-about-accordions .o-accordion__item[open] > .o-accordion__summary .o-accordion__marker::before {
	rotate: -30deg;
}

.o-about-accordions .o-accordion__item[open] > .o-accordion__summary .o-accordion__marker::after {
	rotate: 30deg;
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * The panel
 * -------------------------------------------------------------------------- */

.o-about-accordions .o-accordion__panel {
	margin-block-start: 9px; /* divider 2773.14 -> body 2803.85, less the leading */
	padding-block-end: clamp(24px, 3.9vw, 56px);
}

.o-about-accordions .o-accordion__panel p {
	margin: 0;
}

.o-about-accordions .o-accordion__panel p + p {
	margin-block-start: var(--o-space-sm);
}

/*
 * Opening motion. CSS only, and deliberately so: nothing about reaching the
 * content may depend on JavaScript, so the panel is never intercepted or
 * height-driven from a script. assets/js/accordion.js adds keyboard roving on
 * top and nothing else.
 */
@media (prefers-reduced-motion: no-preference) {
	.o-about-accordions .o-accordion__item[open] > .o-accordion__panel {
		/* No fill-mode: the panel's resting state is its natural one, so a
		 * browser that never runs this keyframe still shows the content. */
		animation: o-about-accordion-open var(--o-dur-base) var(--o-ease-out);
	}

	.o-about-accordions .o-accordion__marker::before,
	.o-about-accordions .o-accordion__marker::after {
		transition: rotate var(--o-dur-base) var(--o-ease-standard);
	}
}

@keyframes o-about-accordion-open {
	from {
		opacity: 0;
		translate: 0 -8px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (max-width: 599px) {
	.o-about-accordions .o-accordion__marker {
		margin-inline-end: 0;
	}
}