/* =============================================================================
   Shopfront — pages.css
   Styles for named page templates: Bio, Land Art, Contact.
   Loaded via inc/enqueue.php only when one of these templates is active.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared container
   ----------------------------------------------------------------------------- */
.page-bio__inner,
.page-contact__inner {
	width: min(100% - 2rem, 1100px);
	margin-inline: auto;
	padding-block: var(--sf-space-8);
}

/* -----------------------------------------------------------------------------
   Bio
   Two-column on desktop: portrait on the left, copy + facts on the right.
   Stacks on mobile. Title set in the Anton display face.
   ----------------------------------------------------------------------------- */
.page-bio__header {
	margin-bottom: var(--sf-space-6);
}

.page-bio__title {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
}

.page-bio__layout {
	display: grid;
	gap: var(--sf-space-8);
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
}

@media (max-width: 782px) {
	.page-bio__layout {
		grid-template-columns: 1fr;
		gap: var(--sf-space-6);
	}
}

.page-bio__media {
	position: sticky;
	top: calc(72px + var(--sf-space-4));
}

@media (max-width: 782px) {
	.page-bio__media {
		position: static;
	}
}

.page-bio__image {
	width: 100%;
	height: auto;
	display: block;
}

.page-bio__image-placeholder,
.page-contact__photo-placeholder {
	aspect-ratio: 4 / 5;
	background: var(--sf-color-surface);
	border: 1px dashed var(--sf-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--sf-space-4);
	color: var(--sf-color-muted);
	font-size: 0.875rem;
}

/* Wear.AM hero — when no Featured Image is set, render a tall empty-state
   prompt with the same dashed-border treatment. Only visible to logged-in
   editors (template handles that gate); public visitors see no hero at all
   if the image is missing, which is intentionally the cue to set one. */
.page-wearam__hero--empty {
	min-height: 320px;
	background: var(--sf-color-surface);
}

.page-wearam__hero-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--sf-space-6);
	border: 1px dashed var(--sf-color-border);
	color: var(--sf-color-muted);
	font-size: 0.875rem;
}

.page-bio__content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--sf-color-text);
	max-width: 62ch;
}

.page-bio__content p {
	margin: 0 0 var(--sf-space-4);
}

.page-bio__facts {
	margin: var(--sf-space-6) 0 var(--sf-space-5);
	padding-top: var(--sf-space-5);
	border-top: 1px solid var(--sf-color-border);
	display: grid;
	gap: var(--sf-space-3);
}

.page-bio__fact {
	display: grid;
	gap: var(--sf-space-1);
}

.page-bio__fact-label {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-color-muted);
	margin: 0;
}

.page-bio__fact-value {
	margin: 0;
	font-size: 1rem;
	color: var(--sf-color-text);
}

.page-bio__cta {
	margin-top: var(--sf-space-4);
}

/* -----------------------------------------------------------------------------
   Land Art
   Full-bleed hero with the "Unfamiliar land" quote, then a centered
   reading column for project copy.
   ----------------------------------------------------------------------------- */
.page-landart__hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--sf-color-earth);
	color: #fff;
}

.page-landart__hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-landart__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.5);
}

.page-landart__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.page-landart__hero-content {
	position: relative;
	z-index: 1;
	width: min(100% - 2rem, 900px);
	margin-inline: auto;
	text-align: center;
	padding-block: var(--sf-space-10);
}

.page-landart__title {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(3rem, 8vw, 6rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--sf-space-5);
	color: #fff;
}

.page-landart__quote {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2.25rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
	margin: 0 0 var(--sf-space-4);
}

.page-landart__caption {
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.85;
}

.page-landart__caption em {
	font-style: italic;
}

.page-landart__body {
	width: min(100% - 2rem, 760px);
	margin-inline: auto;
	padding-block: var(--sf-space-10);
}

.page-landart__content {
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: none;
}

.page-landart__content p {
	margin: 0 0 var(--sf-space-4);
}

/* -----------------------------------------------------------------------------
   Contact
   Two-column: form on the left, studio photo + details on the right.
   ----------------------------------------------------------------------------- */
.page-contact__header {
	text-align: center;
	margin-bottom: var(--sf-space-8);
}

.page-contact__title {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 var(--sf-space-3);
}

.page-contact__lede {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--sf-color-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.page-contact__layout {
	display: grid;
	gap: var(--sf-space-8);
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
}

@media (max-width: 782px) {
	.page-contact__layout {
		grid-template-columns: 1fr;
		gap: var(--sf-space-6);
	}
}

.page-contact__form .entry-content {
	max-width: none;
}

.page-contact__fallback {
	padding: var(--sf-space-5);
	background: var(--sf-color-surface);
	border: 1px solid var(--sf-color-border);
	border-radius: var(--sf-radius-md);
	color: var(--sf-color-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.page-contact__fallback p {
	margin: 0 0 var(--sf-space-3);
}

.page-contact__fallback p:last-child {
	margin: 0;
}

.page-contact__photo {
	margin: 0 0 var(--sf-space-5);
}

.page-contact__photo img {
	width: 100%;
	height: auto;
	display: block;
}

.page-contact__details {
	display: grid;
	gap: var(--sf-space-3);
	margin: 0;
}

.page-contact__detail {
	display: grid;
	gap: var(--sf-space-1);
	padding-bottom: var(--sf-space-3);
	border-bottom: 1px solid var(--sf-color-border);
}

.page-contact__detail:last-child {
	border-bottom: none;
}

.page-contact__detail dt {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-color-muted);
	margin: 0;
}

.page-contact__detail dd {
	margin: 0;
	font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   Wear.AM®
   Full-bleed hero → three subcategory tiles → product grid.
   Hero mirrors the Land Art hero (dark overlay + centered copy) but lighter.
   ----------------------------------------------------------------------------- */
.page-wearam__inner {
	width: min(100% - 2rem, 1200px);
	margin-inline: auto;
}

.page-wearam__hero {
	position: relative;
	min-height: 55vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--sf-color-earth-mid);
	color: #fff;
}

.page-wearam__hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-wearam__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.35);
}

.page-wearam__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.page-wearam__hero-content {
	position: relative;
	z-index: 1;
	width: min(100% - 2rem, 900px);
	margin-inline: auto;
	text-align: center;
	padding-block: var(--sf-space-10);
}

.page-wearam__title {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(3rem, 8vw, 6rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--sf-space-4);
	color: #fff;
}

.page-wearam__tagline {
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
	line-height: 1.4;
	margin: 0;
	opacity: 0.95;
	max-width: 44ch;
	margin-inline: auto;
}

/* Subcategory tiles --------------------------------------------------------*/
.page-wearam__subcats {
	padding-block: var(--sf-space-8);
}

.page-wearam__subcat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sf-space-4);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.page-wearam__subcat-tile a {
	display: block;
	color: inherit;
	text-decoration: none;
	position: relative;
	transition: opacity 200ms ease;
}

.page-wearam__subcat-tile a:hover {
	opacity: 0.92;
}

.page-wearam__subcat-media {
	aspect-ratio: 4 / 5;
	background: var(--sf-color-surface);
	overflow: hidden;
}

.page-wearam__subcat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.page-wearam__subcat-label {
	display: block;
	padding-top: var(--sf-space-3);
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sf-color-text);
}

/* Editor content + products grid wrapper ------------------------------------*/
.page-wearam__content {
	padding-block: var(--sf-space-5);
}

.page-wearam__products {
	padding-block: var(--sf-space-6) var(--sf-space-10);
	border-top: 1px solid var(--sf-color-border);
}

.page-wearam__products-title {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--sf-space-5);
	text-align: center;
}

/* Apparel grid — three columns on desktop, single column on phones. */
.page-wearam__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sf-space-6);
}

@media (min-width: 600px) {
	.page-wearam__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sf-space-7) var(--sf-space-5);
	}
}

@media (min-width: 1000px) {
	.page-wearam__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sf-space-8) var(--sf-space-6);
	}
}

.page-wearam__item {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease;
}

.page-wearam__item:hover,
.page-wearam__item:focus-visible {
	transform: translateY(-2px);
}

.page-wearam__item:focus-visible {
	outline: 2px solid var(--sf-color-text);
	outline-offset: 4px;
}

.page-wearam__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sf-space-3);
}

.page-wearam__image {
	display: block;
	width: 100%;
	height: auto;
	background: var(--sf-color-surface);
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.page-wearam__image--placeholder {
	aspect-ratio: 3 / 4;
}

.page-wearam__caption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-top: 0.25rem;
}

.page-wearam__item-title {
	font-family: var(--sf-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--sf-color-text);
	letter-spacing: 0.01em;
}

.page-wearam__item-meta {
	font-family: var(--sf-font-body);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sf-color-muted);
}

.page-wearam__empty {
	color: var(--sf-color-muted);
	text-align: center;
	padding-block: var(--sf-space-6);
}

/* -----------------------------------------------------------------------------
   Contact Form 7 overrides
   CF7 ships with minimal styling. These rules make its fields + submit button
   inherit the Shopfront look. Only applies inside .page-contact__form, so
   other CF7 forms elsewhere on the site are untouched.
   ----------------------------------------------------------------------------- */
.page-contact__form .wpcf7-form {
	display: grid;
	gap: var(--sf-space-4);
}

.page-contact__form .wpcf7-form p {
	margin: 0;
}

.page-contact__form label {
	display: grid;
	gap: var(--sf-space-2);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-color-muted);
}

.page-contact__form .wpcf7-form-control-wrap {
	display: block;
}

/* Base input styles are already set globally; this just removes any margin
   CF7 inserts and keeps the form rhythm consistent. */
.page-contact__form input[type="text"],
.page-contact__form input[type="email"],
.page-contact__form textarea {
	margin: 0;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--sf-color-text);
}

.page-contact__form textarea {
	min-height: 180px;
	resize: vertical;
}

/* Two-up name row on wider screens. */
.page-contact__form .cf-row {
	display: grid;
	gap: var(--sf-space-4);
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 520px) {
	.page-contact__form .cf-row {
		grid-template-columns: 1fr;
	}
}

.page-contact__form .wpcf7-submit {
	justify-self: start;
	cursor: pointer;
}

/* CF7 validation messages. */
.page-contact__form .wpcf7-not-valid-tip {
	color: var(--sf-color-danger);
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	text-transform: none;
	margin-top: var(--sf-space-1);
}

.page-contact__form .wpcf7-response-output {
	margin: var(--sf-space-4) 0 0;
	padding: var(--sf-space-3) var(--sf-space-4);
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--sf-color-border);
	background: var(--sf-color-surface);
	font-size: 0.9375rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sf-color-text);
}

.page-contact__form .wpcf7 form.sent .wpcf7-response-output {
	border-color: #c7e3d5;
	background: #ecf6f1;
}

.page-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.page-contact__form .wpcf7 form.failed .wpcf7-response-output {
	border-color: #f0caca;
	background: #fbecec;
	color: var(--sf-color-danger);
}

/* -----------------------------------------------------------------------------
   Artworks (portfolio)
   Gallery-style grid of every painting, available and sold. Distinct from
   /shop: no prices, no cart buttons; sold pieces labeled "Private Collection".
   ----------------------------------------------------------------------------- */
.page-artworks__inner {
	width: min(100% - 2rem, 1200px);
	margin-inline: auto;
}

.page-artworks__header {
	padding-block: var(--sf-space-8) var(--sf-space-6);
}

.page-artworks__title {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--sf-space-4);
}

.page-artworks__intro {
	max-width: 60ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sf-color-text);
}

.page-artworks__intro p {
	margin: 0 0 1em;
}

.page-artworks__section {
	width: min(100% - 2rem, 1500px);
	margin-inline: auto;
	padding-block: var(--sf-space-6) var(--sf-space-10);
}

/* Two-column gallery layout. Images are intentionally large with generous
   gutters to feel more like a printed monograph than a product grid. */
.page-artworks__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sf-space-8);
}

@media (min-width: 768px) {
	.page-artworks__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--sf-space-10) var(--sf-space-8);
	}
}

@media (min-width: 1100px) {
	.page-artworks__grid {
		gap: 5rem var(--sf-space-10);
	}
}

.page-artworks__item {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-artworks__item:hover,
.page-artworks__item:focus-visible {
	transform: translateY(-2px);
}

.page-artworks__item:focus-visible {
	outline: 2px solid var(--sf-color-text);
	outline-offset: 4px;
}

.page-artworks__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sf-space-3);
	position: relative;
}

.page-artworks__image {
	display: block;
	width: 100%;
	height: auto;
	background: var(--sf-color-surface);
	transition: opacity 0.25s ease;
}

/* Sold / private collection pieces: slight desaturation cue on the image. */
.page-artworks__item.is-sold .page-artworks__image {
	opacity: 0.78;
}

.page-artworks__item.is-sold:hover .page-artworks__image,
.page-artworks__item.is-sold:focus-visible .page-artworks__image {
	opacity: 0.92;
}

.page-artworks__status {
	position: absolute;
	top: var(--sf-space-3);
	left: var(--sf-space-3);
	background: rgba(17, 17, 17, 0.82);
	color: #fff;
	font-family: var(--sf-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.35rem 0.6rem;
	line-height: 1;
}

.page-artworks__caption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-top: 0.25rem;
}

.page-artworks__item-title {
	font-family: var(--sf-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--sf-color-text);
	letter-spacing: 0.01em;
}

.page-artworks__item-meta {
	font-family: var(--sf-font-body);
	font-style: italic;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sf-color-muted);
}

.page-artworks__empty {
	padding-block: var(--sf-space-8) var(--sf-space-10);
	text-align: center;
	color: var(--sf-color-muted);
}

.page-artworks__empty .page-artworks__inner {
	padding-block: 0;
}

/* -----------------------------------------------------------------------------
   Single Artwork + Single Apparel
   Two-column detail page: gallery left, summary right. Inquire button drives
   the email flow — no cart, no checkout. Layout shared between both CPTs;
   minor differences (status badge on artwork, sold-note on artwork) are
   handled by extra rules below.
   ----------------------------------------------------------------------------- */
.single-artwork__inner,
.single-apparel__inner {
	width: min(100% - 2rem, 1300px);
	margin-inline: auto;
	padding-block: var(--sf-space-6) var(--sf-space-10);
}

.single-artwork__back,
.single-apparel__back {
	margin-bottom: var(--sf-space-5);
}

.single-artwork__back a,
.single-apparel__back a {
	display: inline-block;
	color: var(--sf-color-muted);
	text-decoration: none;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-block: 0.25rem;
}

.single-artwork__back a:hover,
.single-artwork__back a:focus-visible,
.single-apparel__back a:hover,
.single-apparel__back a:focus-visible {
	color: var(--sf-color-text);
}

.single-artwork__layout,
.single-apparel__layout {
	display: grid;
	gap: var(--sf-space-6) var(--sf-space-8);
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: start;
}

@media (max-width: 900px) {
	.single-artwork__layout,
	.single-apparel__layout {
		grid-template-columns: 1fr;
		gap: var(--sf-space-5);
	}
}

/* Gallery -------------------------------------------------------------------*/
.single-artwork__figure,
.single-apparel__figure {
	margin: 0;
	background: var(--sf-color-surface);
}

.single-artwork__image,
.single-apparel__image {
	display: block;
	width: 100%;
	height: auto;
}

.single-artwork__image--placeholder,
.single-apparel__image--placeholder {
	background: var(--sf-color-surface);
	aspect-ratio: 4 / 5;
}

/* Summary -------------------------------------------------------------------*/
.single-artwork__summary,
.single-apparel__summary {
	align-self: start;
}

.single-artwork__status {
	display: inline-block;
	background: rgba(17, 17, 17, 0.85);
	color: #fff;
	font-family: var(--sf-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4rem 0.7rem;
	margin-bottom: var(--sf-space-3);
	line-height: 1;
}

.single-artwork__title,
.single-apparel__title {
	font-family: var(--sf-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--sf-space-4);
}

.single-artwork__meta,
.single-apparel__meta {
	color: var(--sf-color-muted);
	font-style: italic;
	font-size: 1rem;
	line-height: 1.55;
	margin: 0 0 var(--sf-space-5);
	padding-bottom: var(--sf-space-5);
	border-bottom: 1px solid var(--sf-color-border);
}

.single-artwork__content,
.single-apparel__content {
	font-size: 1rem;
	line-height: 1.65;
	margin-bottom: var(--sf-space-6);
}

.single-artwork__content p,
.single-apparel__content p {
	margin: 0 0 1em;
}

.single-artwork__content p:last-child,
.single-apparel__content p:last-child {
	margin-bottom: 0;
}

/* Inquire button ------------------------------------------------------------*/
.single-artwork__inquire,
.single-apparel__inquire {
	margin: var(--sf-space-2) 0 0;
}

.single-artwork__inquire .button,
.single-apparel__inquire .button {
	display: inline-block;
	padding: 0.95rem 2rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.875rem;
	background: var(--sf-color-text);
	color: #fff;
	border: 1px solid var(--sf-color-text);
	border-radius: 0;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.single-artwork__inquire .button:hover,
.single-artwork__inquire .button:focus-visible,
.single-apparel__inquire .button:hover,
.single-apparel__inquire .button:focus-visible {
	background: transparent;
	color: var(--sf-color-text);
}

@media (max-width: 600px) {
	.single-artwork__inquire .button,
	.single-apparel__inquire .button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

.single-artwork__sold-note {
	color: var(--sf-color-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: var(--sf-space-2) 0 0;
}

.single-artwork__sold-note a {
	color: var(--sf-color-text);
}

/* =====================================================================
   FAQ page (page-faq.php)

   Each Q&A pair is authored as a core "Details" block in the editor,
   which renders as native <details>/<summary>. We style those native
   elements directly — no JS, no custom blocks, no plugin needed.
   ===================================================================== */

.page-faq {
	padding-block: var(--sf-space-10);
}

.page-faq__inner {
	max-width: 760px;
	margin: 0 auto;
	padding-inline: var(--sf-space-5);
}

.page-faq__hero {
	margin: 0 0 var(--sf-space-6);
	border-radius: var(--sf-radius-md);
	overflow: hidden;
	background: var(--sf-color-surface);
	aspect-ratio: 16 / 9;
}

.page-faq__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-faq__hero-placeholder {
	margin: 0 0 var(--sf-space-6);
	border: 1px dashed var(--sf-color-border);
	border-radius: var(--sf-radius-md);
	background: var(--sf-color-surface);
	color: var(--sf-color-muted);
	font-size: 0.9375rem;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--sf-space-4);
}

.page-faq__header {
	text-align: center;
	margin-bottom: var(--sf-space-8);
}

.page-faq__title {
	margin: 0 0 var(--sf-space-3);
}

.page-faq__lede {
	color: var(--sf-color-muted);
	font-size: 1.0625rem;
	margin: 0;
}

/* The Details block — core WP outputs <details class="wp-block-details">. */
.page-faq__content .wp-block-details,
.page-faq__content details {
	background: var(--sf-color-bg);
	border: 1px solid var(--sf-color-border);
	border-radius: var(--sf-radius-md);
	padding: var(--sf-space-4) var(--sf-space-5);
	margin: 0 0 var(--sf-space-3);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-faq__content .wp-block-details[open],
.page-faq__content details[open] {
	border-color: var(--sf-color-text);
	box-shadow: var(--sf-shadow-sm);
}

.page-faq__content summary {
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--sf-color-text);
	cursor: pointer;
	list-style: none;
	padding-right: var(--sf-space-6);
	position: relative;
	outline-offset: 4px;
}

/* Strip the default disclosure triangle (Chrome/Edge/Firefox/Safari) so we
   can draw our own + icon. */
.page-faq__content summary::-webkit-details-marker {
	display: none;
}

.page-faq__content summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: var(--sf-color-muted);
	transition: transform 0.2s ease, color 0.2s ease;
}

.page-faq__content details[open] summary::after {
	content: "−";
	color: var(--sf-color-text);
}

/* Body of an open Details block — paragraphs, lists, links. */
.page-faq__content details > *:not(summary) {
	margin-top: var(--sf-space-4);
}

.page-faq__content details > *:not(summary):first-of-type {
	/* Reduces the gap when the first child after summary is a paragraph. */
	margin-top: var(--sf-space-3);
}

.page-faq__content details p {
	color: var(--sf-color-text);
	line-height: 1.65;
	margin: 0 0 var(--sf-space-3);
}

.page-faq__content details p:last-child {
	margin-bottom: 0;
}

.page-faq__content details ul,
.page-faq__content details ol {
	margin: 0 0 var(--sf-space-3) var(--sf-space-5);
}

.page-faq__content details a {
	color: var(--sf-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-faq__empty {
	background: var(--sf-color-surface);
	border: 1px dashed var(--sf-color-border);
	border-radius: var(--sf-radius-md);
	padding: var(--sf-space-6);
	text-align: center;
	color: var(--sf-color-muted);
}

.page-faq__footer {
	margin-top: var(--sf-space-10);
	padding-top: var(--sf-space-6);
	border-top: 1px solid var(--sf-color-border);
	text-align: center;
}

.page-faq__cta-lede {
	color: var(--sf-color-muted);
	margin: 0 0 var(--sf-space-3);
}

.page-faq__cta {
	margin: 0;
}

@media (max-width: 600px) {
	.page-faq {
		padding-block: var(--sf-space-8);
	}
	.page-faq__content .wp-block-details,
	.page-faq__content details {
		padding: var(--sf-space-3) var(--sf-space-4);
	}
	.page-faq__content summary {
		font-size: 1rem;
	}
}