/**
 * Solution Gallery (inc/solution-gallery.php's medallion_render_solution_gallery())
 * — single-storage-solution.php's AND single-finishing-touch.php's photo
 * section (this component is fully generic, shared as-is by both, not
 * duplicated). Plain centered column: main photo, thumbnail strip below it
 * (only rendered when there's more than one photo). No mockup yet —
 * reasonable first pass, easy to restyle later.
 *
 * .storage-solution-abstract (the Abstract WYSIWYG field) lives here too,
 * rather than its own stylesheet, since it only ever appears alongside
 * this gallery, on both of those single-item templates. Breadcrumb styles
 * are NOT here — see assets/css/storage-breadcrumbs.css — since
 * breadcrumbs also appear on the taxonomy archive templates, which don't
 * load this file.
 */

.single-storage-solution,
.single-finishing-touch {
	margin-bottom: var(--blockSpace);
}

/* WordPress's own body_class() adds a same-named class ("single-storage-
   solution" / "single-finishing-touch") to <body> for every single CPT
   post — an unrelated coincidence with the class above, which was only
   ever meant for the <main> element (see single-storage-solution.php:
   <main id="primary" class="site-main single-storage-solution">). Without
   this, the rule above ALSO matches <body>, padding out the bottom of the
   whole page, not just the content column. !important because <body>'s
   own margin-bottom otherwise wins on specificity/source-order grounds
   against the identical selector above matching the same element. */
body.single-storage-solution,
body.single-finishing-touch {
	margin-bottom: 0 !important;
}

/* .storage-solution-info wraps the Abstract AND the Door Style(s)/
   Finish(es) spec list (inc/spec-list.php) together as one column
   alongside the gallery — it, not .storage-solution-abstract itself, now
   owns the column's width so the two stack correctly. */
.storage-solution-info {
	width: min(100%, 23rem);
	/* Lets this flex item actually shrink to that width instead of being
	   forced wider by an oversized child (see .storage-solution-abstract's
	   embedded-video rules below) — flex items default to min-width: auto,
	   which uses a child's own intrinsic/fixed width (e.g. a 720px-wide
	   self-hosted [video] or a YouTube [embed]'s ~560-945px iframe) as the
	   floor no matter what width/max-width says, which is what was pushing
	   the whole flex row (and the page) wider than the viewport on mobile. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.storage-solution-abstract {
	/*
  max-width: 60rem;
	margin: 2.5rem auto 0;
	padding: 0 1.5rem;
	*/
  font-size: 1rem;
	line-height: 1.7;
	color: #333333;
}

.storage-solution-abstract p:first-child {
	margin-top: 0;
}

/* ---- Embedded video responsiveness (the Abstract field's [embed]/[video]
   shortcodes — single-storage-solution.php) ----
 * Both of WordPress's own shortcodes render their own fixed PIXEL width/
 * height — a YouTube [embed]'s <iframe> (oEmbed picks a width based on the
 * content column, often 500-900px+) and a self-hosted [video mp4="..."]'s
 * <video> tag (whatever width="…" height="…" was typed into the shortcode,
 * e.g. 720x720) — neither shrinks on its own for a narrow phone screen,
 * which is exactly what was overflowing the (only ~23rem-wide, see
 * .storage-solution-info above) column and forcing the whole page to
 * scroll sideways.
 *
 * max-width: 100% alone stops the overflow but leaves the element's own
 * HTML height="" attribute fixed, squishing/cropping the video vertically
 * once its width shrinks.
 *
 * height: auto is the classic fix for this on an <img> OR a <video> — both
 * are true media elements, so the browser derives the correct ratio from
 * the file's own dimensions (falling back to the width/height attributes
 * before the file loads). An <iframe> is NOT a media element — the browser
 * has no video file to measure, so "height: auto" on an iframe does NOT
 * reliably fall back to ITS width/height attributes the way <img>/<video>
 * do; in practice it just collapses to the browser's plain default replaced-
 * element box (300x150 → reported as 368x150 once max-width clamped the
 * width to this column's ~368px, per chat) — that's the real cause of the
 * squished 368x150 report, not the video's own oEmbed-returned ratio (which
 * really was fine — see chat). So the YouTube <iframe> gets an explicit
 * aspect-ratio instead: 16/9, since that's what virtually every oEmbed
 * provider (YouTube, Vimeo, etc.) actually serves — hardcoded rather than
 * read from the iframe's own width/height attributes, since there's no
 * reliable CSS-only way to do that (CSS's typed attr() could in theory,
 * but real-world browser support for it is still far too thin to rely on
 * as of this writing).
 */
.storage-solution-abstract iframe {
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.storage-solution-abstract video,
.storage-solution-abstract embed,
.storage-solution-abstract object {
	max-width: 100%;
	height: auto;
}

/* wp_video_shortcode()'s own wrapper div ALSO gets a fixed inline
   `style="width: …px;"` (again, whatever the shortcode's width="" was) —
   max-width here caps that inline width the same way it caps the <video>
   itself above; a browser's own box-model always honors max-width as a
   hard ceiling over a plain width, inline or not. */
.storage-solution-abstract .wp-video,
.storage-solution-abstract .mejs-container {
	max-width: 100%;
}

.solution-gallery {
	max-width: 60rem;
	/*
  margin: 2.5rem auto;
	padding: 0 1.5rem;
  */
}

/*
 * No fixed aspect-ratio box here on purpose — some photos are portrait,
 * some landscape, some square. The image shows in full at up to 800px
 * (50rem) on its longer side and scales down proportionally from there,
 * instead of being cropped to fill a fixed shape. A 1600x1000 photo
 * renders at 800x500, for example.
 */
.sg-main {
	max-width: 50rem;
	text-align: center;
}

.sg-main img {
	display: block;
	max-width: 100%;
	max-height: 50rem;
	width: auto;
	height: auto;
	margin: 0 auto;
}

/* Main photo doubles as the shared Image Modal lightbox trigger (see
   inc/solution-gallery.php / inc/image-modal.php) — reset it back down to
   plain button styling so it doesn't change the photo's layout at all.
   inline-block (not block + width: 100%) so this button's own box hugs the
   photo's actual rendered size instead of the wider .sg-main box around it
   — needed so .sg-zoom-icon's "bottom right corner" below lands on the
   photo's own corner, not out in .sg-main's gray letterbox margin for a
   portrait/narrower-than-the-box photo. line-height: 0 avoids the usual
   few-px inline-block gap under the image (same trick .sg-thumb uses). */
.sg-main-trigger {
	display: inline-block;
	max-width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	line-height: 0;
	cursor: zoom-in;
	position: relative;
}

/* "Click to enlarge" cue — only present when .sg-main-trigger is (see
   inc/solution-gallery.php), so it never implies a zoom that isn't there.
   filter: drop-shadow() (not box-shadow) so the shadow follows the icon's
   own white silhouette rather than showing as a shadowed rectangle behind
   its transparent background. */
.sg-zoom-icon {
	position: absolute;
  right: 0.75rem;
	bottom: 0.75rem;
  width: 2rem;
	height: 2rem;
	pointer-events: none;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
	transition: filter 0.2s ease;
}

.sg-main-trigger:hover .sg-zoom-icon,
.sg-main-trigger:focus-visible .sg-zoom-icon {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
}

.sg-zoom-icon svg {
	display: block;
	width: 100%;
	height: 100%;
  opacity: 0.5;
}
.sg-main-trigger:hover .sg-zoom-icon svg {
  opacity: 1;
}

/* Small caption below the main photo — that photo's own Caption field from
   the media library (inc/solution-gallery.php), not a separate ACF field.
   :empty hides it outright for a photo with no caption set, on first load
   AND after assets/js/solution-gallery.js swaps it on a thumbnail click —
   no separate show/hide class needed on either side. */
.sg-caption {
	max-width: 50rem;
	margin: 0.5rem auto 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #6b6b6b;
	text-align: left;
  font-style: italic;
}

.sg-caption:empty {
	display: none;
}

/* Thumbnail strip — only rendered when there's more than one photo. */
.sg-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.sg-thumb {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	line-height: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s, border-color 0.2s;
}

.sg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sg-thumb:hover,
.sg-thumb:focus-visible,
.sg-thumb.is-active {
	opacity: 1;
	border-color: var(--goldHex);
}