/* Design language taken from gatesheadsem.org:
   white ground, Playfair Display SC headings, Montserrat body,
   gold rule (#AD8E58), slate blue (#A5B3C8), deep navy (#112337). */
:root {
  --navy: #112337;
  --slate: #A5B3C8;
  --slate-light: #D7E5FA;
  --gold: #AD8E58;
  --sand: #C7AF94;
  --paper: #FFFFFF;
  --ground: #F5F5F5;
  --ink: #000000;
  --red: #C62828;
  --muted: #585E6A;

  --a4: 1.41421; /* 297 / 210 */
  --gap: clamp(12px, 2.2vmin, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: "Montserrat", sans-serif;
  /* cursor: none;  -- re-enable when the screens are installed in the hallway */
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

.tickers { min-width: 0; overflow: hidden; }

/* ---------- Masthead ---------- */
.masthead {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vmin, 40px);
  padding: clamp(8px, 1.4vmin, 28px) clamp(14px, 3vmin, 64px);
  background: var(--paper);
  border-bottom: clamp(3px, 0.45vmin, 8px) solid var(--gold);
}

.logo {
  height: clamp(44px, 9vmin, 180px);
  width: auto;
  display: block;
}

.titles { flex: 1; min-width: 0; }

.name {
  font-family: "Playfair Display SC", serif;
  font-weight: 700;
  font-size: clamp(22px, 5vmin, 110px);
  line-height: 1.05;
  color: var(--ink);
}

.sub {
  font-family: "Playfair Display SC", serif;
  font-size: clamp(12px, 2.4vmin, 52px);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.hebdate {
  margin-top: 0.15em;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: clamp(16px, 3.2vmin, 70px);
  line-height: 1.1;
  color: var(--navy);
  text-align: right;
}

.hebevent {
  display: inline-block;
  margin-top: 0.25em;
  padding: 0.05em 0.6em;
  border-radius: 0.3em;
  background: var(--navy);
  color: #fff;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 700;
  font-size: clamp(13px, 2.3vmin, 50px);
}
.hebevent[hidden] { display: none; }

.clock { text-align: right; white-space: nowrap; }

.time {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 5vmin, 110px);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Tabular (equal-width) digits so the clock never shifts as the numbers change. */
.time { font-feature-settings: "tnum" 1, "lnum" 1; }
.time .secs { font-size: 0.55em; color: var(--gold); }

.date {
  margin-top: 0.2em;
  font-size: clamp(11px, 1.8vmin, 40px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Board: two A4 slots + zemanim panel, sized to fit any display ---------- */
.board {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 1fr clamp(240px, 23vw, 620px);
  gap: var(--gap);
  padding: var(--gap);
  background:
    linear-gradient(180deg, rgba(165,179,200,0.18), rgba(165,179,200,0) 40%),
    var(--ground);
}

.slots {
  container-type: size;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  /* Slot height: as tall as possible while both slots still fit side by side. */
  --sh: min(100cqh, (100cqw - var(--gap)) / 2 * var(--a4));
}

.slot-row {
  display: flex;
  gap: var(--gap);
}

/* Landscape: side by side. */
.slot {
  container-type: size;
  position: relative;
  flex: none;
  aspect-ratio: 210 / 297;
  height: var(--sh);
  background: var(--paper);
  border: 1px solid #E3E6EF;
  box-shadow: 0 0.6vmin 2.4vmin rgba(17, 35, 55, 0.14);
  overflow: hidden;
}

.board.has-strip { grid-template-rows: minmax(0, 1fr) auto; }
/* Landscape: the zemanim box keeps the full height on the right; the boxes run under the notices up to it. */
.slots { grid-column: 1; grid-row: 1; }
.zmanim { grid-column: 2; grid-row: 1 / -1; }

/* Row of boxes (Savour, Stenhouse, ...) under the notices, from the left edge to the zemanim box. */
.strip {
  grid-column: 1;
  grid-row: 2;
  container-type: size;
  display: flex;
  gap: var(--gap);
  height: clamp(64px, 13vh, 300px);
}
.strip[hidden] { display: none; }

/* Portrait screens: zemanim band on top, notices stacked below. */
@media (orientation: portrait) {
  .board {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .zmanim { order: -1; }
  .board.has-strip { grid-template-rows: auto 1fr auto; }
  /* Portrait: zemanim across the top, notices, then the boxes full width at the bottom. */
  .zmanim { grid-column: 1; grid-row: 1; }
  .slots { grid-column: 1; grid-row: 2; }
  .strip { grid-column: 1; grid-row: 3; }
  .slots {
    --sw: min(100cqw, (100cqh - var(--gap)) / 2 / var(--a4));
  }
  .slot-row { flex-direction: column; }
  .slot { height: auto; width: var(--sw); }
  .strip { height: clamp(64px, 7vh, 300px); }
}

/* ---------- Brand box (e.g. Savour) ---------- */
.strip-inner {
  container-type: size;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 0.6vmin 2.4vmin rgba(17, 35, 55, 0.14);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 3.5cqh;
  padding: 0 4cqh;
  background: var(--strip-bg, var(--navy));
  color: var(--strip-fg, #fff);
  border-top: 3cqh solid var(--strip-accent, var(--gold));
}
.strip-logo { height: 58cqh; width: auto; flex: none; }
.strip-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3cqh;
}
.strip-wordmark { height: 18cqh; width: auto; align-self: flex-start; }
.strip-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: min(22cqh, 6cqw);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.strip-msg {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: min(24cqh, 5cqw);
  line-height: 1.12;
}
.strip-msg em {
  font-style: normal;
  white-space: nowrap;
  color: var(--strip-accent, var(--gold));
}
.strip-kicker {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: min(13cqh, 3.6cqw);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Stenhouse: white fascia with bold black lettering, gold oval logo, red band along the bottom (as on the shopfront). */
.strip-inner.theme-stenhouse {
  border-top: 0;
  border-bottom: 6cqh solid var(--strip-accent);
  border-left: 1px solid #E3E6EF;
  border-right: 1px solid #E3E6EF;
}
.theme-stenhouse .strip-text { flex-direction: row; align-items: center; gap: 5cqh; }
.theme-stenhouse .strip-wordmark { height: 62cqh; align-self: center; flex: none; }
.theme-stenhouse .strip-kicker { display: none; }
.theme-stenhouse .strip-msg { font-weight: 800; }

.strip-pic {
  height: 74cqh;
  width: auto;
  flex: none;
  background: var(--strip-fg, #fff);
  border-radius: 50%;
  aspect-ratio: 1;
  padding: 6cqh;
  object-fit: contain;
}

/* ---------- Zemanim panel ---------- */
.zmanim {
  container-type: inline-size;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid #E3E6EF;
  border-top: clamp(4px, 0.8vmin, 14px) solid var(--navy);
  box-shadow: 0 0.6vmin 2.4vmin rgba(17, 35, 55, 0.14);
  padding: clamp(10px, 1.6vmin, 32px) clamp(12px, 1.8vmin, 36px);
  overflow: hidden;
  font-family: "Frank Ruhl Libre", serif;
  --row: clamp(13px, 2.15vmin, 44px);
}

.z-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
  padding-bottom: 0.35em;
  border-bottom: clamp(2px, 0.35vmin, 6px) solid var(--gold);
}
.z-title { font-weight: 900; font-size: calc(var(--row) * 1.55); color: var(--navy); }
.z-day { font-weight: 700; font-size: calc(var(--row) * 1.05); color: var(--gold); }

.z-events {
  margin-top: 0.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  font-size: calc(var(--row) * 1.05);
  font-weight: 700;
  color: var(--navy);
}
.z-events span {
  background: var(--slate-light);
  border-radius: 0.3em;
  padding: 0.1em 0.5em;
}

.z-list {
  list-style: none;
  margin-top: 0.4em;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.z-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
  font-size: var(--row);
  line-height: 1.25;
  padding: 0.12em 0.35em;
  border-radius: 0.25em;
  color: #1b2533;
}
.z-row .t {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.z-row.key { font-weight: 700; color: var(--navy); }
.z-row.past { color: #A0A6B0; }
.z-row.next { background: var(--navy); color: #fff; }
.z-row.next .t { color: #fff; }

.z-special { margin-top: 0.4em; padding-top: 0.4em; border-top: 1px solid var(--slate); }
.z-special .z-row { font-weight: 700; color: var(--gold); }
.z-special .z-row.past { color: #A0A6B0; }

.z-empty { margin: auto; color: var(--slate); font-size: var(--row); text-align: center; }

/* Landscape: scale the zemanim text to the box's height, so busy days (many events) still fit. */
@media (orientation: landscape) {
  .zmanim {
    container-type: size;
    --row: min(clamp(11px, 2.15vmin, 44px), 2.9cqh);
  }
}

@media (orientation: portrait) {
  .zmanim { --row: clamp(11px, 2.2vmin, 40px); }
  .z-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-auto-columns: 1fr;
    column-gap: 1.2em;
  }
  .z-special { display: flex; flex-wrap: wrap; gap: 0 1.6em; }
}

/* ---------- Rolling banner (under the header) ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-bottom: clamp(3px, 0.45vmin, 8px) solid var(--gold);
  height: clamp(40px, 6.5vmin, 130px);
  display: flex;
  align-items: center;
}
.ticker[hidden] { display: none; }
.ticker-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll var(--ticker-duration, 30s) linear infinite;
}
.ticker-track span {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 3.4vmin, 70px);
  color: #fff;
  padding-right: 2.5em;
}
.ticker-track span::before {
  content: "◆";
  color: var(--gold);
  font-size: 0.6em;
  margin-right: 1.2em;
  vertical-align: 0.2em;
}
/* Temporary red banner for last-minute changes (bottom of the screen) */
/* Pinned to the bottom of the screen */
.ticker.urgent {
  background: var(--red);
  border-bottom: 0;
  border-top: clamp(3px, 0.45vmin, 8px) solid #8E1B1B;
}
.ticker.urgent .ticker-track span::before { color: #fff; }

/* A banner that stays still: centred text, no scrolling. */
.ticker.still { justify-content: center; }
.ticker.still .ticker-track { animation: none; }
.ticker.still .ticker-track span { font-size: inherit; padding: 0 0.8em; }
.ticker.still .ticker-track span:first-child::before { display: none; }
.ticker.still .ticker-track span::before { margin-right: 1.6em; }
.ticker.still .ticker-track { font-size: clamp(18px, 3.4vmin, 70px); }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Notice content ---------- */
.notice {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}
.notice.is-active { opacity: 1; }

.notice img,
.notice iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
  background: var(--paper);
}

/* Text notice, laid out like a printed A4 sheet. Units are relative to the slot (cqw). */
.notice.text {
  display: flex;
  flex-direction: column;
  padding: 9cqw 8cqw 7cqw;
  border-top: 2.2cqw solid var(--navy);
}

.notice.text .kicker {
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.notice.text h2 {
  margin-top: 2.5cqw;
  font-family: "Playfair Display SC", serif;
  font-weight: 700;
  font-size: 9cqw;
  line-height: 1.08;
  color: var(--navy);
}

.notice.text .rule {
  width: 18cqw;
  height: 0.8cqw;
  margin: 5cqw 0;
  background: var(--gold);
}

.notice.text .body {
  font-size: 4.6cqw;
  line-height: 1.55;
  color: #1b2533;
  white-space: pre-line;
}

.notice.text .footer {
  margin-top: auto;
  padding-top: 4cqw;
  border-top: 0.3cqw solid var(--slate);
  font-size: 3.4cqw;
  font-weight: 500;
  color: var(--muted);
}

/* Diagonal ribbon across the top-right corner of a notice (set `ribbon: "Tonight"` on the notice). */
.notice .ribbon {
  position: absolute;
  top: 7cqw;
  right: -19cqw;
  width: 68cqw;
  transform: rotate(45deg);
  background: var(--red);
  color: #fff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 5.4cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.6cqw 0;
  box-shadow: 0 0.8cqw 2cqw rgba(0, 0, 0, 0.25);
  border-top: 0.5cqw solid rgba(255, 255, 255, 0.35);
  border-bottom: 0.5cqw solid rgba(255, 255, 255, 0.35);
  z-index: 3;
}

/* Empty slot */
.notice.empty {
  display: grid;
  place-items: center;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(165,179,200,0.10) 0 2cqw, transparent 2cqw 4cqw),
    var(--paper);
}
.notice.empty img { width: 22cqw; height: auto; opacity: 0.35; margin: 0 auto 5cqw; }
.notice.empty span {
  font-family: "Playfair Display SC", serif;
  font-size: 5cqw;
  color: var(--slate);
}

/* Progress dots when a slot rotates through several notices */
.dots {
  position: absolute;
  left: 0; right: 0; bottom: 2.6cqw;
  display: flex;
  justify-content: center;
  gap: 1.6cqw;
  z-index: 2;
}
.dots i {
  width: 1.8cqw; height: 1.8cqw;
  border-radius: 50%;
  background: var(--slate);
  opacity: 0.5;
}
.dots i.on { background: var(--gold); opacity: 1; }