/* ==========================================================================
   TaazTV — cards, slides and the pictures in them.

   Split out of display.css because the admin panel renders the very same
   markup: the card you edit in the panel is the card that goes on the wall,
   down to the stylesheet. Everything here is class-scoped, so it can be
   dropped into either page without touching the page's own layout.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   Cards (grid mode). --cs scales the type with the column count so a
   one-column board reads as large as it should from across the room.
   ══════════════════════════════════════════════════════════════════════ */

/* The baseline scale, so a card is never left with an undefined --cs. */
:root { --cs: 1; }

/* The column scale belongs to whatever holds the cards, not to the card —
   declaring it on `.card` would beat inheritance, and then a card rendered
   anywhere but the board's grid (the admin's editor) would silently fall
   back to 1 and come out a size too small. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  font-family: var(--font-body);
}
.cards-grid { --cs: 1; }
.cards-grid.cols-1 { --cs: 1.38; }
.cards-grid.cols-2 { --cs: 1.16; }
.cards-grid.cols-3 { --cs: 1; }
.cards-grid.cols-4 { --cs: .86; }

.card-pad { padding: calc(22px * var(--cs)) calc(26px * var(--cs)) calc(20px * var(--cs)); display: flex; flex-direction: column; gap: calc(9px * var(--cs)); }
.card-kicker {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--cs));
  font-family: var(--font-heading); font-weight: 700;
  font-size: calc(24px * var(--cs));
  line-height: 1.1;
  letter-spacing: .04em;
  color: var(--color-accent-700);
  white-space: nowrap;
  overflow: hidden;
}
.card-kicker svg { flex: none; width: calc(26px * var(--cs)); height: calc(26px * var(--cs)); }
.card-title { font-family: var(--font-heading); font-weight: 700; font-size: calc(38px * var(--cs)); line-height: 1.1; text-wrap: pretty; }
.card-body { margin: 0; font-size: calc(23px * var(--cs)); line-height: 1.42; opacity: .85; }
.card-meta { font-size: calc(20px * var(--cs)); color: var(--color-neutral-700); }
.card-figure { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--color-divider); }
.card-row {
  display: flex;
  justify-content: space-between;
  gap: calc(14px * var(--cs));
  font-size: calc(23px * var(--cs));
  line-height: 1.25;
  padding: calc(8px * var(--cs)) 0;
  border-bottom: 1px solid var(--color-divider);
}
.card-row .v { color: var(--color-neutral-700); white-space: nowrap; }

/* alert — the one filled card */
.card.is-alert { background: var(--dark-blue); color: var(--background-light); border-color: transparent; }
.card.is-alert .card-kicker { color: var(--light-blue); }
.card.is-alert .card-title { font-size: calc(40px * var(--cs)); }
.card.is-alert .card-body { color: rgba(245, 245, 245, .9); opacity: 1; font-size: calc(24px * var(--cs)); }
.card.is-alert .card-meta { color: rgba(245, 245, 245, .7); }
.card.is-alert > .corner { display: none; }

/* event */
.card-event { display: flex; gap: calc(18px * var(--cs)); align-items: flex-start; }
.card-date {
  flex: none;
  width: calc(108px * var(--cs));
  background: var(--dark-blue);
  color: var(--background-light);
  text-align: center;
  padding: calc(12px * var(--cs)) 0 calc(10px * var(--cs));
}
.card-date .d { font-family: var(--font-heading); font-weight: 700; font-size: calc(52px * var(--cs)); line-height: 1; }
.card-date .m { font-size: calc(20px * var(--cs)); opacity: .85; }

/* photo card — the picture carries it, the caption sits under */
.card.is-photo .card-pad { gap: calc(5px * var(--cs)); padding-top: calc(18px * var(--cs)); }
.card.is-photo .card-title { font-size: calc(34px * var(--cs)); }

/* ══════════════════════════════════════════════════════════════════════════
   Slides (carousel mode) — a full 16:9 canvas, so the type is much larger.
   ══════════════════════════════════════════════════════════════════════ */

.slide { position: absolute; inset: 0; font-family: var(--font-body); }
.slide-pad { position: absolute; inset: 0; padding: 52px 56px; display: flex; flex-direction: column; }
.slide-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--color-accent-700);
}
.slide-kicker svg { flex: none; }
.slide-title { font-family: var(--font-heading); font-weight: 700; font-size: 70px; line-height: 1.06; text-wrap: pretty; }
.slide-body { margin: 0; font-size: 31px; line-height: 1.42; opacity: .85; max-width: 1100px; }
.slide-meta { font-size: 25px; color: var(--color-neutral-700); }

.slide.is-alert .slide-pad { background: var(--dark-blue); color: var(--background-light); justify-content: space-between; }
.slide.is-alert .slide-kicker { color: var(--light-blue); font-size: 32px; }
.slide.is-alert .slide-title { font-size: 88px; line-height: 1.04; }
.slide.is-alert .slide-body { color: rgba(245, 245, 245, .9); opacity: 1; font-size: 34px; margin-top: 22px; }
.slide.is-alert .slide-meta { color: rgba(245, 245, 245, .7); }

.slide-split { position: absolute; inset: 0; padding: 52px 56px; display: grid; grid-template-columns: 1.12fr 1fr; gap: 48px; align-items: center; }

/* A framed picture: the wrapper draws the border and the marks, the figure
   inside clips the photograph to a strict 16:9. */
.figure-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.figure-frame > .figure { position: absolute; inset: 0; }

.slide-full { position: absolute; inset: 0; }
.slide-full > .figure { position: absolute; inset: 0; }
.slide-caption {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--dark-blue);
  color: var(--background-light);
  padding: 22px 32px 20px;
  pointer-events: none;
  max-width: 70%;
}
.slide-caption .k { font-family: var(--font-heading); font-weight: 700; font-size: 26px; letter-spacing: .04em; color: var(--light-blue); margin-bottom: 4px; }
.slide-caption .t { font-family: var(--font-heading); font-weight: 700; font-size: 46px; line-height: 1.08; }

/* Anything a full-bleed slide carries besides the caption — an inline QR,
   or the editor's button to add one — sits in the opposite corner. */
.slide-full > .slide-extras {
  position: absolute;
  left: 52px;
  bottom: 48px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.slide-date {
  flex: none;
  width: 176px;
  background: var(--dark-blue);
  color: var(--background-light);
  text-align: center;
  padding: 18px 0 14px;
}
.slide-date .d { font-family: var(--font-heading); font-weight: 700; font-size: 92px; line-height: 1; }
.slide-date .m { font-size: 27px; opacity: .85; }

.slide-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; border-top: 1px solid var(--color-divider); padding-top: 18px; }
.slide-rows > div { font-size: 26px; line-height: 1.3; }
.slide-rows .v { color: var(--color-accent-700); direction: ltr; display: inline-block; }

.slide-list-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 32px;
  line-height: 1.25;
  padding: 18px 0;
  border-top: 1px solid var(--color-divider);
}
.slide-list-rows .v { color: var(--color-neutral-700); white-space: nowrap; }

.slide-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.slide-boxes .box { padding: 22px 24px; }
.slide-boxes .box .l { font-family: var(--font-heading); font-weight: 700; font-size: 26px; letter-spacing: .04em; color: var(--color-accent-700); margin-bottom: 6px; }
.slide-boxes .box .v { font-size: 27px; line-height: 1.25; }

/* ══════════════════════════════════════════════════════════════════════════
   Pictures — always 16:9, always cover-cropped, never stretched.
   ══════════════════════════════════════════════════════════════════════ */

.figure { position: relative; overflow: hidden; background: var(--color-accent-100); }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure.is-empty {
  display: grid;
  place-items: center;
  color: var(--color-accent-700);
  font-size: 22px;
  background: repeating-linear-gradient(-45deg,
    var(--color-accent-100) 0 14px, #fff 14px 28px);
}

/* ══════════════════════════════════════════════════════════════════════════
   QR codes

   A board on a wall cannot be tapped, so a card can carry the way to its
   article in its own pixels. Sizes are in stage pixels: on a 65" screen
   1920px spans roughly 144 cm, so the large code lands near 12 cm — about
   the smallest that scans reliably from 1–2 m away.
   ══════════════════════════════════════════════════════════════════════ */

.qr {
  --qr: 112px;
  display: flex;
  align-items: center;
  gap: calc(var(--qr) * .1);
  background: #fff;
  padding: calc(var(--qr) * .07);
  border: 1px solid var(--color-divider);
}
.qr-code { width: var(--qr); height: var(--qr); flex: none; }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr-label {
  /* Tied to the code, but never so small it stops being readable across
     the room on a card in a four-column board. */
  font-size: max(19px, calc(var(--qr) * .15));
  line-height: 1.25;
  color: var(--color-text);
  max-width: calc(var(--qr) * 1.6);
  font-weight: 600;
}
.qr-error { font-size: 13px; color: #C0392B; padding: 6px; max-width: 160px; }

/* Cards scale their code with the column count, like their type. */
.card .qr { --qr: calc(76px * var(--cs)); }
.card .qr-sm { --qr: calc(58px * var(--cs)); }
.card .qr-lg { --qr: calc(100px * var(--cs)); }
.card .qr-at-inline { margin-top: calc(6px * var(--cs)); align-self: flex-start; }

/* Slides get a full 16:9 canvas, so the code can be properly large. */
.slide .qr { --qr: 140px; }
.slide .qr-sm { --qr: 105px; }
.slide .qr-lg { --qr: 185px; }
.slide .qr-at-inline { align-self: flex-start; margin-top: 8px; }

/* Placed on a picture: the code sits in a corner, on its own white ground
   so it still scans over whatever the photograph is doing underneath. */
.qr-at-tl, .qr-at-tr, .qr-at-bl, .qr-at-br {
  position: absolute;
  z-index: 4;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  border-color: transparent;
}
.qr-at-tl { top: 16px; left: 16px; }
.qr-at-tr { top: 16px; right: 16px; }
.qr-at-bl { bottom: 16px; left: 16px; }
.qr-at-br { bottom: 16px; right: 16px; }

/* The alert card is dark; its inline code keeps a white ground anyway. */
.card.is-alert .qr-label, .slide.is-alert .qr-label { color: var(--background-dark); }