/* ==========================================================================
   hotelwallpanel.com — V2.0 Visual Slot Components
   Implements the layout/pagination rules of the Instruction Card (V2.0):
     §1 Homepage   IMG-HP-01 .. IMG-HP-08
     §2 Products   IMG-PR-01 .. IMG-PR-04
     §4 About      IMG-AB-01 .. IMG-AB-04
     §5 Downloads  IMG-DL-01
   All colours derive from tokens.v2.css — no hard-coded palette here.
   ========================================================================== */

/* ---------------------------------------------------------------- section */
.vsection {
  background: var(--color-bg-page);
  color: var(--color-text-body);
  padding: clamp(48px, 6vw, 96px) 0;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.vsection--flush { padding: 0 0 clamp(48px, 6vw, 96px); }

/* Host pages that are already dark (the WPC series page still carries the dark
   series theme). Keep the page band transparent and carry the mandated white
   surface on the sample board itself, so a light tray reads as deliberate
   rather than as a light theme pasted onto a dark page. */
.vsection--on-dark { background: transparent; }
.vsection--on-dark .vhead h2 { color: #F8F9FA; }
.vsection--on-dark .vhead p { color: #9CA3AF; }
.vsection--on-dark .vhead__eyebrow { color: var(--color-brand-gold); }

.vhead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}
.vhead__eyebrow {
  color: var(--color-brand-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.vhead h2 {
  color: var(--color-text-heading);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.14;
  letter-spacing: -.01em;
  font-weight: 600;
  margin: 0;
}
.vhead p { color: var(--color-text-body); font-size: 15px; line-height: 1.7; margin: 0; }

@media (max-width: 860px) {
  .vhead { grid-template-columns: 1fr; gap: 20px; }
}

/* ------------------------------------------------------------------ card */
/* The card markup uses <span> for media/body/name/sub so that an <a> card stays
   valid HTML. Spans are inline, so aspect-ratio, margin-top and vertical stacking
   silently do nothing until they are forced to block. Keep this rule block. */
.vcard__media,
.vcard__body { display: block; }
.vswatch__item,
.vswatch__frame,
.vswatch__name,
.vswatch__sub { display: block; }

.vcard {
  background: var(--color-card-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
  text-decoration: none;
  display: block;
}
.vcard:hover,
.vcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--box-shadow-card-hover);
}
.vcard:focus-visible { outline: 2px solid var(--color-brand-gold); outline-offset: 3px; }

.vcard__body { padding: 20px 22px 24px; }
.vcard__body h3 {
  color: var(--color-text-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
}
.vcard__body p { font-size: 14px; line-height: 1.6; color: var(--color-text-body); margin: 0; }

/* spec strip under IMG-HP-02: "NRC: 0.85 | Fire Rating: ASTM E84 Class A" */
.vcard__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--color-border-light);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vcard__spec b { color: var(--color-brand-gold-hover); font-weight: 700; }

/* ================================================== §1 Homepage slots ==== */

/* IMG-HP-01 — immersive 100vh master visual.
   The card prescribes a left-anchored dark scrim so the copy column stays
   legible; that scrim is layered on top of the existing hero slider. */
.vhero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(20, 21, 24, .85) 0%,
    rgba(20, 21, 24, .40) 60%,
    rgba(20, 21, 24, .10) 100%);
}
/* text overlay: left aligned, max 640px, 48px from the container edge */
.vhero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding-left: var(--vpad);
  color: var(--color-text-inverse);
}
@media (max-width: 860px) {
  .vhero-copy { padding-left: var(--vpad-m); }
}

/* --- active hero: the card specifies a 100vh first screen for IMG-HP-01.
   The existing slider sizes .hero-slide, so the override has to land there. */
.hero.vhero .hero-slide {
  height: 100vh;
  max-height: 940px;
  min-height: 620px;
}
.hero.vhero .hero-slide .copy {
  max-width: 640px;
  padding-left: var(--vpad);
}
.hero.vhero .batch-badge { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .hero.vhero .hero-slide { height: auto; min-height: 520px; }
  .hero.vhero .hero-slide .copy { padding-left: var(--vpad-m); }
}

/* IMG-HP-02 .. IMG-HP-05 — Featured Wall Systems.
   Card render box 380 x 285 (4:3), image zoom 1.04 on hover. */
.vfeat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.vfeat .vcard__media {
  aspect-ratio: 4 / 3;
  max-height: 285px;
  overflow: hidden;
  background: var(--color-secondary-surface);
}
.vfeat .vcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.vfeat .vcard:hover .vcard__media img { transform: scale(1.04); }
@media (max-width: 1100px) { .vfeat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .vfeat { grid-template-columns: 1fr; } }

/* IMG-HP-06 / 07 / 08 — Hospitality Projects bento gallery.
   Main 60% (16:10), right rail 40% holding two 5:3 plates. */
.vbento {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}
.vbento__side { display: grid; gap: 24px; }
.vbento .vcard__media { overflow: hidden; background: var(--color-secondary-surface); }
.vbento .vcard__media img { width: 100%; display: block; }
.vbento__main .vcard__media { aspect-ratio: 16 / 10; }
.vbento__side .vcard__media { aspect-ratio: 5 / 3; }
.vbento .vcard__media img { height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .vbento { grid-template-columns: 1fr; }
}

/* ================================================== §2 Products slots ==== */

/* IMG-PR-01 .. IMG-PR-04 — Finish & Texture Selector, 1:1 on pure white. */
.vswatch-board {
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  padding: clamp(20px, 3vw, 40px);
}
.vswatch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.vswatch__item { text-align: center; }
.vswatch__frame {
  aspect-ratio: 1 / 1;
  background: #FFFFFF;                       /* card mandates pure #FFFFFF */
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
}
.vswatch__frame:hover { transform: translateY(-4px); box-shadow: var(--box-shadow-card-hover); }
/* Generated swatches land on a near-white studio sweep, not a measured #FFFFFF.
   Multiply lets that sweep disappear into the white frame instead of showing a
   visible rectangle edge; the material itself is unaffected. */
.vswatch__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
.vswatch__name {
  margin-top: 14px;
  color: var(--color-text-heading);
  font-size: 14px;
  font-weight: 600;
}
.vswatch__sub { margin-top: 4px; font-size: 12.5px; color: var(--color-text-muted); }
@media (max-width: 900px)  { .vswatch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .vswatch { grid-template-columns: 1fr; } }

/* ==================================================== §4 About slots ===== */

/* IMG-AB-01 — 3840x1600 panoramic manufacturing complex, 2.4:1 */
.vpano {
  position: relative;
  border-radius: var(--border-radius-card);
  overflow: hidden;
  aspect-ratio: 24 / 10;
  background: var(--color-primary-dark);
}
.vpano img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vpano__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 56px 32px 28px;
  background: linear-gradient(0deg, rgba(20, 21, 24, .88) 0%, rgba(20, 21, 24, 0) 100%);
  color: var(--color-text-inverse);
}
.vpano__cap h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.vpano__cap p { margin: 0; font-size: 14px; opacity: .88; }
@media (max-width: 620px) {
  .vpano { aspect-ratio: 16 / 9; }
  .vpano__cap { padding: 40px 20px 18px; }
}

/* IMG-AB-02 .. AB-04 — equipment matrix, 3:2 */
.vequip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.vequip .vcard__media { aspect-ratio: 3 / 2; background: var(--color-secondary-surface); }
.vequip .vcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .vequip { grid-template-columns: 1fr; } }

/* ================================================ §5 Downloads slot ===== */

/* IMG-DL-01 — 3D isometric joint detail, 16:10, pure white CAD sheet */
.vdl {
  background: #FFFFFF;                        /* card mandates pure #FFFFFF */
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
  padding: clamp(16px, 2.4vw, 32px);
  margin-bottom: 32px;
}
.vdl__frame { aspect-ratio: 16 / 10; overflow: hidden; }
.vdl__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
.vdl__legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
}
.vdl__legend div { font-size: 13px; line-height: 1.5; color: var(--color-text-body); }
.vdl__legend b {
  display: block;
  color: var(--color-brand-gold-hover);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
@media (max-width: 860px) { .vdl__legend { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vdl__legend { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- shared utility */
.vpill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-primary-dark);
  color: var(--color-brand-gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- dark-panel heading guard -------------------------------------------
   site-ui.css carries `main h1,main h2,main h3{color:var(--ink)}` (0,0,2). That
   targets the heading directly and beats the `text-white` it would otherwise
   inherit from a dark .bg-brand-* panel, leaving those headings near-invisible
   on their own background. These rules are (0,1,1) and win.
   Also note brand-* is NOT a stock Tailwind colour: without site-ui.css the
   .bg-brand-* classes are inert, so that stylesheet must stay loaded. */
.bg-brand-600 :is(h1, h2, h3),
.bg-brand-700 :is(h1, h2, h3),
.bg-brand-800 :is(h1, h2, h3),
.bg-brand-900 :is(h1, h2, h3) { color: #FFFFFF; }