/* Tokens mirror nanopixo-webiste/css/style.css */
:root {
  --color-primary: #ffff20;
  --color-primary-light: #ffffa0;
  --color-text: #111111;
  --color-text-light: #666666;
  --color-background: #ffffff;
  --color-background-dark: #111111;
  --color-accent-blue: #1a1a2e;
  --color-gray-light: #f5f5f5;
  --color-gray: #e0e0e0;

  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-2lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  --container-max-width: 1140px;
  --container-padding: 1.5rem;

  --border-radius: 8px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
}

/* ─── Header (mirrors main site) ──────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-gray);
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  height: 70px;
}
.logo__img { height: 36px; width: auto; flex-shrink: 0; }
.nav__list {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-weight: 500;
  font-size: var(--font-size-md);
  color: var(--color-text);
  transition: opacity var(--transition);
}
.nav__link:hover { opacity: 0.6; }
@media (max-width: 768px) {
  .nav { display: none; }
}

/* ─── Buttons (mirrors main site .btn--primary) ──────────────────────── */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-md);
  font-weight: 700;
  text-align: center;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn--primary {
  color: var(--color-background);
  background-color: var(--color-text);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.header-cta-btn { padding: 0.5rem 1.25rem; font-size: var(--font-size-sm); }

/* ─── Showcase hero ──────────────────────────────────────────────────── */
.showcase-hero { padding: var(--spacing-2xl) 0 var(--spacing-lg); text-align: center; }
/* Match the home hero title style exactly (home uses style.css's --font-family,
   which is the Inter/system stack, NOT this page's Roboto override) */
.showcase-hero__title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: clamp(30px, 5.2vw, 52px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 860px;
  margin: 0 auto var(--spacing-sm);
  color: var(--color-text);
}
.showcase-hero__title .highlight {
  background: var(--color-primary);
  color: #111418;
  font-weight: inherit;
  padding: 0 0.12em 2px;
  border-bottom: 3px solid #111418;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  mix-blend-mode: multiply;
}
/* The three sentences wrap naturally on desktop, but stack onto their own
   lines on mobile (one break after each of the first two sentences). */
.showcase-hero__title .sc-br { display: none; }
@media (max-width: 600px) {
  .showcase-hero__title .sc-br { display: inline; }
}
.showcase-hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 720px;
  margin: 0 auto;
}

/* ─── Masonry grid ───────────────────────────────────────────────────── */
/* CSS Grid with row-span trick. Landscape tiles span 2 columns, portraits
   span 1. Each tile's row-span is computed in JS from its natural height
   (aspect-ratio drives the height; we just translate that to grid rows).
   grid-auto-flow: dense lets the engine backfill gaps so a wide landscape
   followed by narrow portraits packs cleanly. */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 10px;          /* fine-grained unit row */
  grid-auto-flow: dense;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
@media (max-width: 1200px) { .showcase-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .showcase-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }

/* The outer .tile is the GRID cell, it can be slightly taller than the
   video's natural aspect because row-span rounds up. We keep that overflow
   transparent so the page background shows through (no black bar). The
   visual card lives on .tile__media inside. */
.tile {
  position: relative;
  cursor: pointer;
  background: transparent;
}
.tile--portrait  { grid-column: span 1; }   /* 1 col wide, tall */
.tile--landscape { grid-column: span 2; }   /* 2 cols wide, shorter */
@media (max-width: 500px) {
  .tile--portrait, .tile--landscape { grid-column: span 1; }
}
/* The visual card, black background, rounded corners, shadow. Aspect
   ratio is set here (not on the video) so the box is sized correctly even
   before the video element loads metadata. The grid cell can be a few px
   taller; the excess shows through as transparent page background instead
   of a black bar at the bottom. */
.tile__media {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.tile:hover .tile__media {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.tile--portrait  .tile__media { aspect-ratio: 9 / 16; }
.tile--landscape .tile__media { aspect-ratio: 16 / 9; }
.tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fullscreen mode: switch to letterbox (contain) so the video never crops
   or stretches. The inline max-width/max-height uses min(naturalPx, 100vw)
   so the video is capped at the smaller of native size or viewport, a
   300×900 video stays 300×900 max even on a 4K monitor.
   !important on width/height/object-fit because user-agent default
   styles for :fullscreen often use !important themselves (e.g. width:100%
   forced by browser). */
.tile video:fullscreen,
.tile video:-webkit-full-screen {
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: #000;
  margin: auto;
}
/* Solid black backdrop around the letterboxed video. */
video::backdrop,
video::-webkit-backdrop {
  background: #000;
}

.tile__hint {
  position: absolute;
  left: var(--spacing-xs);
  right: var(--spacing-xs);
  bottom: var(--spacing-xs);
  color: #fff;
  font-size: var(--font-size-sm);
  text-align: center;
  background: rgba(17,17,17,0.7);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
.tile:hover .tile__hint { opacity: 1; transform: translateY(0); }
.tile.is-playing .tile__hint,
.tile.is-activated .tile__hint { opacity: 0; }

/* Property link: a small grey caption UNDER the video (not on it). Single line,
   truncated with an ellipsis (the visible text is also capped in JS); the href
   holds the full URL and opens in a new tab. The masonry reflow reserves a fixed
   caption row (LINK_CAPTION_H in showcase.js) so the grid stays balanced. */
.tile__link {
  display: block;
  margin-top: 6px;
  padding: 0 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-light);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile__link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.showcase__empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--spacing-2xl) 0;
}

/* ─── Promo strips (mirrors yellow + black tonal palette) ────────────── */
/* In a CSS grid, grid-column: 1 / -1 stretches an item across every track.
   Combined with the parent's grid-auto-flow: dense, this creates a clean
   full-width band that breaks the masonry horizontally, same visual effect
   as the previous column-span: all in a CSS-columns layout. */
.promo {
  grid-column: 1 / -1;
  margin: var(--spacing-lg) 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.promo__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-lg);
  /* Generous vertical padding, promos read as proper landing-page bands,
     not skinny ribbons. ~200px tall on a short-copy promo. */
  padding: var(--spacing-xl) var(--spacing-xl);
  min-height: 200px;
}
/* Icon column mirrors the homepage .feature__icon / .benefit__icon, 160px
   wide, height follows the SVG's native ratio (some are tall, some are
   wide). The promo's min-height: 200px gives enough room for the tallest
   ones to sit cleanly with the copy. */
.promo__icon {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo__icon img {
  width: 160px;
  height: auto;
  display: block;
}
.promo__eyebrow {
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}
.promo__headline {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.promo__body {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.5;
  max-width: 60ch;
}
.promo__cta { white-space: nowrap; }

/* Yellow tonal, primary brand accent */
.promo--accent {
  background: var(--color-primary);
  color: var(--color-text);
}
.promo--accent .promo__body { color: var(--color-text); opacity: 0.85; }
.promo--accent .btn--primary {
  background: var(--color-text);
  color: var(--color-primary);
}
.promo--accent .btn--primary:hover { background: var(--color-accent-blue); }

/* Soft grey tonal */
.promo--soft {
  background: var(--color-gray-light);
  color: var(--color-text);
}
.promo--soft .promo__body { color: var(--color-text-light); }

@media (max-width: 700px) {
  .promo__inner {
    grid-template-columns: 1fr;
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
    gap: var(--spacing-md);
  }
  .promo__icon {
    width: 120px;
    margin: 0 auto;
  }
  .promo__icon img {
    width: 120px;
  }
  .promo__cta .btn { width: 100%; display: block; }
}

/* ─── Final CTA ──────────────────────────────────────────────────────── */
.showcase-finalcta {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  background: var(--color-gray-light);
  margin-top: var(--spacing-2xl);
}
.showcase-finalcta__title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-xs);
}
.showcase-finalcta__subtitle {
  color: var(--color-text-light);
  font-size: var(--font-size-lg);
  margin: 0 auto var(--spacing-lg);
  max-width: 540px;
}
.showcase-finalcta__btn { font-size: var(--font-size-lg); padding: 1rem 2rem; }