/* =========================================================================
 * Feature Accordion 002 — Spaces with Photo and Tags
 *
 * Copied from Nolan's Feature Accordion 001 and set in this site's system.
 * Rows are native <details> (core/details), one open at a time (pattern.js).
 * The open row's photo shows in the left column: without the script each row
 * carries its own image, lifted out of the list by position: absolute; with
 * it, one frame (the stage) holds every photo and travels to the open row.
 * The head (eyebrow in the left column, title and aside on the right) is this
 * pattern's own: the site has no shared section head.
 * ========================================================================= */

.feature-accordion-002 {
	/* The head's eyebrow and the photo share the left column. */
	/* The left column is the photo's width (a quarter, less a step); the
	   list, and the head's title above it, start a large step after it. */
	--feature-accordion-002-photo: calc(25% - var(--space-md));
	--feature-accordion-002-photo-gap: var(--space-xl);
}

/* The head: eyebrow in the left column, the title and aside on the right.
   Asymmetric tracks, so CSS. */
.feature-accordion-002 .feature-accordion-002__head {
	display: grid;
	grid-template-columns: var(--feature-accordion-002-photo) minmax(0, 1fr);
	column-gap: var(--feature-accordion-002-photo-gap);
	row-gap: var(--space-md);
	align-items: start;
	margin-bottom: var(--space-lg);
}

.feature-accordion-002 .feature-accordion-002__head > * {
	margin-block: 0;
}

.feature-accordion-002__head-body {
	gap: var(--space-md);
}

.feature-accordion-002__head-body .wp-block-heading {
	margin: 0;
}

.feature-accordion-002 .feature-accordion-002__aside {
	max-width: 22rem;
	margin: 0;
}

.feature-accordion-002 .feature-accordion-002__body {
	position: relative;
	display: grid;
	grid-template-columns: var(--feature-accordion-002-photo) minmax(0, 1fr);
	column-gap: var(--feature-accordion-002-photo-gap);
	min-height: 28rem;
	margin-top: 0;
}

.feature-accordion-002__list {
	grid-column: 2;
	counter-reset: feature-accordion-002;
	border-top: var(--border);
}

.feature-accordion-002 .feature-accordion-002__item {
	counter-increment: feature-accordion-002;
	margin: 0;
	padding-block: var(--space-md);
	border-bottom: var(--border);
}

/* The row's title: its number, the name in the display face, and a dot that
   fills in the accent when the row is open. */
.feature-accordion-002__item > summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
	align-items: baseline;
	gap: var(--space-md);
	list-style: none;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--heading-4);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-muted);
	transition: color 0.25s ease;
}

.feature-accordion-002__item > summary::-webkit-details-marker {
	display: none;
}

.feature-accordion-002__item > summary::before {
	content: counter(feature-accordion-002, decimal-leading-zero) ".";
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.06em;
}

.feature-accordion-002__item > summary::after {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: var(--color-border);
	align-self: center;
	transition: background-color 0.25s ease;
}

.feature-accordion-002__item[open] > summary,
.feature-accordion-002__item > summary:hover {
	color: var(--color-text);
}

.feature-accordion-002__item[open] > summary::after {
	background: var(--color-accent);
}

/* The description and the tags, under the name (past the number's third). */
.feature-accordion-002 .feature-accordion-002__text,
.feature-accordion-002 .feature-accordion-002__tags {
	max-width: 30rem;
	margin: var(--space-sm) 0 0 calc(100% / 3 + var(--space-md) / 3);
	color: var(--color-muted);
}

.feature-accordion-002 .feature-accordion-002__tags {
	gap: var(--space-xs);
}

/* A tag: a small rounded chip, one amenity. */
.feature-accordion-002 .feature-accordion-002__tag {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: calc(var(--space-xs) / 2) var(--space-sm);
	border: var(--border);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color-text);
	background: var(--color-surface);
	white-space: nowrap;
}

/* The photo, without the script: out of the list, into the left column,
   top-aligned with it. Its 3 : 2 shape is on the Image block. Doubled class:
   the editor makes every block position: relative. */
.feature-accordion-002 .feature-accordion-002__media.feature-accordion-002__media {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--feature-accordion-002-photo);
	margin: 0;
}

.feature-accordion-002__media img,
.feature-accordion-002__slide img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* Enhanced (pattern.js): one stage carries every photo and travels to the open
   row; each item gets an animated panel and a rule. */
.feature-accordion-002__body.is-enhanced .feature-accordion-002__item .feature-accordion-002__media {
	display: none;
}

.feature-accordion-002__stage {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--feature-accordion-002-photo);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	will-change: transform;
}

.feature-accordion-002 .feature-accordion-002__slide.feature-accordion-002__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	visibility: hidden;
}

/* As heavy as the hidden rule above, or it never shows. */
.feature-accordion-002 .feature-accordion-002__slide.feature-accordion-002__slide:is(.is-current, .is-leaving) {
	visibility: visible;
}

.feature-accordion-002 .feature-accordion-002__slide.feature-accordion-002__slide.is-current {
	z-index: 1;
}

.feature-accordion-002 .feature-accordion-002__slide img {
	height: 100%;
	will-change: transform;
}

.feature-accordion-002__body.is-enhanced .feature-accordion-002__item {
	position: relative;
}

/* No margin of its own: core gives every non-summary child of a Details block
   the block gap, which appeared in full the moment a row opened, before the
   height tween had started. The breathing room lives inside the panel
   instead, so it opens with it. */
.feature-accordion-002__panel.feature-accordion-002__panel {
	margin: 0;
	overflow: hidden;
}

.feature-accordion-002__panel-inner {
	padding-top: var(--space-xs);
}

/* The rule that draws itself under the open row, in the accent. */
.feature-accordion-002__rule {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* SplitText's line masks: room below each line for descenders. */
.feature-accordion-002__line-mask {
	padding-block-end: 0.18em;
	margin-block-end: -0.18em;
}

/* The closing strip: a question and a button between two hairlines, edge to
   edge. The question is led by the site's smile (a mask, its colour the
   text's). */
.feature-accordion-002 .feature-accordion-002__cta-band {
	margin-top: var(--space-xl);
	border-top: var(--border);
	border-bottom: var(--border);
}

.feature-accordion-002 .feature-accordion-002__cta {
	gap: var(--space-md);
	align-items: center;
	padding-block: var(--space-sm);
}

.feature-accordion-002 .feature-accordion-002__cta-text {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.feature-accordion-002__cta-text::before {
	content: "";
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	background-color: currentColor;
	-webkit-mask: url("../../assets/masks/smile.svg") center / contain no-repeat;
	mask: url("../../assets/masks/smile.svg") center / contain no-repeat;
}

/* A phone and an upright tablet: one column, each row's photo inside it. */
@media (max-width: 48rem) {
	.feature-accordion-002 .feature-accordion-002__head,
	.feature-accordion-002 .feature-accordion-002__body {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.feature-accordion-002__list {
		grid-column: 1;
	}

	.feature-accordion-002__item > summary {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.feature-accordion-002 .feature-accordion-002__text,
	.feature-accordion-002 .feature-accordion-002__tags {
		margin-left: 0;
	}

	.feature-accordion-002 .feature-accordion-002__media.feature-accordion-002__media {
		position: static;
		width: 100%;
		margin-top: var(--space-sm);
	}

	/* No stage: each row shows its own photo inside its panel. */
	.feature-accordion-002__stage {
		display: none;
	}

	.feature-accordion-002__body.is-enhanced .feature-accordion-002__item .feature-accordion-002__media {
		display: block;
	}
}

/* The editor: every row's content is shown for editing (core keeps a closed
   row's content hidden anyway); the photo sits in the row, not beside it. */
.editor-styles-wrapper .feature-accordion-002 .feature-accordion-002__media.feature-accordion-002__media {
	position: static;
	width: min(100%, 20rem);
	margin-top: var(--space-sm);
}