/*
 * Range showcase, on paper — the offline copy of the deck.
 *
 * The page is meant to be shown when there is no internet: the reader saves it
 * as a PDF and opens it from disk. Nothing here is interactive, so the whole
 * live deck is hidden and a flat one, built by js/ud-showcase-export.js, takes
 * its place: one slide per product, no CTA form (a form on paper is of no use
 * to anybody).
 *
 * Why a separate deck rather than printing the live one: the panel is a single
 * fixed element shared by every screen, and a fixed element prints once, on the
 * first page. Each slide needs its own picture, so each slide gets its own.
 *
 * That picture is always the product photograph. The stand diagrams are not
 * printed — see the note at the head of js/ud-showcase-export.js — so nothing
 * here freezes their pivots any more.
 *
 * The fonts are the theme's own woff2, so the PDF carries Google Sans inside it
 * and reads the same on a machine that has never seen the site.
 */

/* On screen the flat deck does not exist as far as the reader is concerned. */
.uds-print{display:none}

@media print{
  /* 13.333in x 7.5in — the 16:9 slide PowerPoint and Keynote both default to.
     margin:0 because every slide paints its own full-bleed background. */
  @page{size:338.7mm 190.5mm;margin:0}

  /* Backgrounds are the design, not decoration: without this the deck prints
     as black text on white and the brand colour is gone. */
  html,body{background:#002554!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Everything that belongs to the screen. The stage is the live deck itself;
     #uds-scenes is the hidden source the drawings are cloned from. */
  .ud-header,
  .ud-footer,
  .ud-showcase .uds-prog,
  .ud-showcase .uds-phead,
  .ud-showcase .uds-mbar,
  .ud-showcase .uds-scene,
  .ud-showcase .uds-rail,
  .ud-showcase .uds-fs,
  .ud-showcase .uds-stage,
  .ud-showcase .uds-mnav,
  .ud-showcase .uds-export,
  .ud-showcase #uds-scenes{display:none!important}

  /* The live root keeps its custom properties — the flat deck reads the same
     palette — but stops painting and stops being a scroll container. */
  .ud-showcase{min-height:0;background:none;background-attachment:initial}

  .uds-print{display:block}

  .uds-print-slide{
    position:relative;
    width:338.7mm;height:190.5mm;
    break-after:page;page-break-after:always;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1.15fr 1fr;
    gap:0 12mm;
    align-items:center;
    padding:18mm 16mm;
    color:#fff;
    font-family:"Google Sans",sans-serif;
    /* Each slide carries its own step of the gradient the live deck travels
       through, so the printed set moves from navy to the brand blue just as the
       scroll does. --t is written per slide by the exporter. */
    background:
      radial-gradient(circle at -14% 26%,
        hsl(196deg 99% calc(32% + 20% * var(--t)) / calc(.34 * (.8 + .5 * var(--t)))) 6%,
        transparent 34%),
      radial-gradient(circle at 114% 86%,
        hsl(calc(208deg - 10deg * var(--t)) calc(72% + 28% * var(--t)) calc(24% + 10% * var(--t)) / calc(.46 * (.85 + .4 * var(--t)))) 10%,
        transparent 40%),
      hsl(calc(214deg - 18deg * var(--t)) calc(100% - 18% * var(--t)) calc((9 + 11 * var(--t)) * 1%));
  }
  .uds-print-slide:last-child{break-after:auto;page-break-after:auto}

  /* ---------- title slide ---------- */
  /* The Soon divider is the same block, one section further on. */
  .uds-print-slide--title,
  .uds-print-slide--soon-title{display:block;padding:24mm 22mm}
  .uds-print-eyebrow{font-size:11pt;letter-spacing:.34em;text-transform:uppercase;color:#01abea;margin-bottom:8mm}
  .uds-print-title{font-size:44pt;font-weight:800;line-height:1.05;margin:0 0 6mm}
  .uds-print-title em{font-style:normal;color:#01abea}
  .uds-print-lead{font-size:12pt;color:rgba(255,255,255,.72);max-width:170mm;margin:0 0 10mm}

  .uds-print-index{display:flex;flex-wrap:wrap;gap:6mm 10mm}
  .uds-print-ix-col{min-width:52mm}
  .uds-print-ix-head{font-size:9pt;letter-spacing:.2em;text-transform:uppercase;color:#01abea;
    border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2mm;margin-bottom:2mm}
  .uds-print-ix-sub{font-size:7.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#01abea;margin:2.5mm 0 1mm}
  .uds-print-ix-row{display:flex;justify-content:space-between;gap:6mm;font-size:9.5pt;padding:1mm 0}
  .uds-print-ix-row b{font-weight:600}
  .uds-print-ix-row span{color:rgba(255,255,255,.5)}

  /* TV index — its own slide (js/ud-showcase-tv-export.js: indexSlide()). One
     fixed column per section across the sheet: flex-wrap would drop a tall
     section like Google TV into a second row and off the bottom. --ix-cols is
     written by the exporter from the count of non-empty sections. */
  .uds-print-slide--tv-index{display:block;padding:20mm 18mm}
  .uds-print-slide--tv-index .uds-print-index{
    display:grid;grid-template-columns:repeat(var(--ix-cols,7),1fr);
    gap:4mm 6mm;margin-top:6mm;
  }
  .uds-print-slide--tv-index .uds-print-ix-col{min-width:0}
  .uds-print-slide--tv-index .uds-print-ix-head{font-size:8.5pt;margin-bottom:2mm}
  .uds-print-slide--tv-index .uds-print-ix-row{font-size:9pt;padding:.6mm 0}

  /* ---------- product slide ---------- */
  .uds-print-card{align-self:start}
  .uds-print-card--b{text-align:right}
  .uds-print-tag{font-size:8.5pt;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#01abea}
  .uds-print-rule{width:14mm;height:1px;background:#CDAA7D;margin:3mm 0 4mm}
  .uds-print-card--b .uds-print-rule{margin-left:auto}
  .uds-print-name{font-size:19pt;font-weight:700;line-height:1.15;margin:0 0 3mm}
  .uds-print-text{font-size:10pt;color:rgba(255,255,255,.72);margin:0}
  .uds-print-text p{margin:0 0 2mm}

  .uds-print-bullets{list-style:none;padding:0;margin:4mm 0 0}
  .uds-print-bullets li{position:relative;padding:1.6mm 0 1.6mm 6mm;font-size:9.5pt;
    color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.1)}
  .uds-print-bullets li:last-child{border-bottom:none}
  .uds-print-bullets li:before{content:"";position:absolute;left:0;top:3mm;width:2mm;height:2mm;
    background:#CDAA7D;border-radius:.4mm;transform:rotate(45deg)}

  .uds-print-stats{display:flex;flex-wrap:wrap;gap:3mm;margin-top:5mm;justify-content:flex-end}
  .uds-print-stat{border:1px solid rgba(255,255,255,.14);border-radius:2mm;
    background:rgba(255,255,255,.05);padding:2.5mm 3mm;min-width:22mm}
  .uds-print-stat b{display:block;font-size:15pt;font-weight:800;line-height:1}
  .uds-print-stat b span{font-size:9pt;color:#01abea}
  .uds-print-stat i{display:block;font-style:normal;font-size:8pt;color:rgba(255,255,255,.5);margin-top:1mm}

  .uds-print-mini{display:flex;gap:6mm;flex-wrap:wrap;margin-top:4mm;justify-content:flex-end}
  .uds-print-mini b{display:block;font-size:13pt;font-weight:800}
  .uds-print-mini span{font-size:8pt;color:rgba(255,255,255,.5)}

  .uds-print-tech{margin-top:5mm;padding-top:3mm;border-top:1px solid rgba(255,255,255,.12);
    font-size:8.5pt;letter-spacing:.05em;color:rgba(255,255,255,.5)}

  /* ---------- the picture in the middle ----------
     The photograph and nothing else: no plate under it, no frame around it. The
     shots are opaque JPEGs, so they carry their own ground and need none lent
     to them.

     The ratio box stays, though: it is what holds the photograph to one size
     across the deck, and the shots themselves run from 0.67 to 1.33 — left to
     their own dimensions, a portrait one would stand nearly the full height of
     the slide and a landscape one would sit a third of that. Only what was
     drawn around the picture is gone.

     No box-shadow either, and that one is not a matter of taste: printing
     rasterises a shadow without its blur, so `0 6mm 16mm rgba(0,0,0,.4)` came
     out of the PDF as a hard black rectangle half again the width of the
     picture, lying across the text in both side columns. */
  .uds-print-media{
    align-self:center;justify-self:center;
    width:100%;aspect-ratio:1.3;
    display:flex;align-items:center;justify-content:center;
  }
  .uds-print-media img{width:100%;height:100%;object-fit:contain;display:block}
  .uds-print-stub{font-size:11pt;letter-spacing:.2em;color:rgba(255,255,255,.45)}

  /* ---------- Soon ----------
     Two products side by side with a rule between them, exactly as the deck
     shows them: model, name, photograph, specification down each column. The
     gradient runs the other way here — the exporter writes --t from 1 to 0.

     Set larger than the product slides. Those carry three columns of running
     prose across the sheet; these carry two, and a slide read off a projector
     wants the type it can get. */
  .uds-print-slide--soon{
    grid-template-columns:1fr 1px 1fr;
    grid-template-rows:1fr;
    gap:0 14mm;
    align-items:stretch;
    padding:15mm 16mm;
  }
  .uds-print-slide--soon-one{grid-template-columns:minmax(0,150mm);justify-content:center}
  /* Tan, not the brand blue — a blue hairline is invisible on this background.
     Same rule the screen draws, see .uds-soon-split in css/ud-showcase.css. */
  .uds-print-soon-split{
    background:linear-gradient(180deg,
      transparent, rgba(205,170,125,.7) 10%, rgba(205,170,125,.7) 90%, transparent);
  }

  .uds-print-soon-item{display:flex;flex-direction:column;min-height:0}
  /* The picture takes what the text leaves, so two products with
     specifications of different lengths still print at the same size. */
  .uds-print-soon-media{
    flex:1 1 auto;min-height:0;margin:5mm 0 6mm;
    display:flex;align-items:center;justify-content:center;
  }
  /* No box-shadow, for the reason given at .uds-print-media above: printing
     rasterises a shadow without its blur and it lands as a black plate. */
  .uds-print-soon-media img{max-width:100%;max-height:100%;object-fit:contain;display:block}

  .uds-print-soon-name{font-size:19pt;font-weight:700;line-height:1.15;margin:2mm 0 0}
  .uds-print-soon-spec{
    flex:0 0 auto;width:100%;border-collapse:collapse;font-size:12pt;table-layout:fixed;
  }
  .uds-print-soon-spec td{
    padding:2mm 0;vertical-align:baseline;border-bottom:1px solid rgba(255,255,255,.12);
  }
  .uds-print-soon-spec tr:last-child td{border-bottom:none}
  .uds-print-soon-spec .uds-k{
    width:36%;color:rgba(255,255,255,.5);padding-right:5mm;white-space:nowrap;
  }
  .uds-print-soon-spec .uds-v{color:#fff;text-align:right;overflow-wrap:anywhere}

  /* ---------- television slide (js/ud-showcase-tv-export.js) ----------
     One model family per slide. Same three-column grid as a mount product
     slide (card, photo, card) — .uds-print-slide, .uds-print-card,
     .uds-print-tag, .uds-print-rule, .uds-print-name, .uds-print-text and
     .uds-print-bullets above are shared as-is. What is different is the
     right-hand card: a panel / OS line, a diagonals line under the name, the
     flagship diagonal's two spec sets side by side, a feature line below.

     The right card gets more width than a mount card's (1.3fr): it holds two
     spec tables, not one stats block. */
  .uds-print-slide--tv{grid-template-columns:1fr 1.35fr 1.25fr}
  /* Rounded, unlike the mount slide's photo — a deliberate difference for the
     TV deck, not a shared change to .uds-print-media img.
     transform: Fire TV › LED only — slideMedia() sets --uds-fam-hero-scale from
     the family's diagonal (see js/ud-showcase-tv-export.js) so the three
     near-identical renders print at three sizes; 1 for every other slide.
     Seated at the bottom of the centred box. */
  .uds-print-slide--tv .uds-print-media img{
    border-radius:4mm;
    transform:scale(var(--uds-fam-hero-scale,1));
    transform-origin:center bottom;
  }
  /* A bigger picture than a mount slide's: the wider middle track above, plus
     a squarer box so it fills more of the slide's height too. */
  .uds-print-slide--tv .uds-print-media{aspect-ratio:1.08}

  .uds-print-tv-head{
    font-size:8pt;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#01abea;
  }
  .uds-print-tv-diags{font-size:9pt;color:rgba(255,255,255,.62);margin:0 0 1mm}
  .uds-print-tv-new{
    font-size:6.5pt;font-weight:800;letter-spacing:.06em;color:#EA0029;margin-left:1mm;
  }

  /* Two columns: the flagship diagonal's right set, then its left set (only
     printed when it has rows). table-layout:fixed keeps a long value — VESA,
     dimensions — wrapping inside its cell instead of over the column edge. */
  .uds-print-tv-specs{display:flex;gap:0 8mm;margin-top:2mm}
  .uds-print-tv-spec-col{flex:1 1 0;min-width:0}
  .uds-print-tv-spec{width:100%;border-collapse:collapse;font-size:9pt;table-layout:fixed}
  .uds-print-tv-spec td{padding:1.3mm 0;vertical-align:baseline;border-bottom:1px solid rgba(255,255,255,.1)}
  .uds-print-tv-spec tr:last-child td{border-bottom:none}
  .uds-print-tv-spec .uds-k{width:46%;color:rgba(255,255,255,.5);padding-right:3mm}
  .uds-print-tv-spec .uds-v{color:#fff;text-align:right;overflow-wrap:anywhere}

  .uds-print-tv-feats{display:flex;flex-wrap:wrap;gap:2mm;justify-content:flex-end;margin-top:3mm}
  .uds-print-tv-feats span{
    font-size:7.5pt;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.72);
    border:.3mm solid rgba(255,255,255,.3);border-radius:6mm;padding:1.2mm 3mm;white-space:nowrap;
  }

  /* ---------- intro editorial screens (tpl-showcase-tv.php .udstv-intro) ----------
     The six sections above #uds-app. On screen they are sized in svh and
     scroll-snapped; on paper each is one slide. Pin them to the sheet, break
     after each, and drop the live viewport units. Backgrounds are the
     ::before/::after the base rules already paint from an inline --img and
     print via the global color-adjust:exact at the head of this file.
     css/ud-showcase-tv.css carries the base .udstv-in* rules and has no print
     block of its own; it loads first, so these win on source order. */
  .udstv-intro{background:#002554}
  .udstv-in{
    width:338.7mm;height:190.5mm;min-height:0;
    padding:22mm 20mm;
    break-after:page;page-break-after:always;
    overflow:hidden;scroll-snap-align:none;
  }
  .udstv-in--bottom{align-items:flex-end}
  .udstv-in--center{justify-content:center}
  .udstv-in--stack{justify-content:center;gap:10mm}
  .udstv-in--split{padding:0;align-items:stretch}
  .udstv-in--split .udstv-in-media{flex:0 0 46%}
  .udstv-in--split .udstv-in-inner{padding:22mm 18mm}
  .udstv-in-collage{max-width:220mm}
  /* The animated chevron is a screen affordance — no target to scroll to on paper. */
  .udstv-in-cue{display:none!important}

  .udstv-eyebrow{font-size:11pt;margin-bottom:5mm}
  .udstv-in-title{font-size:34pt;line-height:1.06}
  .udstv-in--cover .udstv-in-title{font-size:40pt}
  .udstv-in-lead{font-size:12pt;margin-top:6mm;max-width:150mm}
  .udstv-stats{margin-top:10mm;gap:8mm 14mm}
  .udstv-stats b{font-size:24pt}
  .udstv-points{margin-top:8mm;gap:5mm}

  /* ---------- interactive flat panels — one slide, every diagonal (ifpSlide()) ----------
     Four cards across the sheet, as the Products IFA 2026 slide draws them:
     photo, then size, then model, then a short spec list. */
  .uds-print-slide--ifp{display:block;padding:18mm 16mm}
  .uds-print-slide--ifp .uds-print-title{font-size:26pt;margin:0 0 3mm}
  .uds-print-slide--ifp .uds-print-lead{font-size:11pt;margin:0;max-width:200mm}
  .uds-print-ifp-head{margin-bottom:9mm}
  .uds-print-ifp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9mm;align-items:start}
  .uds-print-ifp-card{display:flex;flex-direction:column;gap:3mm}
  .uds-print-ifp-media{
    width:100%;aspect-ratio:1.3;
    display:flex;align-items:center;justify-content:center;
  }
  .uds-print-ifp-media img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:3mm}
  .uds-print-ifp-size{font-size:20pt;font-weight:800;line-height:1}
  .uds-print-ifp-model{font-size:8pt;letter-spacing:.12em;text-transform:uppercase;color:#01abea}
  .uds-print-ifp-spec{list-style:none;margin:1mm 0 0;padding:0;font-size:8pt}
  .uds-print-ifp-spec li{
    display:flex;justify-content:space-between;gap:3mm;
    padding:1mm 0;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .uds-print-ifp-spec li:last-child{border-bottom:none}
  .uds-print-ifp-spec .uds-k{color:rgba(255,255,255,.5)}
  .uds-print-ifp-spec .uds-v{color:#fff;text-align:right}

  /* ---------- streaming device — one slide each (ottSlide()) ----------
     Reuses the family grid (card / photo / card) and the .uds-print-card /
     -tag / -rule / -text / -bullets / -name / -tv-head / -tv-spec* rules
     above; only the middle photo needs its own size here. */
  .uds-print-slide--ott .uds-print-media{aspect-ratio:1.15}
  .uds-print-slide--ott .uds-print-media img{border-radius:4mm}

  /* soon-tv reuses .uds-print-slide--soon* / .uds-print-soon-* verbatim — no
     rules of its own. */
}