/**
 * Oyolloo Elements — accordion.
 *
 * Figma reference: node 471:1428 (FAQ list).
 *   row     1028x83 · padding 24px 32px · 16px gap between rows · square
 *   label   Roboto Condensed 32/600 at 35px leading, uppercase
 *   icon    24x24, right aligned, rotates to a minus when open
 *
 * The hairline is an inset shadow, not a border: Figma aligns strokes inside
 * the frame, so a real border would add 2px to the 83px row and push the label
 * off its 32px gutter.
 *
 * The panel animates with grid-template-rows rather than max-height, so the
 * transition is exact at any content length instead of guessing a ceiling.
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-sm);
	width: 100%;
}

/* Grid and flex children default to min-width:auto, and a <button> reports its
   whole label as its minimum. Without min-width:0 a long question stretches the
   track wider than the viewport instead of wrapping. */
.oe-accordion__item {
	--oe-accordion-line: var(--oe-color-neutral-300);

	min-width: 0;
	box-shadow: inset 0 0 0 1px var(--oe-accordion-line);
	background-color: var(--oe-color-white);
	overflow: hidden;
	transition: box-shadow 200ms var(--oe-ease, ease);
}

.oe-accordion__item.is-open {
	--oe-accordion-line: var(--oe-color-brand);
}

.oe-accordion__trigger {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oe-space-md);
	width: 100%;
	padding: var(--oe-space-md) var(--oe-space-lg);
	color: inherit;
	font-family: var(--oe-font-title);
	font-size: var(--oe-h4-size);
	font-weight: var(--oe-h4-weight);
	line-height: 35px;
	text-align: start;
	text-transform: uppercase;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
}

/* The label is the flex child that must actually give way. */
.oe-accordion__trigger > span:first-child {
	min-width: 0;
}

.oe-accordion__trigger:hover {
	color: var(--oe-color-brand);
}

.oe-accordion__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	transition: transform 300ms var(--oe-ease, ease);
}

.oe-accordion__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.oe-accordion__item.is-open .oe-accordion__icon {
	transform: rotate(45deg);
}

/* Collapsed = a zero-height grid row; open = auto. Animatable, and exact. */
.oe-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms var(--oe-ease, ease);
}

.oe-accordion__item.is-open .oe-accordion__panel {
	grid-template-rows: 1fr;
}

.oe-accordion__panel > div {
	overflow: hidden;
	min-height: 0;
}

.oe-accordion__content {
	padding: 0 var(--oe-space-lg) var(--oe-space-md);
	color: var(--oe-color-ink-soft);
	font-size: var(--oe-body-size);
	line-height: var(--oe-body-leading);
}

/* -- Dark surface variant ------------------------------------------------ */

.oe-section--dark .oe-accordion__item {
	--oe-accordion-line: var(--oe-color-border-soft);

	background-color: transparent;
}

.oe-section--dark .oe-accordion__content {
	color: var(--oe-color-neutral-300);
}

@media (max-width: 767px) {
	.oe-accordion {
		gap: var(--oe-space-2xs);
	}

	.oe-accordion__trigger {
		padding: var(--oe-space-sm);
		font-size: var(--oe-body-size);
		line-height: 18px;
	}

	/* A 16px glyph, so the row lands on the design's 50px. */
	.oe-accordion__icon {
		width: 16px;
		height: 16px;
	}

	.oe-accordion__content {
		padding: 0 var(--oe-space-sm) var(--oe-space-sm);
	}
}