/* ============================================================
   LUCA SOPRANA — Product CSS (v2)
   Product hero, overview, key elements, break image, specs, gallery, related.
   Built on tokens.css.
   ============================================================ */

/* ---------- Hero ---------- */
.product-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--bg-deep);
}
.product-hero .media { position: absolute; inset: 0; overflow: hidden; }
.product-hero .media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: brightness(0.62) contrast(1.05);
}
.product-hero .vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(23,31,36,0) 30%, rgba(23,31,36,0.55) 100%),
    linear-gradient(180deg, rgba(23,31,36,0.55) 0%, rgba(23,31,36,0.15) 30%, rgba(23,31,36,0.4) 60%, rgba(23,31,36,0.92) 100%);
  pointer-events: none;
}
.product-hero .copy {
  position: absolute; inset: 0;
  padding: 0 var(--sp-7) var(--sp-9);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--fg-on-dark);
}
.product-hero .crumb {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(244,245,245,0.7);
  margin-bottom: var(--sp-6);
  opacity: 0;
}
.product-hero .crumb a { color: inherit; border-bottom: 1px solid transparent; text-decoration: none; }
.product-hero .crumb a:hover { border-bottom-color: rgba(244,245,245,0.7); }

.product-hero h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, var(--fs-112));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-on-dark);
  margin: 0;
}
.product-hero h1 .line { display: block; overflow: hidden; }
.product-hero h1 .line > span { display: inline-block; transform: translateY(105%); }
.product-hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: var(--tracking-normal);
  color: var(--fg-accent);
}

.product-hero .subtitle {
  margin-top: var(--sp-5);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, var(--fs-22));
  color: rgba(244,245,245,0.85);
  max-width: 560px;
  opacity: 0;
}
.product-hero .tagline {
  margin-top: var(--sp-7);
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: var(--sp-5);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(244,245,245,0.7);
  opacity: 0;
}

@media (max-width: 640px) {
  .product-hero .media img { filter: brightness(0.55) contrast(1.05); transform: scale(1.18); }
  .product-hero .vignette {
    background:
      linear-gradient(180deg, rgba(23,31,36,0.6) 0%, rgba(23,31,36,0.3) 30%, rgba(23,31,36,0.55) 60%, rgba(23,31,36,0.95) 100%);
  }
  .product-hero .copy { padding: 0 var(--sp-4) var(--sp-7); }
  .product-hero h1 { font-size: clamp(2.6rem, 12vw, 5rem); }
  .product-hero .subtitle { font-size: var(--fs-16); }
  .product-hero .tagline { font-size: 11px; gap: var(--sp-3); margin-top: var(--sp-5); }
}

/* ---------- Overview ---------- */
.product-overview {
  padding: var(--sp-10) var(--sp-7);
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--sp-9);
  align-items: start;
}
.product-overview h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2rem, 1rem + 2.4vw, var(--fs-56));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.product-overview h2 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.product-overview .body p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-16);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  margin-bottom: var(--sp-5);
  max-width: 60ch;
}
.product-overview .body p.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-22);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin-bottom: var(--sp-6);
}

/* Split-reveal headlines (used by JS) */
.split-reveal { display: block; }
.split-reveal .word { display: inline-block; overflow: hidden; vertical-align: bottom; margin-right: 0.22em; }
.split-reveal .word > span { display: inline-block; transform: translateY(105%); }
.split-reveal br { display: block; content: ''; }

/* ---------- Key elements (3 cards) ---------- */
.key-elements {
  padding: var(--sp-9) var(--sp-7);
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--line-hairline);
}
.key-elements .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-7);
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.key-elements .head h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2rem, 1rem + 2.4vw, var(--fs-56));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.key-elements .head h2 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.key-elements .head .count {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}
.key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);
}
.key-card .frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-fog);
}
.key-card .frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-standard);
}
.key-card:hover .frame img { transform: scale(1.04); }
.key-card .num {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.key-card h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-22);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin-bottom: var(--sp-3);
}
.key-card h3 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.key-card p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-14);
  line-height: var(--leading-loose);
  color: var(--fg-2);
}
@media (max-width: 900px) {
  .key-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .key-elements { padding: var(--sp-7) var(--sp-4); }
  /* Product overview — collapse to one column with proper side padding (was cramped on right) */
  .product-overview {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding: var(--sp-7) var(--sp-4);
  }
  .product-overview .body p { max-width: none; font-size: var(--fs-15, 15px); }
  .product-overview .body p.lede { font-size: var(--fs-18); line-height: 1.45; }
  .product-overview h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}
@media (max-width: 560px) {
  .product-overview { padding: var(--sp-6) var(--sp-4); gap: var(--sp-5); }
  .product-overview .body p { font-size: 15px; line-height: 1.65; }
  .product-overview .body p.lede { font-size: 17px; }
  .specs { padding: var(--sp-7) var(--sp-4); grid-template-columns: 1fr; gap: var(--sp-6); }
  .specs .row { font-size: 13px; }
}

/* ---------- Break image (full-bleed) ---------- */
.break-image {
  position: relative;
  height: 80vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg-deep);
}
.break-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.break-image .caption {
  position: absolute;
  bottom: var(--sp-5);
  left: var(--sp-7);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(244,245,245,0.85);
}

/* ---------- Movement video section ---------- */
.movement-video {
  background: var(--bg-deep);
  color: var(--fg-on-dark);
  padding: var(--sp-10) var(--sp-7);
  border-top: 1px solid var(--line-on-dark);
}
.movement-video .inner {
  max-width: 1400px;
  margin: 0 auto;
}
.movement-video .head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.movement-video .head h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2rem, 1rem + 3vw, var(--fs-56));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-on-dark);
  margin: 0;
}
.movement-video .head h2 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.movement-video .head .count {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video-frame .video-caption {
  margin-top: var(--sp-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-13);
  color: rgba(244,245,245,0.6);
  letter-spacing: 0.02em;
}
.video-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.video-row .video-frame { aspect-ratio: 4 / 3; }
@media (max-width: 800px) {
  .movement-video { padding: var(--sp-7) var(--sp-4); }
  .video-row { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---------- Specs ---------- */
.specs {
  padding: var(--sp-10) var(--sp-7);
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
  border-top: 1px solid var(--line-hairline);
}
.specs .left h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2rem, 1rem + 2.4vw, var(--fs-56));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}
.specs .left h2 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.specs .left p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-14);
  line-height: var(--leading-loose);
  color: var(--fg-2);
  margin-bottom: var(--sp-4);
}
.specs .left .ref {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}
.specs-table {
  display: flex; flex-direction: column;
}
.specs-table .row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-14);
}
.specs-table .row:first-child { border-top: 1px solid var(--line-hairline); }
.specs-table .k {
  color: var(--fg-3);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.specs-table .v { color: var(--fg-1); }
.specs-table .v em { color: var(--fg-accent); font-style: italic; font-family: var(--font-serif); }
@media (max-width: 900px) {
  .specs { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-7) var(--sp-4); }
  .specs-table .row { grid-template-columns: 140px 1fr; gap: var(--sp-4); }
}

/* ---------- Gallery ---------- */
.gallery-section {
  padding: var(--sp-9) var(--sp-7);
  max-width: 1600px;
  margin: 0 auto;
}
.gallery-section .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.gallery-section .head h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.8rem, 1rem + 2vw, var(--fs-40));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.gallery-section .head h2 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.gallery-section .head .count {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.gallery-grid figure { overflow: hidden; background: var(--bg-fog); }
.gallery-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-standard); }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid .g-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery-grid .g-tall { grid-row: span 2; aspect-ratio: 4 / 5; }
.gallery-grid .g-half { aspect-ratio: 4 / 3; }
@media (max-width: 800px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .g-tall { grid-row: auto; aspect-ratio: 4 / 5; }
  .gallery-section { padding: var(--sp-7) var(--sp-4); }
}

/* ---------- Related ---------- */
.related {
  padding: var(--sp-9) var(--sp-7);
  background: var(--bg-fog);
  border-top: 1px solid var(--line-hairline);
}
.related-inner { max-width: 1400px; margin: 0 auto; }
.related h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2rem, 1rem + 2vw, var(--fs-56));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-7);
}
.related h2 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
}
.related-card {
  text-decoration: none;
  color: inherit;
  border-bottom: 0;
}
.related-card .frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-surface);
}
.related-card .frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-standard);
}
.related-card:hover .frame img { transform: scale(1.04); }
.related-card .meta {
  margin-top: var(--sp-4);
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--sp-4);
}
.related-card h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-22);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--fg-1);
}
.related-card h3 em { font-family: var(--font-serif); font-style: italic; color: var(--fg-accent); }
.related-card .ref {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-3);
  margin-top: var(--sp-2);
}
.related-card .arrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
  white-space: nowrap;
}
@media (max-width: 800px) {
  .related-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .related { padding: var(--sp-7) var(--sp-4); }
}
