/* =====================================================================
   Blocks: Image, Before/After slider (inc/blocks.php)

   Loaded only on pages/posts that actually use one of these blocks (ACF
   Blocks scopes its 'enqueue_style' to exactly that), both on the front
   end and inside the block editor's preview, so the rest of the site
   never pays for CSS it doesn't use. Relies on the design tokens (colors,
   radius, shadow) defined in :root in assets/css/main.css, which is
   already loaded on every page, custom properties cascade globally
   regardless of which stylesheet declared them, so nothing here needs to
   redefine those.
   ===================================================================== */

/* Wide/full alignment breakout, since these are the only blocks in the
   theme that use Gutenberg's native align support. Full-bleed uses the
   standard viewport-centering technique so it escapes whatever width
   container (.wrap or .wrap--narrow) the page template wrapped it in. */
.alignwide { max-width: 1400px; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.alignfull { max-width: 100vw; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.alignwide, .alignfull { margin-block: 2rem; }

/* --- Image block --- */
.img-feature { margin: 2rem auto; text-align: center; }
.img-feature--narrow { max-width: 32rem; }
.img-feature--wide { max-width: 56rem; }
.img-feature--full { max-width: 100%; }
.img-feature__link { display: inline-block; }
.img-feature__frame {
	position: relative; display: inline-block; overflow: hidden;
	max-width: 100%; line-height: 0;
}
.img-feature__img { display: block; width: 100%; height: auto; }
.img-feature__overlay { position: absolute; inset: 0; pointer-events: none; }
.img-feature--shadow-sm .img-feature__frame { box-shadow: var(--shadow-sm); }
.img-feature--shadow-md .img-feature__frame { box-shadow: var(--shadow); }
.img-feature--shadow-lg .img-feature__frame { box-shadow: var(--shadow-lift); }
.img-feature__caption { margin-top: .6rem; font-size: .92rem; color: var(--ink-mute); text-align: center; }

/* --- Before / After slider --- */
.before-after { margin: 2rem auto; --pos: 50; }
.before-after__frame {
	position: relative; overflow: hidden; user-select: none;
	-webkit-user-select: none;
}
.before-after--shadow-sm .before-after__frame { box-shadow: var(--shadow-sm); }
.before-after--shadow-md .before-after__frame { box-shadow: var(--shadow); }
.before-after--shadow-lg .before-after__frame { box-shadow: var(--shadow-lift); }
.before-after__img { display: block; width: 100%; height: auto; }
.before-after__img--base { position: relative; z-index: 1; }
.before-after__reveal-wrap {
	position: absolute; inset: 0; z-index: 2;
	clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
}
.before-after__reveal-wrap .before-after__img { height: 100%; object-fit: cover; }
.before-after__label {
	position: absolute; top: .75rem; z-index: 3;
	background: rgba(23, 25, 27, .62); color: #fff;
	font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
	padding: .3rem .65rem; border-radius: 999px; pointer-events: none;
}
.before-after__label--before { left: .75rem; }
.before-after__label--after { right: .75rem; }
.before-after__range {
	position: absolute; inset: 0; z-index: 4;
	width: 100%; height: 100%; margin: 0;
	appearance: none; -webkit-appearance: none; background: transparent;
	cursor: ew-resize;
}
.before-after__range:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.before-after__range::-webkit-slider-runnable-track { background: transparent; }
.before-after__range::-webkit-slider-thumb {
	appearance: none; -webkit-appearance: none;
	width: 4px; height: 100%; border-radius: 2px;
	background: #fff; box-shadow: 0 0 0 2px rgba(23, 25, 27, .25), var(--shadow-sm);
	cursor: ew-resize;
}
.before-after__range::-moz-range-track { background: transparent; height: 100%; }
.before-after__range::-moz-range-thumb {
	width: 4px; height: 100%; border: 0; border-radius: 2px;
	background: #fff; box-shadow: 0 0 0 2px rgba(23, 25, 27, .25), var(--shadow-sm);
	cursor: ew-resize;
}
@media (prefers-reduced-motion: no-preference) {
	.before-after__reveal-wrap { transition: clip-path .05s linear; }
}

/* ---------------------------------------------------------------------
   Media + Text (btb/media-text)
   --------------------------------------------------------------------- */
.media-text {
	display: grid;
	grid-template-columns: var(--media-text-width, 50%) 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin: 2rem auto;
}
.media-text--right { grid-template-columns: 1fr var(--media-text-width, 50%); }
.media-text--right .media-text__media { order: 2; }
.media-text__frame { position: relative; display: block; overflow: hidden; }
.media-text__img { display: block; width: 100%; height: auto; }
.media-text__overlay { position: absolute; inset: 0; }
.media-text--shadow-sm .media-text__frame { box-shadow: var(--shadow-sm); }
.media-text--shadow-md .media-text__frame { box-shadow: var(--shadow); }
.media-text--shadow-lg .media-text__frame { box-shadow: var(--shadow-lift); }
.media-text__content > :first-child { margin-top: 0; }
.media-text__content > :last-child { margin-bottom: 0; }
@media (max-width: 720px) {
	.media-text,
	.media-text--right {
		grid-template-columns: 1fr;
	}
	.media-text--right .media-text__media { order: 0; }
}

/* ---------------------------------------------------------------------
   Section (btb/section)
   --------------------------------------------------------------------- */
.btb-section {
	position: relative;
	padding-block: var(--section-y);
}
.btb-section__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
}
.btb-section__overlay { position: absolute; inset: 0; }
.btb-section__inner { position: relative; }
.btb-section__inner > :first-child { margin-top: 0; }
.btb-section__inner > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   FAQ (btb/faq, btb/faq-item)
   Uses native <details>/<summary> for expand/collapse: no JS needed,
   keyboard accessible out of the box.
   --------------------------------------------------------------------- */
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__question {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding-block: 1.25rem; cursor: pointer; font-weight: 700; font-size: 1.05rem;
	list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; transition: transform .2s ease; }
.faq__icon::before,
.faq__icon::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	background: var(--accent); border-radius: 1px;
}
.faq__icon::before { width: 100%; height: 2px; }
.faq__icon::after { width: 2px; height: 100%; }
details[open] > .faq__question .faq__icon { transform: rotate(45deg); }
.faq__answer { padding-bottom: 1.25rem; color: var(--ink-soft); }
.faq__answer p { margin: 0; }

/* Editor-only variant: always expanded (both fields visible while
   editing), not a real <details> element. */
.faq__item--editing { border-bottom: 1px solid var(--line); padding-block: 1.25rem; }
.faq__item--editing .faq__question { padding: 0 0 .5rem; cursor: text; }
.faq__item--editing .faq__answer { padding-bottom: 0; }