/**
 * Reusable image + accordion-sektion.
 *
 * 2-kolonne layout på desktop (billede venstre, H2 + intro + accordion
 * højre). På tablet/mobil stables kolonnerne — billedet flyttes nederst
 * så content kommer først, ligesom i .fx-int (Simple integrations).
 *
 * Typografi, farver og animationer genbruger pånær de samme CSS-tokens
 * som integrations-sektionen (--fx-font-heading, --fx-text, --fx-yellow
 * osv.), så de to sektioner matcher hinanden visuelt.
 *
 * Accordion bruger native <details>/<summary> + ::details-content til
 * smooth animation, så sektionen virker uden JS.
 *
 * Konsumeres af: template-parts/sections/image-accordion.php.
 */

.fx-image-accordion {
	padding: var(--fx-section-py) var(--fx-gutter);
	background: var(--fx-bg);
}

.fx-image-accordion__container {
	max-width:             var(--fx-max-content);
	margin:                0 auto;
	display:               grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
	gap:                   var(--fx-col-gap);
	align-items:           center;
}

.fx-image-accordion__container--no-image {
	grid-template-columns: minmax(0, 1fr);
	max-width:             820px;
}

/* --- Layout-modifikatorer ------------------------------------------- */

/* Billede til højre: accordion kommer først, billede bagefter. Vi flipper
 * kolonnerne (og ratioer) så indholdet står i venstre side. */
.fx-image-accordion--image-right .fx-image-accordion__container {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
}
.fx-image-accordion--image-right .fx-image-accordion__content { order: 1; }
.fx-image-accordion--image-right .fx-image-accordion__media   { order: 2; }

/* Header øverst, centreret, fuld bredde (eyebrow + H2 + intro over
 * 2-kolonne-rækken). Bruges på gate-operations "Built for high-throughput
 * inspection points". */
.fx-image-accordion__header-top {
	max-width:      820px;
	margin:         0 auto clamp(40px, 5vw, 72px);
	text-align:     center;
}
.fx-image-accordion__header-top .fx-image-accordion__header { margin-bottom: 0; }
.fx-image-accordion__header-top .fx-image-accordion__intro  { margin: 0 auto; }

/* Kombineret mode: `image-left` + `header-top`
 * -----------------------------------------------------------
 * HTML-rækkefølge bevares (header kommer FØR container for at
 * give korrekt semantik: H2 ligger øverst i kildekoden), men
 * visuelt placeres heading i højre kolonne over accordion via
 * CSS-grid-areas. Billedet spænder over begge rækker i venstre
 * kolonne så det "flankerer" heading + intro + accordion.
 *
 * Implementation: <section> bliver selve grid'en; container'en
 * sættes til `display: contents` så figure + content bliver
 * direkte grid-children. Derved kan vi targetere header-top,
 * media og content med grid-area-navne.
 *
 * Bruges pt. af "Custom damage definitions" på operations-
 * kategorierne (rail / FVL / yard / haulaway). Behold den gamle
 * centrerede adfærd for alle ANDRE kombinationer (fx
 * `image-right + header-top` bruges stadig af gate-operations
 * use-cases + rail-benefits).
 * ----------------------------------------------------------- */
.fx-image-accordion--image-left.fx-image-accordion--header-top {
	/* Samme princip som .fx-securement: ingen dobbelt horisontal gutter.
	 * Base `.fx-image-accordion` giver allerede vertikal + side-padding;
	 * her nulstilles venstre/højre på brede viewports så sektionen kan
	 * være præcis 1140px bred (grid fylder hele boksen uden ekstra grøn
	 * “indre” padding). Under ~1200px genindføres --fx-gutter så indhold
	 * ikke rammer viewport-kanten. */
	box-sizing:            border-box;
	width:                 min(100%, var(--fx-max-content, 1140px));
	max-width:             none;
	margin-inline:         auto;
	padding-left:          0;
	padding-right:         0;
	display:               grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
	grid-template-areas:
		"media header"
		"media content";
	gap:                   0 var(--fx-col-gap);
	align-items:           center;
}

@media (max-width: 1200px) {
	.fx-image-accordion--image-left.fx-image-accordion--header-top {
		width:           100%;
		margin-inline: 0;
		padding-left:    var(--fx-gutter, 24px);
		padding-right:   var(--fx-gutter, 24px);
	}
}

.fx-image-accordion--image-left.fx-image-accordion--header-top > .fx-image-accordion__header-top {
	grid-area:    header;
	max-width:    none;
	margin:       0 0 clamp(16px, 2vw, 24px);
	text-align:   left;
	align-self:   end;
}

.fx-image-accordion--image-left.fx-image-accordion--header-top > .fx-image-accordion__header-top .fx-image-accordion__intro {
	margin-left:  0;
	margin-right: 0;
}

/* Flatten container så figure + content deltager i section-grid'en. */
.fx-image-accordion--image-left.fx-image-accordion--header-top > .fx-image-accordion__container {
	display:   contents;
}

.fx-image-accordion--image-left.fx-image-accordion--header-top .fx-image-accordion__media {
	grid-area:  media;
	align-self: center;
}

.fx-image-accordion--image-left.fx-image-accordion--header-top .fx-image-accordion__content {
	grid-area:  content;
	align-self: start;
}

/* Pill-styles arves fra .fx-eyebrow i tokens.css. Her sætter vi kun
   margin-bottom så eyebrow'en står i korrekt afstand til H2'en under. */
.fx-image-accordion__eyebrow {
	margin: 0 0 18px;
}

/* Media --------------------------------------------------------------- */
.fx-image-accordion__media {
	margin: 0;
	position: relative; /* anker for valgfrit stat-badge */
}

/* Med stat-badge: kvadratisk ramme (1:1). Billedet fylder via absolute +
   cover så det ikke arver 6/8-portrættet fra `.fx-image-accordion__image`. */
.fx-image-accordion__media--has-stat {
	aspect-ratio: 1 / 1;
	width:        100%;
	overflow:     hidden;
	border-radius: 24px;
}

.fx-image-accordion__media--has-stat .fx-image-accordion__image {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	aspect-ratio:    unset;
	border-radius:   0; /* afrunding styres af figure + overflow */
	object-fit:      cover;
	object-position: center center;
}

.fx-image-accordion__image {
	width:           100%;
	height:          auto;
	display:         block;
	border-radius:   24px;
	aspect-ratio:    6 / 8; /* Portræt (3:4) — billedramme i image-accordion. */
	object-fit:      cover;
	object-position: center center;
}

/* Floating stat-badge over billedet (valgfri).
   Bruges fx på rail-benefits til "734% More Accurate AIAG compliance". */
.fx-image-accordion__stat {
	position:        absolute;
	right:           clamp(12px, 2vw, 24px);
	bottom:          clamp(12px, 2vw, 24px);
	display:         flex;
	align-items:     center;
	gap:             14px;
	padding:         14px 20px 14px 16px;
	background:      #ffffff;
	border-radius:   var(--fx-radius-lg, 16px);
	box-shadow:      0 18px 40px -18px rgba(22, 59, 107, 0.35),
	                 0 2px 8px rgba(22, 59, 107, 0.08);
	max-width:       calc(100% - clamp(24px, 4vw, 48px));
}

.fx-image-accordion__stat-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	flex-shrink:     0;
	color:           var(--fx-blue, #163b6b);
}

.fx-image-accordion__stat-icon svg {
	width:  100%;
	height: 100%;
	display: block;
}

/* Img-variant — bruges når caller har sat `icon_image` (fx den brandede
 * hit-rate bullseye-PNG på rail-benefits). Lidt større visuel vægt end
 * SVG-fallback'en så det branded ikon bærer badge'en. `object-fit:
 * contain` sikrer at non-kvadratiske ikoner ikke beskæres. */
.fx-image-accordion__stat-icon--image {
	width:  56px;
	height: 56px;
}

.fx-image-accordion__stat-icon img {
	width:      100%;
	height:     100%;
	display:    block;
	object-fit: contain;
}

.fx-image-accordion__stat-text {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

.fx-image-accordion__stat-value {
	font-family: var(--fx-font-heading, "Ubuntu", sans-serif);
	font-size:   clamp(20px, 2vw, 26px);
	font-weight: 700;
	line-height: 1.1;
	color:       var(--fx-text, #2d2f31);
}

.fx-image-accordion__stat-label {
	font-family: var(--fx-font-body, "Ubuntu", sans-serif);
	font-size:   13px;
	line-height: 1.35;
	color:       var(--fx-text-body, #2d2f31cc);
}

/* Content ------------------------------------------------------------- */
.fx-image-accordion__content {
	max-width: 520px;
	min-width: 0;
}

.fx-image-accordion__header {
	margin-bottom: clamp(16px, 2vw, 24px);
}

.fx-image-accordion__title {
	line-height:    1.15;
	letter-spacing: -0.01em;
	margin:         0 0 14px;
	/* H2-styles (font-family, size, color, weight) arves fra
	   typography.css så overskriften matcher resten af sitet. */
}

.fx-image-accordion__intro {
	font-size:   var(--fx-text-base);
	line-height: 1.6;
	color:       var(--fx-text-body);
	margin:      0 0 clamp(24px, 3vw, 36px);
	max-width:   460px;
}

/* Accordion list ------------------------------------------------------ */
.fx-image-accordion__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
}

.fx-image-accordion__item {
	border-top: 1px solid var(--fx-border);
}
.fx-image-accordion__item:last-child {
	border-bottom: 1px solid var(--fx-border);
}

.fx-image-accordion__details {
	margin: 0;
}

.fx-image-accordion__summary {
	display:               grid;
	grid-template-columns: 36px 1fr auto;
	align-items:           center;
	gap:                   16px;
	padding:               18px 4px;
	cursor:                pointer;
	list-style:            none;
	transition:            color 0.15s ease;
}
.fx-image-accordion__summary::-webkit-details-marker { display: none; }
.fx-image-accordion__summary::marker                 { display: none; content: ''; }

.fx-image-accordion .fx-image-accordion__summary:hover .fx-image-accordion__label {
	color: var(--fx-blue);
}

.fx-image-accordion__summary:focus-visible {
	outline:        2px solid var(--fx-blue);
	outline-offset: 2px;
	border-radius:  var(--fx-radius-sm);
}

/* Icon — samme palette + størrelse som fx-int */
.fx-image-accordion__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   10px;
	flex-shrink:     0;
}

.fx-image-accordion__icon img {
	width:   20px;
	height:  20px;
	display: block;
}

.fx-image-accordion__icon--yellow { background: var(--fx-yellow); }
.fx-image-accordion__icon--sky    { background: var(--fx-sky); }
.fx-image-accordion__icon--pink   { background: var(--fx-pink); }

/* Label — samme typografi som .fx-int .fx-int__item-title (dobbel selector). */
.fx-image-accordion .fx-image-accordion__label {
	margin:      0;
	font-family: var(--fx-font-heading);
	font-size:   18px;
	font-weight: 600;
	color:       var(--fx-text);
	line-height: 1.3;
	transition:  color 0.15s ease;
	min-width:   0;
}

/* Chevron */
.fx-image-accordion__chevron {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           24px;
	height:          24px;
	color:           var(--fx-text-muted);
	transition:      transform 300ms ease-in-out, color 0.15s ease;
}

.fx-image-accordion__details[open] .fx-image-accordion__chevron {
	transform: rotate(180deg);
	color:     var(--fx-blue);
}

/* Smooth open/close ligesom fx-int */
.fx-image-accordion__details::details-content {
	block-size:          0;
	overflow:            clip;
	opacity:             0;
	transition:
		block-size 300ms ease-in-out,
		opacity 200ms ease-in-out,
		content-visibility 300ms;
	transition-behavior: allow-discrete;
}

.fx-image-accordion__details[open]::details-content {
	block-size: auto;
	opacity:    1;
}

/* Panel */
.fx-image-accordion__panel {
	box-sizing: border-box;
	padding:    0 4px 18px 56px; /* indryk under label = icon(36) + gap(16) + summary-left(4) */
	font-size:   15px;
	line-height: 1.65;
	color:       var(--fx-text-body);
}

.fx-image-accordion__panel p { margin: 0 0 12px; }
.fx-image-accordion__panel p:last-child { margin-bottom: 0; }

.fx-image-accordion__panel ul {
	list-style:   disc;
	margin:       0;
	padding-left: 20px;
}
.fx-image-accordion__panel li + li { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
	.fx-image-accordion__chevron,
	.fx-image-accordion__details::details-content {
		transition: none;
	}
}

/* Tablet -------------------------------------------------------------- */
@media (max-width: 960px) and (min-width: 768px) {
	.fx-image-accordion__content { max-width: 100%; }
}

/* Mobil — stack: content først, billede nederst (mirrors fx-int).
   Gap kommer fra --fx-col-gap-token (24px på mobil).
   NB: Selectorne er eksplicit skrevet med `--image-right`-varianten så
   specificity matcher image-right-override'en (0,2,0) længere oppe i
   filen — uden den vinder desktop-image-right-reglen over stack-reglen
   på mobil og man ender stadig med 2 kolonner. */
@media (max-width: 767px) {
	.fx-image-accordion__container,
	.fx-image-accordion--image-right .fx-image-accordion__container {
		grid-template-columns: 1fr;
	}
	.fx-image-accordion__content,
	.fx-image-accordion--image-right .fx-image-accordion__content {
		order:     1;
		max-width: 100%;
	}
	.fx-image-accordion__media,
	.fx-image-accordion--image-right .fx-image-accordion__media {
		order:      2;
		max-width:  420px;
		margin:     0 auto;
	}
	.fx-image-accordion__intro { max-width: 100%; }

	/* Per-sektion mobil-overrides
	 * --------------------------------------------------------------
	 * Begge image-accordion-billeder fylder hele bredden på mobil
	 * (ingen max-width-cap). Aspect-ratio styres centralt på
	 * `.fx-image-accordion__image` (6/8) — vi behøver ikke
	 * længere per-sektion ratio-overrides her. */
	.fx-image-accordion--rail-benefits .fx-image-accordion__media,
	.fx-image-accordion--rail-cdd .fx-image-accordion__media {
		max-width: 100%;
	}

	/* Kombineret mode (image-left + header-top): stack til 1 kolonne
	 * med rækkefølge HEADER → CONTENT → MEDIA. Heading øverst, accordion
	 * i midten (primært indhold læseren scanner), billedet sidst som
	 * visual anchor — mirror af integrations-sektionens mobil-pattern.
	 * Container blev sat til `display: contents` på desktop; det
	 * arver ned hertil, så figure + content er stadig direkte grid-
	 * children af section. */
	.fx-image-accordion--image-left.fx-image-accordion--header-top {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"content"
			"media";
		gap: clamp(20px, 4vw, 32px);
	}
	.fx-image-accordion--image-left.fx-image-accordion--header-top .fx-image-accordion__media {
		max-width: 420px;
		margin:    0 auto;
	}
	.fx-image-accordion--image-left.fx-image-accordion--header-top > .fx-image-accordion__header-top {
		margin-bottom: 0;
	}
}

@media (max-width: 560px) {
	.fx-image-accordion__panel {
		padding-left: 0;
	}
}