/*
  Cabinet Library component styles — the reference template every manufacturer
  page inherits. Load tokens.css first, then this file.

  Reuses AZQ's own site component classes directly (container, zone-*,
  section-label/section-heading/lede, btn, gallery-card, benefit-list) rather
  than reinventing a parallel visual language — a manufacturer page should
  read as part of arizonakitchenquotes.com, not a bolt-on microsite. cl-*
  classes below cover only what's genuinely new (door styles, swatches,
  warranty card) and are styled to sit naturally alongside the reused ones.
*/
@import url("../../styles.css");

/* ---------- Page-level ---------- */
.cl-page { overflow-x: hidden; }

/* ---------- Header (static — no JS mobile menu; kept deliberately simple) --- */
.cl-header {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.cl-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.cl-header__logo { height: 44px; width: auto; }
.cl-header .btn { white-space: nowrap; }

/* ---------- 01 Manufacturer Hero ---------- */
.cl-hero {
  padding: var(--space-3xl) 0;
}
.cl-hero .container {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
/* Real breadcrumb trail (Home / Manufacturer / Collection), added 2026-07-13
   (UX audit) -- replaces a bare "{Manufacturer} / Collection" text label.
   On-navy contrast matches .cl-hero__eyebrow's treatment since both live in
   the same hero content block. */
.cl-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.cl-breadcrumb a {
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s var(--ease-out);
}
.cl-breadcrumb a:hover { color: var(--color-text-on-primary); }
.cl-breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.9); }
.cl-breadcrumb__sep { color: rgba(255, 255, 255, 0.35); }

/* Thin certification strip on collection pages, added 2026-07-13 (UX audit)
   -- these badges previously only existed on the manufacturer index page.
   Deliberately lower padding than a full section so it reads as a strip
   directly under the hero, not another full content block. Reuses
   .cl-cert-badge itself unchanged. */
.cl-cert-strip { padding: var(--space-lg) 0; }
.cl-cert-strip .cl-brand-overview__certs { margin-top: 0; justify-content: center; }

.cl-hero__eyebrow {
  display: block;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-sm);
}
.cl-hero__name {
  font-size: var(--text-hero);
  margin-bottom: var(--space-md);
}
.cl-hero__tagline {
  margin-bottom: var(--space-xl);
}
/* Manufacturer brand lockup — a real visual focal point at the top of the
   hero content, not the quiet supporting mark used in Brand Overview
   (.cl-about-wordmark). Most manufacturer logos are dark ink on a
   transparent background (see tools/isolate_logo_wordmark.py), which
   disappears on the hero's dark zone-navy background — the white plate
   behind it is what makes it read, the same fix already used for
   .cl-hero__visual img's transparent-illustration case. Gated on
   manufacturer.logo.primary existing, same guard as .cl-about-wordmark. */
.cl-hero__brand {
  display: inline-block;
  background: var(--color-surface);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
}
.cl-hero__logo {
  display: block;
  height: 44px;
  width: auto;
}
@media (min-width: 640px) {
  .cl-hero__logo { height: 56px; }
}
.cl-hero__visual {
  position: relative;
}
.cl-hero__visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  /* Second layer (added 2026-07-08, Elyon presentation pass) is a soft
     grounding shadow beneath the visual — purely additive, same "resting on
     a surface" treatment as .cl-color-card__swatch-stack, generic to every
     manufacturer's hero. */
  box-shadow: var(--shadow-lg), 0 18px 28px -14px rgba(26, 26, 26, 0.28);
  /* Invisible for an opaque photo (fills the whole box either way), but
     gives a transparent-background illustration (e.g. Fabuwood's door-style
     line art, used here via resolve_collection_hero_image() when a
     collection has no real hero photo) a light backdrop instead of the dark
     zone-navy hero section showing through and washing out its black ink. */
  background: var(--color-surface);
}
.cl-hero__visual::after {
  content: "";
  position: absolute;
  inset: var(--space-md) calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.5;
}
@media (min-width: 860px) {
  /* 40/60 text/photo split (Chad, 2026-07-13 UX audit) -- was 1.1fr 1fr
     (~52/48), reading as more text-heavy than the photography deserved.
     Shared by both the manufacturer-index hero and the collection-page
     hero (same selector, same fix for both). */
  .cl-hero .container { grid-template-columns: 2fr 3fr; }
}

/* ---------- 02 Brand Overview ---------- */
.cl-brand-overview .section-heading { font-size: var(--text-h2); line-height: 1.15; max-width: 24ch; }
.cl-brand-overview .lede { max-width: 62ch; font-size: var(--text-lead); }
.cl-about-heading-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
/* A supporting mark beside the About heading, not a featured card — the
   manufacturer's own logo (see tools/isolate_logo_wordmark.py), reading on
   the page background without needing a backing plate. Sized/opacity
   raised 2026-07-07 (was height:22px, opacity:0.55) — it had faded to the
   point of being "almost invisible" (Chad); still deliberately smaller and
   quieter than the hero's .cl-hero__brand treatment, just no longer
   washed-out. */
.cl-about-wordmark {
  height: 28px;
  width: auto;
  opacity: 0.85;
}
.cl-brand-overview__certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.cl-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}
.cl-cert-badge::before { content: "\2713"; color: var(--color-secondary); font-weight: 700; }

/* ---------- 03 Door Style Grid (also a nav entry tile, Sec. 1a) ---------- */
.cl-door-style-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.cl-door-style-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--cl-card-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.cl-door-style-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.cl-door-style-card__media { display: block; }
.cl-door-style-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* contain, not cover: this image is a real photo for some manufacturers
     (Skyline) and a line-art door-profile illustration for others
     (Fabuwood) — cover crops an illustration's frame/bevel/panel detail,
     which is exactly the legibility this card exists to provide. contain
     letterboxes photos slightly but never cuts off the subject either way. */
  object-fit: contain;
  /* A warm neutral backdrop (not the card's own white surface) plus a
     hairline inner frame — added 2026-07-07 because a white/cream door
     photo (e.g. Fabuwood's Dove, Frost finishes) on a white card was
     reading as no image at all. Subtle by design: this is a contrast fix,
     not a redesign, and applies to every manufacturer's door-style card
     alike (a photo that's already high-contrast is unaffected). */
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
/* Body wrapper added 2026-07-13 (UX audit) -- the card used to be a single
   <a> (image + name only); it now needs a name + description + a distinct
   "View Colors" link, which can't nest inside the image's own <a> (no
   nested anchors), so the card became a <div> with two real links inside:
   .cl-door-style-card__media (image) and .cl-door-style-card__cta (button). */
.cl-door-style-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}
.cl-door-style-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h3);
  color: var(--color-primary);
}
.cl-door-style-card__description {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}
.cl-door-style-card__cta { align-self: flex-start; }
@media (min-width: 640px) {
  .cl-door-style-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cl-door-style-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 04 Color Swatches (also a nav entry tile, Sec. 1a) ---------- */
.cl-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.cl-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 96px;
  text-align: center;
}
.cl-swatch__chip {
  width: var(--cl-swatch-size);
  height: var(--cl-swatch-size);
  border-radius: 50%;
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm);
  object-fit: cover;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.cl-swatch:hover .cl-swatch__chip {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-md);
}
.cl-swatch__label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

/* Color/finish cards — swatch-forward, not another kitchen gallery. The
   door swatch itself is the large, dominant visual (shaker profile, bevel,
   frame, panel should all read clearly); no kitchen photo here, that's the
   Gallery section's job alone. cl-swatch* above stays in use for the small
   inline chip context on collection pages' hero area if needed. */
.cl-color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.cl-color-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--cl-card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.cl-color-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cl-color-card__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
/* No extra zoom transform here (removed 2026-07-08): object-fit: cover
   already adapts to whatever the source image's own aspect ratio is —
   a near-square, pre-cropped close-up (Skyline's swatch photos) fills the
   box almost as-is, while a full door+drawer product shot (Fabuwood's
   enrichment-sourced renders, much taller than wide) gets cropped
   proportionally by cover. A fixed transform:scale(1.8) was tuned only for
   the first case; on the second it over-cropped straight into the flat
   center of one panel, hiding the frame/bevel/panel detail that was the
   whole point of sourcing a real render. Confirmed via Playwright on both
   manufacturers before removing — this is a size-adaptive fix, not a
   manufacturer-specific one. Still scoped to real <img> swatches only: the
   solid-color <span> fallback chip (no swatch_image) never had photographic
   detail to frame in the first place. */
/* Hover crossfade: door render -> installed kitchen photo. Only emitted (by
   publish_cabinet_library.py's _color_card_html) when a collection has BOTH
   swatch_image and a real gallery[] photo — data-gated, not manufacturer-gated,
   so it silently does nothing wherever that pairing doesn't exist yet. */
.cl-color-card__swatch-stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Same white-on-white contrast fix as .cl-door-style-card__image — a pale
     finish (e.g. Galaxy Frost) photographed against a white wall/backdrop
     was blending straight into this card's own white surface. The second
     shadow layer (added 2026-07-08, Elyon presentation pass) is a soft
     "resting on a surface" grounding shadow — purely additive, no layout
     change, generic to every manufacturer's swatch. */
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border), 0 10px 18px -10px rgba(26, 26, 26, 0.22);
}
.cl-color-card__swatch-stack .cl-color-card__swatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cl-color-card__swatch--kitchen {
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.cl-color-card:hover .cl-color-card__swatch--kitchen { opacity: 1; }
.cl-color-card__label {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-primary);
}
.cl-color-card__family {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 2px;
}
@media (min-width: 640px) {
  .cl-color-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .cl-color-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Graceful fallback for finishes with no approved photography yet — a
   compact, honest "also available in" listing instead of an oversized
   plain-color card sized to match the photographed cards next to it (a
   large empty-feeling color block was reading as unfinished, not
   intentional). Third and last rung of the presentation hierarchy: photo
   with kitchen hover > photo alone > this listing. Reuses the pill
   language already established by .cl-cert-badge rather than inventing a
   new visual idiom. Purely data-gated (collections with no swatch_image) —
   a fully-photographed manufacturer (Skyline) never emits this. */
.cl-color-list__heading {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-sm);
}
.cl-color-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.cl-color-list__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}
.cl-color-list__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-border);
  flex-shrink: 0;
}
.cl-color-list__family {
  font-weight: 500;
  color: var(--color-text-muted);
}
.cl-color-list__family::before { content: "\00b7"; margin: 0 4px; }

/* Progressive disclosure for manufacturers whose collections carry a
   finish_tier (e.g. Fabuwood's Signature / Signature Select / Designer
   Collection) — grouped by door style (collapsed <details>, no JS) then by
   tier within each style. A no-op for manufacturers without tier data
   (Skyline): the generator falls back to a plain .cl-color-grid and never
   emits these classes at all. */
.cl-door-style-group {
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--cl-card-radius);
  padding: var(--space-lg);
}
.cl-door-style-group__heading {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h3);
  color: var(--color-primary);
  list-style: none;
}
.cl-door-style-group__heading::-webkit-details-marker { display: none; }
.cl-door-style-group__heading::before {
  content: "\25B8";
  display: inline-block;
  margin-right: var(--space-sm);
  transition: transform 0.15s var(--ease-out);
}
.cl-door-style-group[open] .cl-door-style-group__heading::before {
  transform: rotate(90deg);
}
.cl-tier-group { margin-top: var(--space-lg); }
.cl-tier-group:first-of-type { margin-top: var(--space-md); }
.cl-tier-group__heading {
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* ---------- 05 Construction Features ---------- */
.cl-construction-features-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--cl-card-radius);
  padding: var(--space-lg);
}
.cl-construction-features-group h3 {
  font-size: var(--text-h3);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}
.cl-construction-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
}
.cl-construction-features li {
  padding-left: var(--space-lg);
  position: relative;
  color: var(--color-text-muted);
}
.cl-construction-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  font-weight: 700;
}
.cl-construction-grid {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
@media (min-width: 860px) {
  .cl-construction-grid { grid-template-columns: repeat(2, 1fr); }
}
.cl-detail-note {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

/* ---------- 06 Warranty Card ---------- */
.cl-warranty-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}
.cl-warranty-card__years {
  font-family: var(--font-heading);
  font-size: var(--text-numeral);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}
.cl-warranty-card__summary {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  min-width: 0;
}
@media (min-width: 640px) {
  .cl-warranty-card { flex-direction: row; align-items: center; gap: var(--space-xl); }
  .cl-warranty-card__years { white-space: nowrap; }
}
.zone-navy .cl-warranty-card,
.cl-warranty-card.on-navy { background: rgba(255, 255, 255, 0.06); }

/* ---------- 07 Gallery ---------- */
.cl-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.cl-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: transform 0.2s var(--ease-out);
}
.cl-gallery img:hover { transform: scale(1.03); }
.cl-gallery-item { cursor: zoom-in; }
@media (min-width: 640px) {
  .cl-gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Zero-JS lightbox: a thumbnail links to #lightbox-<id>; this box is
   display:none until its id matches the URL hash (:target), then it
   becomes a fixed full-viewport overlay. No JS file, matching this
   project's <details>/<summary> zero-dependency convention. Clicking the
   backdrop or the close mark links to "#", clearing the hash and hiding it
   again — no Escape-key handling without JS, an accepted trade-off. */
.cl-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: var(--space-xl);
  align-items: center;
  justify-content: center;
}
.cl-lightbox:target { display: flex; }
.cl-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.88);
}
.cl-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  margin: 0;
  text-align: center;
}
.cl-lightbox__content img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.cl-lightbox__content figcaption {
  margin-top: var(--space-md);
  color: var(--color-surface);
  font-weight: 600;
  font-size: var(--text-body);
}
.cl-lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1;
  box-shadow: var(--shadow-md);
}
.cl-lightbox__close:hover { background: var(--color-accent); color: var(--color-text-on-primary); }

/* ---------- 08 Downloads ---------- */
.cl-downloads {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
  max-width: 48ch;
}
.cl-downloads a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-weight: 600;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.cl-downloads a:hover { border-color: var(--color-accent); background: var(--color-bg); }
.cl-downloads a::before { content: "\2913"; color: var(--color-accent); font-weight: 700; }

/* ---------- 09 CTA ---------- */
.cl-cta .container { text-align: center; }

/* NEW badge, for manufacturer-flagged new items (door style / swatch cards) */
.cl-badge-new {
  background: var(--cl-badge-new-bg);
  color: var(--cl-badge-new-text);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}