/* FreedomLV lower thirds. One stylesheet for the live overlay, the control panel's monitors, the gallery and
   the renderer, so every copy is the same picture.

   The stage is drawn at broadcast size (1920x1080, or 1080x1920 for a phone stream) and scaled to fit.
   Title-safe is the inner 90% (SMPTE ST 2046-1): 96px in from each side and 54px from top and bottom on 16:9.
   Nothing here uses backdrop-filter: a browser source cannot see the video behind it. */

.lt-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
  transform-origin: 0 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-kerning: normal;
}
.lt-stage[data-aspect="9x16"] { width: 1080px; height: 1920px; }

/* ---------------------------------------------------------------- themes */

.lt {
  /* FreedomLV, every week: the espresso and cream of freedomlv.church, its orange-to-cyan "belong" gradient */
  --plate: linear-gradient(180deg, rgba(31, 23, 16, .96) 0%, rgba(20, 15, 11, .96) 100%);
  --plate-edge: rgba(247, 239, 226, .10);
  --plate-shadow: 0 18px 48px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .3);
  --radius: 22px;
  --ink: #f7efe2;
  --ink-2: #d9cdb8;
  --kick: #ffb861;
  --accent: #37d6df;
  --floor: linear-gradient(90deg, #ff8a1f 0%, #ffb861 30%, #22c39a 66%, #37d6df 100%);
  --beam: rgba(255, 246, 228, .16);
  --beam-core: rgba(255, 250, 240, .26);
  --title-font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --body-font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --grain: none;
  --glow: none;
  position: absolute;
  left: 128px;
  bottom: 118px;
  display: block;
  color: var(--ink);
  font-family: var(--body-font);
  pointer-events: none;
}

.lt.theme-getup {
  /* GET UP: the series art. A dark room, a worn rust chair, cream type, and light from the upper right. */
  --plate: linear-gradient(102deg, rgba(23, 15, 9, .97) 0%, rgba(34, 22, 13, .97) 58%, rgba(52, 31, 16, .97) 100%);
  --plate-edge: rgba(255, 196, 130, .14);
  --radius: 6px;
  --ink: #f3e5c8;
  --ink-2: #d8c3a0;
  --kick: #ffb45e;
  --accent: #ff8a1f;
  --floor: linear-gradient(90deg, rgba(255, 138, 31, 0) 0%, #c9661f 18%, #ffb861 62%, #ffe3b3 100%);
  --beam: rgba(255, 196, 120, .16);
  --beam-core: rgba(255, 226, 170, .30);
  --title-font: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --glow: radial-gradient(120% 160% at 100% 0%, rgba(255, 170, 90, .20) 0%, rgba(255, 140, 50, .07) 34%, rgba(0, 0, 0, 0) 62%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- placement */

.lt-stage[data-aspect="9x16"] .lt {
  /* Phone streams and reels: above the caption and button zone, clear of the right-hand action column */
  left: 60px;
  right: 112px;
  bottom: 404px;
}

/* ---------------------------------------------------------------- the floor line */

.lt-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 5px;
  border-radius: 3px;
  background: var(--floor);
  transform-origin: 0 50%;
}
.theme-getup .lt-floor { height: 4px; bottom: -12px; }

/* ---------------------------------------------------------------- the plate */

.lt-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 26px 46px 28px 34px;
  border-radius: var(--radius);
  background: var(--plate);
  box-shadow: var(--plate-shadow), inset 0 1px 0 var(--plate-edge), inset 0 0 0 1px rgba(255, 255, 255, .03);
  overflow: hidden;
  isolation: isolate;
}
.lt-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glow);
  z-index: -1;
}
.lt-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: .16;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}

.lt-stage[data-aspect="9x16"] .lt-plate { gap: 26px; padding: 26px 34px 28px 28px; }

/* The light: Ephesians 5:14, "and Christ will shine on you". One pass, from the upper right. */
.lt-light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}
.lt-beam {
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 46%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--beam) 32%, var(--beam-core) 50%, var(--beam) 68%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* ---------------------------------------------------------------- badge (left) */

.lt-badge {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
}

.lt-mark {
  position: relative;
  height: 122px;
  aspect-ratio: 184 / 222;
}
.lt-mark > div { position: absolute; inset: 0; }
.lt-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

.lt-num {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 168px;
  line-height: .86;
  padding: 0 4px 0 2px;
  background: linear-gradient(180deg, #ffe7bd 0%, #ffb45e 58%, #d9701f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.01em;
}

.lt-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 220px;
  line-height: .5;
  height: 92px;
  margin-top: -4px;
  color: var(--kick);
  opacity: .95;
  align-self: start;
  padding-top: 112px;
}

.lt-qr {
  width: 172px;
  height: 172px;
  padding: 11px;
  border-radius: 16px;
  background: #fffaf2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}
.lt-qr svg { display: block; width: 100%; height: 100%; }
.lt-qr-wrap { display: grid; justify-items: center; gap: 10px; }
.lt-qr-label {
  font: 600 17px/1 var(--body-font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: .22em;
}

.lt-wordmark {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 150px;
  line-height: .84;
  letter-spacing: .005em;
  color: var(--ink);
  text-transform: uppercase;
  padding: 2px 6px 0 6px;
  text-shadow: 0 0 40px rgba(255, 170, 90, .18);
}

.lt-divider {
  flex: none;
  align-self: stretch;
  width: 2px;
  margin: 8px 0;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 180, 94, 0) 0%, rgba(255, 180, 94, .65) 30%, rgba(255, 180, 94, .65) 70%, rgba(255, 180, 94, 0) 100%);
}

/* ---------------------------------------------------------------- body (text) */

.lt-body {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each line is its own mask; its text rises into it. */
.lt-line { display: block; overflow: hidden; padding: 0 2px; margin: 0 -2px; }
.lt-line > .lt-in { display: block; will-change: transform; }

.lt-kicker {
  font: 600 25px/1.3 var(--body-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kick);
  white-space: nowrap;
}
.lt-kicker .lt-in { display: flex; align-items: center; gap: 14px; }

.lt-dot {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(55, 214, 223, .55);
}

.lt-chip {
  flex: none;
  font: 700 17px/1 var(--body-font);
  letter-spacing: .16em;
  padding: 7px 10px 6px 12px;
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.lt-title {
  font: 700 66px/1.1 var(--title-font);
  letter-spacing: -.012em;
  color: var(--ink);
  white-space: nowrap;
}
.lt-sub {
  font: 500 31px/1.3 var(--body-font);
  color: var(--ink-2);
  white-space: nowrap;
}
.lt-text {
  font: italic 500 40px/1.24 var(--serif);
  color: var(--ink);
  letter-spacing: -.004em;
  font-variant-ligatures: common-ligatures;
}
.lt-text .lt-line + .lt-line { margin-top: 0; }

/* GET UP titles are set in the series' own condensed capitals */
.theme-getup .lt-title {
  font-family: var(--title-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.04;
  font-size: 82px;
}

/* ---------------------------------------------------------------- per kind */

.lt--name .lt-title { font-size: 68px; }

.lt--program .lt-kicker {
  font: italic 500 36px/1.15 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
.lt--program .lt-title { font-weight: 800; font-size: 56px; text-transform: uppercase; letter-spacing: .01em; }

.lt--engage .lt-kicker { color: var(--accent); }
.lt--engage .lt-title { font-size: 60px; }
.lt-pills { display: flex; gap: 12px; margin-top: 10px; }
.lt-pill {
  position: relative;
  font: 700 21px/1 var(--body-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 18px 10px 20px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(247, 239, 226, .08);
  box-shadow: inset 0 0 0 1.5px rgba(247, 239, 226, .18);
  overflow: hidden;
  white-space: nowrap;
}
.lt-pill-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a1f 0%, #ffb861 40%, #22c39a 75%, #37d6df 100%);
  opacity: 0;
}
.lt-pill-label { position: relative; }

.lt--series .lt-plate { gap: 30px; padding: 30px 52px 30px 40px; }
.lt--series .lt-sub { font-size: 33px; color: var(--ink); font-weight: 600; }
.lt--series .lt-ref { font: italic 500 33px/1.25 var(--serif); color: var(--ink-2); white-space: nowrap; }

.lt--point .lt-plate { gap: 30px; padding: 24px 50px 26px 30px; }
.lt--point .lt-title { font-size: 84px; }
.lt--point .lt-sub { font-size: 30px; }

.lt--scripture .lt-plate { padding: 28px 50px 32px 46px; }
.lt--scripture .lt-title { font-size: 60px; letter-spacing: .02em; }
.lt--scripture .lt-body { gap: 4px; }
.lt--scripture .lt-text { margin-top: 8px; font-size: 38px; }

.lt--gem .lt-plate { gap: 30px; padding: 26px 52px 32px 32px; align-items: flex-start; }
.lt--gem .lt-text { font-size: 44px; line-height: 1.2; margin-top: 4px; }

.lt--declare .lt-title { font-size: 104px; line-height: 1; }
.lt--declare .lt-sub { font: italic 500 36px/1.25 var(--serif); color: var(--ink-2); }

.lt--info .lt-title { font-size: 50px; line-height: 1.12; }
.lt--info .lt-sub { font-weight: 600; font-size: 33px; color: var(--accent); }
.lt--info .lt-badge .lt-mark { height: 116px; }

.lt--give .lt-title { font-weight: 800; font-size: 60px; }
.lt-rows { display: flex; gap: 40px; margin-top: 8px; }
.lt-row { display: grid; gap: 6px; }
.lt-row-label { font: 600 19px/1 var(--body-font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.lt-row-value { font: 700 36px/1.08 var(--body-font); color: var(--ink); white-space: nowrap; }
.lt-row + .lt-row { padding-left: 40px; box-shadow: inset 2px 0 0 rgba(247, 239, 226, .14); }

/* ---------------------------------------------------------------- 9:16 sizes */

.lt-stage[data-aspect="9x16"] .lt-mark { height: 104px; }
.lt-stage[data-aspect="9x16"] .lt-num { font-size: 150px; }
.lt-stage[data-aspect="9x16"] .lt-quote { font-size: 180px; height: 72px; padding-top: 96px; }
.lt-stage[data-aspect="9x16"] .lt-qr { width: 150px; height: 150px; padding: 10px; }
.lt-stage[data-aspect="9x16"] .lt-wordmark { font-size: 124px; }
.lt-stage[data-aspect="9x16"] .lt-title { font-size: 56px; }
.lt-stage[data-aspect="9x16"] .theme-getup .lt-title { font-size: 72px; }
.lt-stage[data-aspect="9x16"] .lt--declare .lt-title { font-size: 92px; }
.lt-stage[data-aspect="9x16"] .lt-text { font-size: 40px; }
.lt-stage[data-aspect="9x16"] .lt-sub { font-size: 30px; }
.lt-stage[data-aspect="9x16"] .lt-kicker { font-size: 23px; }
.lt-stage[data-aspect="9x16"] .lt--program .lt-kicker { font-size: 32px; }
.lt-stage[data-aspect="9x16"] .lt-pills { flex-wrap: wrap; }
.lt-stage[data-aspect="9x16"] .lt-pill { font-size: 19px; }
.lt-stage[data-aspect="9x16"] .lt-rows { flex-direction: column; gap: 14px; }
.lt-stage[data-aspect="9x16"] .lt-row + .lt-row { padding-left: 0; box-shadow: none; }
.lt-stage[data-aspect="9x16"] .lt-row-value { font-size: 34px; }