/* Key West Concierge Orthopedics /tv2 - widescreen clinic signage (two-column).
   Navy field (#15295b), thin orange (#DD6420) outer frame. Left = white logo panel
   (auto-width to the cropped artwork). Right = newspaper-style article.
   Optimized for 1920x1080 with a narrow-screen fallback. No frameworks. */

/* Newspaper fonts (self-hosted; Georgia fallback if absent). */
@font-face { font-family: 'Libre Baskerville'; src: url('../fonts/LibreBaskerville-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../fonts/SourceSerif4-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../fonts/SourceSerif4-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* Self-hosted Inter for the small kicker label (Helvetica/Arial fallback). */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --navy: #15295b;
  --navy-deep: #0a142e;
  --orange: #DD6420;
  --orange-lite: #f08a3e;
  --orange-deep: #c25415;
  --white: #ffffff;
  --light: #f4f7fb;
  --rule: rgba(255,255,255,0.18);     /* thin editorial rule */
  --gray: #b5b5b5;                     /* byline / deck gray */
  --font-head: 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-headline: 'Libre Baskerville', Georgia, 'Times New Roman', Times, serif;
  --font-news: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-news);
}

/* Two-column signage shell with a thin orange outer frame.
   Left column is "auto" so it shrinks to the cropped (portrait) logo, giving the
   article column the rest of the width. */
.tv-shell {
  display: grid;
  grid-template-columns: 2fr 3fr;   /* ~40/60; left matches the cropped portrait logo, right gets more */
  grid-template-rows: 1fr;
  gap: 1.4vw;
  height: 100vh; width: 100vw;
  background: var(--navy);
  border: 0.5vh solid var(--orange);
  padding: 1.4vh 1.4vw;
  position: relative;
}

/* Left: white logo panel; the cropped artwork fills it at full height. */
.graphic-panel {
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 0.35vh solid var(--navy);
  overflow: hidden; min-height: 0;
  padding: 1.4vh 1vw;
}
.graphic-panel img {
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain;             /* artwork already side-cropped; fills the panel, no distortion */
  display: block;
}

/* Right: newspaper article. */
.news-box {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2.2vh 2.4vw;
  min-height: 0; min-width: 0; overflow: hidden;
}

/* Sliding wrapper: holds the WHOLE article so it can glide as a single GPU layer.
   It fills the .news-box content area (flex column) so the body keeps growing exactly
   as before. tv2.js animates transform only (translateX), which stays smooth on weak
   TV hardware; .news-box overflow:hidden clips it as it glides off the left/right edge. */
.article-track {
  flex: 1 1 auto;
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
  transform: translateX(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Kicker row: orange category chip + a thin rule to the right edge. */
.news-kicker { display: flex; align-items: center; gap: 1.1vw; flex: 0 0 auto; margin-bottom: 1.9vh; }
.news-chip {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(13px, 1.15vw, 22px);
  padding: 0.5vh 1vw;
  background: var(--orange);
  color: var(--white); letter-spacing: 0.06em;
}
.news-chip:empty { display: none; }
.news-rule { flex: 1 1 auto; height: 1px; background: var(--rule); }

/* Headline: Libre Baskerville Bold, ~15% smaller than before, more leading.
   Hard-capped to 2 lines: tv2.js shrinks the font to fit, and max-height + overflow
   clip anything beyond 2 lines so a long headline can NEVER spill onto a 3rd line. */
.news-title {
  margin: 0 0 1vh;
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.14;                 /* breathe */
  letter-spacing: 0.005em;
  font-size: clamp(28px, 3.3vw, 60px);
  color: var(--white);
  flex: 0 0 auto;
  max-height: 2.3em;                 /* ~2 lines at line-height 1.14 */
  overflow: hidden;                  /* guarantee: never a visible 3rd line */
}

/* Byline: small, uppercase, gray, with orange separators. */
.news-byline {
  font-family: var(--font-news);
  font-size: clamp(12px, 1.0vw, 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5f8ff;                    /* same as body text (was gray) */
  flex: 0 0 auto;
  margin: 0 0 1vh;
  display: flex; flex-wrap: wrap; align-items: baseline;
}
.news-byline:empty { display: none; }
.news-byline .sep { color: var(--orange-lite); margin: 0 0.9vw; font-weight: 400; }

/* Thin editorial rules. */
.news-hr { border: 0; border-top: 1px solid var(--rule); margin: 0 0 1.2vh; flex: 0 0 auto; }
.news-hr-deck { margin: 0 0 1.6vh; }

/* Deck: gray, semibold, larger than byline. */
.news-deck {
  margin: 0 0 1vh;
  font-family: var(--font-news); font-weight: 600;
  font-size: clamp(16px, 1.5vw, 26px);
  line-height: 1.35; color: #f5f8ff;   /* same as body text (was gray) */
  flex: 0 0 auto;
}
.news-deck:empty { display: none; }

/* Body: Source Serif 4, justified + hyphenated, generous leading. Font capped;
   tv2.js grows it up to the cap to fill the box. */
.news-body {
  flex: 1 1 auto; min-height: 0;
  font-family: var(--font-news);
  font-size: 38px;                  /* LOCKED - fixed size, no auto-fit growth */
  line-height: 1.5;
  color: #f5f8ff;
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
  overflow: hidden;
  padding: 0.22em 0 0 0.18em;       /* room so the drop cap is not clipped top/left */
}
/* WSJ-style drop cap, darker orange. line-height >= glyph height so the top is not clipped. */
.news-body::first-letter {
  float: left;
  font-family: var(--font-headline);
  font-size: 3.8em;
  line-height: 0.86;
  padding: 0 0.1em 0 0.02em;
  margin-top: 0.04em;
  color: var(--orange-deep);
  font-weight: 700;
}
/* Conchs scoreboard mode (tv2.js adds .news-body--score): a left-aligned, multi-line scorecard.
   Honors the newlines in the body, drops the justification, and cancels the WSJ drop cap. */
.news-body--score {
  white-space: pre-line;            /* render the \n line breaks as separate lines */
  text-align: left;
  hyphens: none; -webkit-hyphens: none;
  font-size: 34px;
  line-height: 1.38;
}
.news-body--score::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}
.news-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding-top: 1vh; }
.progress-dots { display: flex; gap: 0.8vw; }
.progress-dots .dot {
  width: clamp(9px, 0.7vw, 16px); height: clamp(9px, 0.7vw, 16px);
  border-radius: 50%; background: rgba(255,255,255,0.28);
}
.progress-dots .dot.active { background: var(--orange); }

/* Empty-state house message. */
.empty-state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2vh 2vw; gap: 1.2vh;
  background: var(--navy);
}
.empty-state[hidden] { display: none; }
.empty-title { font-family: var(--font-headline); font-weight: 700; font-size: clamp(28px, 3.2vw, 60px); color: var(--white); }
.empty-body { font-family: var(--font-news); font-size: clamp(18px, 1.8vw, 32px); color: #dce6ff; }

/* ===================== Responsive fallback (desktop testing) ===================== */
@media (max-width: 900px) {
  .tv-shell { grid-template-columns: 1fr; grid-template-rows: 34vh 1fr; }
  .graphic-panel img { width: 100%; height: auto; max-height: 100%; }
  .news-title { font-size: clamp(24px, 6vw, 40px); }
  .news-body { font-size: clamp(16px, 4vw, 28px); }
}