/* ============================================================
   FAQ Compact Accordion
   Frontend uses a button + div disclosure pattern (rendered via
   render_block_core/details → ad_faq_item_render). GSAP owns the
   height/opacity animation; CSS handles the chevron, index counter,
   and hover/open state styling.
   Editor still sees native <details>/<summary> from the block.
   ============================================================ */

.ad-faq {
	--ad-faq-divider: rgba(14, 14, 14, 0.12);
	--ad-faq-idx-col: 3.5rem;
	--ad-faq-item-gap: 1.25rem;
	--ad-faq-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--ad-faq-duration: 0.4s;
}

/* ---- Section header ---- */

.ad-faq__header {
	gap: 0;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ad-faq__header p {
	margin: 0;
}

.ad-faq__count {
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-feature-settings: 'tnum' 1;
	line-height: 1.45;
	margin: 0;
}

/* ---- Accordion list ---- */

.ad-faq__list {
	counter-reset: faq;
}

/* ---- Item wrapper (frontend: <div class="ad-faq__item">) ---- */

.ad-faq__item {
	border-bottom: 1px solid var(--ad-faq-divider);
}

/* Kill the list's blockGap between items. That gap sits ABOVE each item (between
   the previous divider and this item), so it lands on one side of the rule —
   the question then reads pushed toward its bottom rule. With the gap gone, the
   trigger's symmetric vertical padding is the only spacing, so each question is
   centered between its two rules. */
.ad-faq__list > .ad-faq__item {
	margin-top: 0;
}

/* ---- Trigger button (frontend only) ---- */

.ad-faq__trigger {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
	display: grid;
	grid-template-columns: var(--ad-faq-idx-col) 1fr auto;
	gap: var(--ad-faq-item-gap);
	/* Top-align the row; the index and the +/- marker are then centered on the
	   question's FIRST line via a fixed line-box height (see ::before/::after).
	   This reads correctly whether the question is one line (desktop) or wraps
	   to several (mobile) — plain align-items:center would float them against
	   the middle of a wrapped question. */
	align-items: start;
	padding: clamp(1.5rem, 3vw, 1.75rem) 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	text-wrap: balance;
	transition: color 0.2s ease;
}

.ad-faq__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

/* Index — auto-numbered via counter. Centered on the question's first line:
   a line box as tall as the question's first line (lg × 1.3) + flex centering,
   pinned to the row top by the trigger's align-items:start. */
.ad-faq__trigger::before {
	counter-increment: faq;
	content: counter(faq, decimal-leading-zero);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray);
	font-feature-settings: 'tnum' 1;
	align-self: start;
	display: flex;
	align-items: center;
	height: calc(var(--wp--preset--font-size--lg) * 1.3);
	line-height: 1;
	transition: color 0.2s ease;
}

/* Chevron — + → − via background-size transition. Same first-line centering as
   the index: top-pinned, box height = the question's first line. */
.ad-faq__trigger::after {
	content: "";
	width: 1.25rem;
	height: calc(var(--wp--preset--font-size--lg) * 1.3);
	align-self: start;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem 1px, 1px 1rem;
	color: var(--wp--preset--color--primary);
	transition: background-size var(--ad-faq-duration) var(--ad-faq-ease);
}

/* Hover — darken the question and promote the index */
.ad-faq__trigger:hover { color: #000; }
.ad-faq__trigger:hover::before { color: var(--wp--preset--color--primary); }

/* ---- Open state (chevron + index color) ---- */

.ad-faq__item[data-open="true"] > .ad-faq__trigger::before {
	color: var(--wp--preset--color--primary);
}
.ad-faq__item[data-open="true"] > .ad-faq__trigger::after {
	background-size: 1rem 1px, 0 1rem;
}

/* ---- Reveal wrapper — GSAP animates height + opacity ---- */

.ad-faq__item > .ad-faq__reveal {
	overflow: hidden;
	height: 0;
	opacity: 0;
}

/* ---- Answer body ---- */

.ad-faq__body {
	padding-left: calc(var(--ad-faq-idx-col) + var(--ad-faq-item-gap));
	padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
	padding-top: 0;
	margin: 0;
	max-width: calc(60ch + var(--ad-faq-idx-col) + var(--ad-faq-item-gap));
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--body);
	line-height: 1.6;
}

/* ---- Editor-only: native <details>/<summary> is what the editor
       actually renders. Apply the same visual treatment so the editor
       preview looks right. ---- */

.ad-faq__item > summary,
.wp-block-details.ad-faq__item > summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: var(--ad-faq-idx-col) 1fr auto;
	gap: var(--ad-faq-item-gap);
	align-items: start;
	padding: clamp(1.5rem, 3vw, 1.75rem) 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: 1.3;
	text-wrap: balance;
}
.ad-faq__item > summary::-webkit-details-marker { display: none; }
.ad-faq__item > summary::before {
	counter-increment: faq;
	content: counter(faq, decimal-leading-zero);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray);
	font-feature-settings: 'tnum' 1;
	align-self: start;
	display: flex;
	align-items: center;
	height: calc(var(--wp--preset--font-size--lg) * 1.3);
	line-height: 1;
}

/* ---- Responsive ---- */

@media (max-width: 700px) {
	.ad-faq {
		--ad-faq-idx-col: 2.5rem;
		--ad-faq-item-gap: 0.75rem;
	}

	.ad-faq__header {
		align-items: start;
	}
}

/* ---- Reduced motion — skip the chevron transition; GSAP skips the
       rest in its own hook if needed. ---- */

@media (prefers-reduced-motion: reduce) {
	.ad-faq__trigger::after,
	.ad-faq__trigger,
	.ad-faq__trigger::before {
		transition: none;
	}
}

/* ============================================================
   FAQ — two-column "split" variant (.ad-faq--split).
   Left rail (label + bottom contact link) | accordion list.
   Scoped to the modifier so the default single-column FAQ is
   unaffected. Drops the 01/02 index and pushes the contact link
   to the bottom of the rail.
   ============================================================ */
.ad-faq--split {
	display: grid;
	grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: stretch;
}

/* Left rail — label stays at the top, contact link sinks to the bottom */
.ad-faq--split .ad-faq__header {
	margin-bottom: 0;
}
.ad-faq--split .ad-faq__contact {
	margin-top: auto;
}
.ad-faq--split .ad-faq__contact-link a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Drop the leading 01/02 index (frontend trigger + editor summary) */
.ad-faq--split .ad-faq__trigger,
.ad-faq--split .ad-faq__item > summary {
	grid-template-columns: 1fr auto;
}
.ad-faq--split .ad-faq__trigger::before,
.ad-faq--split .ad-faq__item > summary::before {
	display: none;
}
.ad-faq--split .ad-faq__body {
	padding-left: 0;
	max-width: 64ch;
}

/* Fully ruled list — add the top hairline above the first item */
.ad-faq--split .ad-faq__item:first-child {
	border-top: 1px solid var(--ad-faq-divider);
}

/* Mobile — stack the rail above the list */
@media (max-width: 880px) {
	.ad-faq--split {
		display: block;
	}
	.ad-faq--split .ad-faq__header {
		margin-bottom: clamp(2rem, 5vw, 2.5rem);
	}
	.ad-faq--split .ad-faq__contact {
		margin-top: clamp(1.5rem, 5vw, 2rem);
	}
}