/* ==========================================================================
   VENEERS — pre-finished veneers
   The warmest world in the range. Grain is the hero, so the page gives it
   scale and darkness to sit in, and keeps type quiet beside it.
   ========================================================================== */


/* --- HERO — the grain is the viewport ------------------------------------- */

.vhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 0;
  overflow: hidden;
}
/* inset + width is over-constrained and leaves a gap; scale for the parallax
   headroom instead so the grain always covers the viewport */

.vhero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--nav-h) + clamp(60px, 12vh, 150px));
  padding-bottom: clamp(56px, 10vh, 120px);
  color: #FBF6ED;
}

@media (max-width: 760px) {
  .vhero__headline { max-width: 100%; }
  .vhero__sub { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  }


/* --- THE IDEA ------------------------------------------------------------- */

.manifesto__grid { row-gap: 40px; }
.manifesto__grid .index { margin-bottom: 8px; }
.manifesto__title { margin-bottom: clamp(40px, 5vw, 68px); }
.manifesto__body { row-gap: 34px; }


/* --- THE BOOK-MATCH — the page's one moment -------------------------------
   Two leaves off one flitch. They start apart and closed; the scroll turns
   the right leaf about the joint until the figure mirrors across it. */

.match { padding-block: 0; }

.match__pin {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--sp-block);
}
.match__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
  align-items: center;
}
.match__aside { grid-column: 1 / span 4; }
.match__aside .index { margin-bottom: 8px; }
.match__title {
  margin: 18px 0 clamp(22px, 3vw, 36px);
  font-size: var(--fs-h2);
  max-width: min(11ch, 100%);
}
.match__note { font-size: var(--fs-small); max-width: min(38ch, 100%); }

.match__stage {
  position: relative;
  grid-column: 6 / span 7;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 3 / 2;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.match__leaf {
  display: block;
  height: 100%;
  background-image: url("../assets/veneers/faces/k6181an.webp");
  background-size: cover;
  background-position: center;
  will-change: transform;
  backface-visibility: hidden;
}
/* the right leaf is the mirror — that is the whole trick */
.match__leaf--r { transform: scaleX(-1); transform-origin: left center; }
.match__leaf--l { transform-origin: right center; }

/* the joint */
.match__spine {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 22px 6px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}
.match__stage figcaption {
  position: absolute;
  left: 0;
  bottom: -34px;
}

@media (max-width: 960px) {
  .match__aside, .match__stage { grid-column: 1 / -1; }
  .match__stage { margin-top: 44px; }
}
@media (max-width: 860px) { .match__pin { min-height: 0; padding-block: var(--sp-band); } }


/* --- THE COLLECTION ------------------------------------------------------- */

.vcoll__head { margin-bottom: clamp(44px, 6vw, 76px); }

.vfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(22px, 3vw, 46px);
  margin-top: clamp(34px, 4.4vw, 58px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.vfilters__btn {
  appearance: none; background: none; border: 0; padding: 12px 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  transition: color var(--t-fast) var(--ease);
}
.vfilters__btn span { margin-left: 8px; font-size: 10px; opacity: 0.6; }
.vfilters__btn:hover { color: var(--ink); }
.vfilters__btn.is-on { color: var(--accent); }
.vfilters__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.leaves {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(196px, 46vw), 1fr));
  gap: clamp(20px, 2.4vw, 40px) clamp(14px, 1.8vw, 28px);
}
.leaf { margin: 0; }
.leaf__img {
  display: block; width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: filter var(--t-med) var(--ease);
}
.leaf__meta { margin-top: 13px; }
.leaf__code {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: -0.01em; color: var(--ink);
}
.leaf__sp {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.45; color: var(--dim);
}
@media (hover: hover) { .leaf:hover .leaf__img { filter: brightness(1.07); } }
.leaf.is-out { display: none; }

.leaves__note {
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  max-width: min(58ch, 100%);
}

.vspec__head { margin-bottom: clamp(44px, 6vw, 80px); }


/* --- CLOSE ---------------------------------------------------------------- */

.vclose__inner { padding-block: var(--sp-band); text-align: center; }
.vclose__headline { max-width: min(13ch, 100%); margin-inline: auto; }
.vclose__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(34px, 4vw, 56px);
}


/* ==========================================================================
   PERSONALITY — THE ITALIAN VENEER HOUSE
   Section heads are set as a quiet column beside the statement, with more air
   than any other product page allows. Nothing is centred; nothing is loud.
   ========================================================================== */

[data-page="veneers"] .sec-head { display: block; margin-bottom: clamp(50px, 7vw, 110px); }
[data-page="veneers"] .sec-head > .col-3,
[data-page="veneers"] .sec-head > .col-8 { grid-column: auto; }
[data-page="veneers"] .sec-head > .col-3 { margin-bottom: 20px; }
[data-page="veneers"] .sec-head h2 {
  font-size: clamp(28px, 3.8vw, 58px);
  letter-spacing: -0.034em;
  max-width: min(15ch, 100%);
}
[data-page="veneers"] .band__inner { padding-block: clamp(120px, 17vw, 260px); }

/* the abstract fields are retired — this page has real grain */
[data-page="veneers"] .plate { background-image: none; background: var(--plate); }


@media (prefers-reduced-motion: reduce) {
  .match__leaf { transform: none !important; }
  .match__leaf--r { transform: scaleX(-1) !important; }
}


/* the spine the two leaves turn about — visible while they are open, gone
   once the match is closed and the figure reads across the joint */
.match__spine {
  opacity: 0;
  will-change: opacity;
}
.match__leaf {
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.44);
  will-change: transform, filter;
}


/* ==========================================================================
   HERO — the book-matched pair
   Two consecutive leaves off one flitch, standing open on a warm ground.
   This is the only hero in the range that shows a mirrored pair, and it says
   "veneer" before a word is read. Type sits beneath, never across the figure.
   ========================================================================== */

.vhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.vhero__inner {
  width: 100%;
  padding-top: calc(var(--nav-h) + clamp(30px, 6vh, 70px));
  padding-bottom: clamp(40px, 7vh, 90px);
}
.vhero__eyebrow { color: var(--label-ink); }

.vpair {
  position: relative;
  margin: clamp(22px, 3.4vh, 44px) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: clamp(230px, 42vh, 430px);
  perspective: 1400px;
}
.vpair__leaf {
  display: block;
  height: 100%;
  background: url("../assets/veneers/faces/k6121an.webp") center / cover;
  will-change: transform, filter;
  backface-visibility: hidden;
}
/* the right leaf is the mirror — the whole point of a book-match */
.vpair__leaf--l { transform-origin: center; }
.vpair__leaf--r { transform: scaleX(-1); transform-origin: center; }

/* the joint the two leaves meet at */
.vpair__joint {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px; margin-left: -0.5px;
  background: rgba(24, 14, 6, 0.42);
  box-shadow: 0 0 26px 7px rgba(24, 14, 6, 0.26);
  pointer-events: none;
}

.vhero__foot {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-top: clamp(26px, 4vh, 48px);
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--rule-strong);
}
.vhero__headline { margin: 0; max-width: min(13ch, 100%); }
.vhero__sub { margin: 0; max-width: min(38ch, 100%); }
.vhero__plate { margin-top: 16px; color: var(--label-ink); }

@media (max-width: 860px) {
  .vhero__foot { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .vpair { height: clamp(180px, 30vh, 260px); }
  .vhero__headline, .vhero__sub { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vpair__leaf { transform: none !important; }
  .vpair__leaf--r { transform: scaleX(-1) !important; }
}


/* ==========================================================================
   THE COLLECTION, AS LEAVES RATHER THAN CHIPS
   The grid was rendering every face as a 196x573 strip: the img carried a
   height attribute and the CSS never released it with height:auto, so the
   declared aspect-ratio was ignored and cover cropped away two thirds of the
   leaf's width. Nothing was distorted — but a veneer read as a paint chip.
   The face is now shown at the file's own proportion, in fewer, larger cards,
   with the first leaf given the room its figure deserves.
   ========================================================================== */

.leaves {
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 82vw), 1fr));
  gap: clamp(26px, 3vw, 52px) clamp(18px, 2vw, 34px);
}

.leaf__img {
  height: auto;                 /* release the height attribute */
  aspect-ratio: 430 / 620;      /* the leaf's own proportion — no crop */
  object-fit: cover;
  object-position: 50% 50%;
}

/* the first leaf opens the collection at twice the width, so the eye starts
   on a sheet it can actually read rather than on a row of samples */
.leaf:first-child { grid-column: span 2; }
.leaf:first-child .leaf__img { aspect-ratio: 860 / 620; object-position: 50% 42%; }

@media (hover: hover) {
  .leaf__img { transition: filter var(--t-med) var(--ease), transform 700ms var(--ease); }
  .leaf:hover .leaf__img { transform: scale(1.02); }
}

@media (max-width: 900px) {
  .leaves { grid-template-columns: repeat(2, 1fr); }
  .leaf:first-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .leaves { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .leaf:first-child .leaf__img { aspect-ratio: 430 / 340; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf:hover .leaf__img { transform: none; }
}