/*
	The bordered card belongs to the whole block, not just the item list —
	.accordion is the card; .accordion__items and .accordion__media are both
	padded inner regions inside it, at the same amount, so the image reads as
	inset with even breathing room rather than either bleeding to the card's
	edge or sitting flush against the item list.

	36px padding: 2.25rem is a block-specific dimension here, not a
	spacing-scale value (it sits between --space-6's 32px and --space-7's
	40px, matching neither), so it isn't tokenized — same reasoning as the
	Section Header + Column Content pairing in layout.css.
*/
.accordion {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.accordion__items {
	padding: 2.25rem; /* 36px */
}

.accordion--with-media {
	display: flex;
	flex-direction: column;
}

@media (max-width: 47.99em) {
	/*
		Image first, then items, when stacked — a stronger "here's what this
		is" cue than leading with accordion copy. Deliberately a mobile-only
		visual/DOM order mismatch (same call as the header's hamburger button
		in components.css): a keyboard/screen-reader user reaches the items
		before the image while seeing the opposite order, but that's confined
		to mobile, not carried onto desktop where keyboard tabbing is more
		common.
	*/
	.accordion--with-media .accordion__media {
		order: -1;
	}
}

@media (min-width: 48em) {
	.accordion--with-media {
		display: grid;
		grid-template-columns: 1fr 1fr;
		/* Top-aligned, not stretched: the image column has its own fixed
		   aspect-ratio and shouldn't grow/shrink or recentre as the items
		   column's height changes when an item opens or closes. */
		align-items: start;
	}
}

.accordion__item {
	border-block-start: 1px solid var(--color-border);
	padding-block: var(--space-4) 0;
}

.accordion__item:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.accordion__item + .accordion__item {
	margin-block-start: var(--space-4);
}

/* The <summary> is already a focusable, keyboard-toggleable control on its
   own — only the default disclosure triangle is replaced, with the same
   hex-arrow mark the CTA button uses, rotated open/closed instead of
   swapped for a second icon. */
.accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	cursor: pointer;
	list-style: none;
	/* The question reuses the h3 heading style (font-size-4's replacement,
	   tokens.css) — same font-family/size/line-height/weight as
	   .heading-style-h3 — even though it's a <span> inside a <summary>,
	   not a real heading tag; see --heading-h3-font-size's own comment. */
	font-family: var(--font-body);
	font-size: var(--heading-h3-font-size);
	line-height: var(--line-height-heading);
	font-weight: var(--font-weight-bold);

	&::-webkit-details-marker {
		display: none;
	}
}

/*
	button-hex-90.svg (assets/icons/) — the same fixed two-tone brand
	artwork the CTA/plain-button icon uses (components.css, button-hex.svg),
	but the down-pointing variant: its arrow is rotated 90deg from the
	button's own, so it reads correctly as "expand" here at rest instead of
	pointing sideways. Applied the same way as the button's own icon:
	background-image, not zk_icon() + currentColor, since the file's
	colours are fixed rather than tintable. width + aspect-ratio (not a
	fixed height) so the icon keeps its own 34:30 shape — width is set to
	whatever resolves to a 30px-tall icon, since aspect-ratio derives height
	from width, not the other way around. 30px tall is this icon's own
	native size (width="34" height="30" in the file itself), so this is
	also just its intrinsic size with no scaling either way.
*/
.accordion__icon {
	flex-shrink: 0;
	width: 2.125rem; /* 34px wide, resolving to 30px tall — the icon's own native size */
	aspect-ratio: 34 / 30;
	background-image: url("../../assets/icons/button-hex-90.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform var(--transition);
}

.accordion__item[open] .accordion__icon {
	transform: rotate(180deg);
}

.accordion__content {
	padding-block-start: var(--space-5); /* 24px */
}

/* Same padding as .accordion__items, on all sides, so the image is inset
   rather than touching the card's edge or the item list beside it. No
   aspect-ratio/object-fit crop here on purpose — the whole image shows at
   its own natural proportions (max-width:100% + height:auto), centred
   horizontally by the flex row in case that leaves it narrower than the
   column. See .accordion--with-media above for why the column itself
   doesn't stretch to match the items column's height. */
.accordion__media {
	display: flex;
	justify-content: center;
	padding: 2.25rem; /* 36px */

	& img {
		display: block;
		max-width: 100%;
		height: auto;
		border-radius: var(--radius-lg);
	}
}