/**
 * Single Finish (single-door-finishes.php) — post_type "door-finishes",
 * public URL /finish/{slug}/. Masthead (gray bar, centered title) reuses
 * single-room.css's .room-header-bar/.room-header-title, same convention as
 * single-door-styles.css / single-combinations.css — see functions.php's
 * medallion_enqueue_assets().
 *
 * This is the mirror of single-door-styles.css (a Materials swatch row +
 * a list of the OTHER post type, here Door Styles instead of Finishes) —
 * class names are "finish-" prefixed instead of "door-" so this file can be
 * tuned independently without touching single-door-styles.css. There's no
 * Colors section here (see single-door-finishes.php's doc comment for why),
 * so no equivalent of .door-colors-* / .door-color-* (note the spaces —
 * without them this comment's own text would prematurely close it).
 */

:root {
	/* The "you've picked this one" indicator on a Material swatch — a plain
	   1px border with room around it so the stroke doesn't touch the swatch
	   image/label. Same values as single-door-styles.css's
	   --door-selected-border/--door-selected-gap, kept as separate variables
	   so this file's own knobs are free to drift from that one later. */
	--finish-selected-border: #1a1a1a;
	--finish-selected-gap: 10px;
}

.single-door-finish {
	margin-bottom: var( --blockSpace, 4rem );
}

/* ---- Optional full-width hero photo ----
   Not every Finish has one — see has_post_thumbnail() check in
   single-door-finishes.php. Full-bleed, no fixed aspect-ratio crop; it just
   scales down proportionally at any width, same as single-door-styles.css's
   .door-hero. */

.finish-hero {
	width: 100%;
	line-height: 0;
}

.finish-hero-image {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Two-column layout ----
   Mobile: single column, sidebar (photo + Finish Details) stacks above the
   Materials/Door Styles column, nothing sticks.

   Desktop (>=900px): sidebar sticks via plain CSS position:sticky, no JS —
   same mechanism as single-door-styles.css's .door-sidebar (bounded by the
   grid row's height, i.e. as tall as .finish-content). */

.finish-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	max-width: 1320px;
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
	align-items: start;
}

@media ( min-width: 900px ) {
	.finish-layout {
		grid-template-columns: minmax( 260px, 600px ) 1fr;
		gap: 3rem;
		padding: 2rem 3rem 5rem;
	}

	.finish-sidebar {
		position: sticky;
		top: 2rem;
	}
}

.finish-sidebar {
	display: flex;
	flex-direction: column;
	padding-top: 2rem;
}

/* ---- Main preview photo + "Now Showing" caption ----
   Swapped by assets/js/single-door-finishes.js whenever a Material swatch
   is clicked — same img.src-swap technique as single-door-styles.js. */

.finish-preview {
	border: 1px solid #cacaca;
	padding: 5rem;
	margin-bottom: 1rem;
}

/* The preview photo's Image Modal trigger (inc/image-modal.php) — same
   button-chrome reset as single-door-styles.css's .door-preview-trigger;
   assets/js/single-door-finishes.js keeps its data-modal-full/data-modal-alt
   (and disabled state) synced to whichever Material's photo is showing. */
.finish-preview-trigger {
	display: block;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: zoom-in;
  aspect-ratio: 1 / 1;
}

.finish-preview-trigger:disabled {
	cursor: default;
}

.finish-preview-image {
	display: block;
	width: 100%;
	height: 100% /* auto */;
	background: #f0f0f0;
  object-fit: cover;
}

.finish-caption {
	margin-bottom: 2rem;
}

.finish-preview-caption {
	margin: 0.85rem 0 0;
	font-family: var( --font-primary );
	font-weight: var( --font-weight-medium );
	font-style: normal;
	font-size: 0.8rem;
	color: #333333;
}

/* ---- Finish Details (the post's own editor content) ---- */

.finish-details-heading {
	margin: 0 0 0.85rem;
	font-family: var( --font-primary );
	font-weight: var( --font-weight-regular );
	font-style: normal;
	font-size: 1.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.finish-details-body {
	font-size: 1rem;
	line-height: 1.6;
	color: #333333;
}

.finish-details-body ul {
	margin: 0;
	padding-left: 1.1em;
}

.finish-details-body p:first-child {
	margin-top: 0;
}

/* ---- Shared section heading style (Available Materials / Door Styles) ---- */

.finish-section-heading {
	margin: 0 0 1.25rem;
	font-family: var( --font-primary );
	font-weight: var( --font-weight-regular );
	font-style: normal;
	font-size: 1.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.finish-content {
	padding-top: 2rem;
}

.finish-content > section + section {
	margin-top: 3rem;
}

/* ---- Available Materials ---- */

.finish-materials-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 0rem;
}

.finish-material-item {
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: 1px solid transparent;
	padding: var( --finish-selected-gap );
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	border-radius: 2px;
}

@media ( min-width: 500px ) {
	.finish-material-item {
		flex-basis: 33.3333%;
	}
}
@media ( min-width: 768px ) {
	.finish-material-item {
		flex-basis: 25%;
	}
}
@media ( min-width: 900px ) {
	.finish-material-item {
		flex-basis: 50%;
	}
}
@media ( min-width: 1200px ) {
	.finish-material-item {
		flex-basis: 33.33333%;
	}
}
@media ( min-width: 1420px ) {
	.finish-material-item {
		flex-basis: 25%;
	}
}

.finish-material-item.is-selected {
	border-color: var( --finish-selected-border );
}

.finish-material-media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var( --room-line, #e0e0e0 );
	border-radius: 2px;
}

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

.finish-material-label {
	font-family: var( --font-primary );
	font-weight: var( --font-weight-regular );
	font-style: normal;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* ---- Door Styles ----
   Flat list (no grouping) — see single-door-finishes.php's doc comment for
   why there's no equivalent of single-door-styles.css's per-Finish-Type
   .door-finish-group. */

.finish-door-style-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1.5rem 1rem;
}

@media ( min-width: 600px ) {
	.finish-door-style-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.finish-door-style-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
	text-align: center;
	opacity: 1;
	transition: opacity 0.2s;
}

.finish-door-style-media {
	display: block;
	width: 100%;
	aspect-ratio: 120 / 191 /*1 / 1*/;
	overflow: hidden;
	background: var( --room-line, #e0e0e0 );
	border-radius: 2px;
}

.finish-door-style-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.finish-door-style-label {
	font-family: var( --font-primary );
	font-weight: var( --font-weight-regular );
	font-style: normal;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/* Unavailable for the currently-selected Material — dimmed, name
   italicized, not clickable/keyboard-focusable. Same treatment as
   single-door-styles.css's .door-finish-item.is-unavailable. */
.finish-door-style-item.is-unavailable {
	opacity: 0.4;
	pointer-events: none;
}

.finish-door-style-item.is-unavailable .finish-door-style-label {
	font-style: italic;
}

/* ---- Get Inspired ----
 * Rooms that feature this Finish (medallion_get_rooms_featuring_door_
 * finish(), inc/door-finishes.php) — exact mirror of single-door-styles.css's
 * .door-inspired-* rules (echoes the Room Gallery's own .room-card look,
 * smaller and always 2-up), just "finish-" prefixed to match this file's
 * own naming convention.
 *
 * Same caveat as single-door-styles.css's version: a reasonable first pass
 * off this theme's own existing patterns, not yet checked against the Room
 * Gallery's actual CSS (still waiting on whatever styles .room-card/
 * .room-grid/.room-card-media/.room-card-caption to true this up exactly).
 */

.finish-inspired-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1.5rem 1rem;
}

.finish-inspired-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.finish-inspired-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var( --room-line, #e0e0e0 );
	border-radius: 2px;
}

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

.finish-inspired-caption {
	margin: 0.5rem 0 0;
	font-family: var( --font-primary );
	font-weight: var( --font-weight-regular );
	font-style: normal;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #333333;
}

.finish-inspired-name {
	font-weight: var( --font-weight-medium );
}