/**
 * "Expanding cards" block (arpl/cards + arpl/card) — front-end + shared styles.
 *
 * Two layouts, by viewport:
 *
 *   Small screens (base): cards STACK full-width, one below the other, with
 *     every paragraph shown. No toggle — everything is open and readable. This
 *     is also the no-JS fallback at every width.
 *
 *   Wide screens (>= 900px, once JS adds `is-ready` to the row): a horizontal
 *     accordion. Cards rest compact (icon + 40px title, paragraph collapsed);
 *     clicking a card's arrow grows it WIDER and reveals the paragraph to the
 *     SIDE of the title. Only one card is open at a time (the viewScript closes
 *     the others). Opening is click-only — there is no hover reveal.
 *
 * Jank-free reveal: the card widens first (flex-grow + column expand), and the
 * paragraph's opacity is delayed by that duration, so text fades in only AFTER
 * the card finishes growing.
 *
 * Each card carries its brand color via the inline custom property
 * `--arpl-card-color`.
 *
 * @package arpl-fse
 */

.arpl-cards {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.arpl-card {
	--arpl-card-radius: 12px;
	--arpl-card-pad: 20px;
	/* Default arrow mask, so the icon shows in the editor and without JS; the
	   viewScript also sets this per-arrow on the front end. */
	--arpl-card-arrow: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E" );
	position: relative;
	display: flex;
	flex-direction: column;
	/* Border-box so the padding stays inside the card — otherwise width:100%
	   + padding overflows the viewport on mobile. */
	box-sizing: border-box;
	padding: var( --arpl-card-pad );
	color: #fff;
	background-color: var(
		--arpl-card-color,
		var( --wp--preset--color--primary, #3376bd )
	);
	border-radius: var( --arpl-card-radius );
}

/* Icon, top-left. The theme SVGs are white-filled, so they read on any panel. */
.arpl-card__icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 1rem;
}

.arpl-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Arrow toggle, top-right. Hidden in the stacked/all-open layout; shown only in
   the wide-screen accordion. Inert <span> until the viewScript swaps it for a
   real <button>; both share this class so it looks identical before/after. */
.arpl-card__toggle {
	display: none;
	position: absolute;
	/* Center-aligned with the icon row: same padding offset, nudged 2px for the
	   icon (40px) vs toggle (36px) size difference. */
	top: calc( var( --arpl-card-pad ) + 2px );
	right: var( --arpl-card-pad );
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: rgba( 255, 255, 255, 0.1 );
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
}

button.arpl-card__toggle:hover {
	background: rgba( 255, 255, 255, 0.2 );
}

button.arpl-card__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.arpl-card__arrow {
	width: 18px;
	height: 18px;
	background-color: #fff;
	-webkit-mask: var( --arpl-card-arrow ) no-repeat center / contain;
	mask: var( --arpl-card-arrow ) no-repeat center / contain;
	transition: transform 0.3s ease;
}

.arpl-card__title {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-large, 2.25rem );
	font-weight: 700;
	line-height: 1.15;
	color: inherit;
}

/* Base (stacked): paragraph is simply shown below the title with breathing
   room. No collapse — everything is open. */
.arpl-card__reveal-inner {
	overflow: hidden;
	min-width: 0;
}

.arpl-card__text {
	margin: 1rem 0 0;
	font-size: var( --wp--preset--font-size--small, 1.125rem );
	line-height: 1.55;
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Wide screens: horizontal accordion. Only active once the viewScript marks the
 * row `is-ready` — so without JS it stays the stacked, all-open layout above.
 * ------------------------------------------------------------------------ */
@media ( min-width: 900px ) {
	.arpl-cards.is-ready {
		flex-direction: row;
		align-items: stretch;
		gap: 1rem;
		/* Fixed row height so opening a card (whose paragraph grows it taller)
		   never changes the row's height — the page below stays put, no jump. */
		height: 385px;
	}

	.arpl-cards.is-ready .arpl-card {
		flex: 1 1 0;
		min-width: 0;
		min-height: 350px;
		/* Center the icon + title (+ revealed paragraph) as one group, so the
		   icon sits directly above the title. */
		justify-content: center;
		transition: flex-grow 0.35s ease;
	}

	/* Show the arrow toggle at 60px and center it on the icon's row (icon 40px
	   vs toggle 60px → offset -10px). */
	.arpl-cards.is-ready .arpl-card__toggle {
		display: grid;
		top: calc( var( --arpl-card-pad ) - 10px );
		width: 60px;
		height: 60px;
	}

	.arpl-cards.is-ready .arpl-card__arrow {
		width: 24px;
		height: 24px;
	}

	/* Paragraph collapses vertically when closed (max-height: 0), so a closed
	   card reserves no space for it. The paragraph wraps to the card's own
	   width, so it never reflows at 0 width — no height explosion. */
	.arpl-cards.is-ready .arpl-card__reveal {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s ease;
	}

	.arpl-cards.is-ready .arpl-card__text {
		margin: 0.85rem 0 0;
		opacity: 0;
		transition: opacity 0.18s ease;
	}

	/* Open via the arrow toggle (pinned by the viewScript) — click only. The
	   open card takes a large share so its paragraph wraps wide (few lines). */
	.arpl-cards.is-ready .arpl-card.is-open {
		flex-grow: 2;
	}

	.arpl-cards.is-ready .arpl-card.is-open .arpl-card__reveal {
		max-height: 16rem;
	}

	.arpl-cards.is-ready .arpl-card.is-open .arpl-card__text {
		opacity: 1;
		/* Delay = expand duration, so text fades in only after growth ends. */
		transition: opacity 0.22s ease 0.32s;
	}

	.arpl-cards.is-ready .arpl-card.is-open .arpl-card__arrow {
		transform: rotate( 180deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.arpl-cards.is-ready .arpl-card,
	.arpl-cards.is-ready .arpl-card__reveal,
	.arpl-cards.is-ready .arpl-card__text,
	.arpl-card__arrow {
		transition: none;
	}
}