/* Entréskärm B2B IT-Partner. Byggd för 16:9 (3840x2160 eller 1920x1080).
   Allt skalas från skärmhöjden via root font-size, så layouten ser likadan ut på 4K och Full HD.
   Varumärkesfärgerna ligger samlade här, justera dem mot er grafiska profil. */

:root {
  /* Hämtat från b2bitpartner.se: mörk marinblå hero, B2B-röd */
  --bg: #07102B;          /* skärmens bakgrund, som hemsidans hero */
  --bg-glow: #0E2A6B;     /* blå ton i bakgrundens ljusfläck */
  --surface: #FFFFFF;     /* besökskortet */
  --ink: #07102B;         /* text på vitt */
  --muted: #5E6780;
  --line: #DADDE5;
  --on-bg: #FFFFFF;
  --on-bg-muted: rgba(255, 255, 255, .64);
  --on-bg-line: rgba(255, 255, 255, .16);
  --panel: #0F1C45;       /* informationsbandet */
  --on-ink: #FFFFFF;
  --on-ink-muted: rgba(255, 255, 255, .64);
  --on-ink-line: rgba(255, 255, 255, .14);
  --accent: #DA0032;      /* B2B-röd: logga, knappar, "Nu" */
  --rain: #8EC5FF;

  --radius-l: 2.4rem;
  --gap: 2.4rem;
  --pad: 3.2rem;

  font-size: 1.5vh; /* 2160px ger 32px, 1080px ger 16px */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body { background: radial-gradient(ellipse 70% 60% at 12% 105%, rgba(218, 0, 50, .22), transparent 60%), radial-gradient(ellipse 60% 70% at 30% 70%, rgba(14, 42, 107, .55), transparent 65%), var(--bg); }
body {
  font-family: Figtree, "Segoe UI", system-ui, sans-serif;
  color: var(--on-bg);
  font-variant-numeric: tabular-nums;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ol { margin: 0; }

.screen {
  height: 100vh;
  width: 100vw;
  padding: 2rem 3.4rem 2.8rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 27vh;
  gap: 2rem;
  transition: transform 2s ease;
}

/* ---------------------------------------------------------------- huvud */

.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
}
.brand { display: flex; align-items: center; height: 5.4rem; }
.brand-logo { height: 100%; width: auto; display: none; }
.brand-logo.ok { display: block; }
.brand-fallback { background: var(--accent); color: #fff; font-weight: 800; font-size: 2.4rem; line-height: 1; padding: .9rem 1.1rem; }
.brand-logo.ok + .brand-fallback { display: none; }

.title {
  font-weight: 700;
  font-size: 3.4rem;
  letter-spacing: -.02em;
  padding-left: 3rem;
  border-left: 2px solid var(--on-bg-line);
  line-height: 1.1;
}

.clock { text-align: right; }
.clock-time { font-size: 3.8rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.clock-date { font-size: 1.6rem; color: var(--on-bg-muted); font-weight: 300; margin-top: .5rem; }
.clock-date::first-letter { text-transform: uppercase; }

/* ---------------------------------------------------------------- mitten */

.middle {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--gap);
  min-height: 0;
}

/* Besöksytan är skärmens huvudsak */
.stage {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.slide, .idle {
  position: absolute;
  inset: 0;
  padding: 3.4rem 4.4rem 2.8rem;
  opacity: 0;
  transition: opacity 1s ease;
}
.slide.show, .idle.show { opacity: 1; }

.slide {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.slide-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.welcome { font-size: 2.2rem; font-weight: 300; color: var(--muted); }

.names {
  font-size: 6.4rem;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-top: .8rem;
  text-wrap: balance;
}

.company { font-size: 2.8rem; font-weight: 300; margin-top: 1rem; }
.company strong { font-weight: 700; }

.logo-wrap {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 1.6rem 0 0;
}
.logo-wrap img {
  max-height: 15rem;
  max-width: 62%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.eta { font-size: 2.2rem; color: var(--muted); font-weight: 300; }
.eta strong { display: inline-block; margin-left: .4rem; background: var(--accent); color: #fff; font-weight: 700; border-radius: 99rem; padding: .25rem 1.2rem; }

.dots { position: absolute; right: 4.4rem; bottom: 3rem; display: flex; gap: .8rem; }
.dots i {
  display: block;
  width: 3.2rem;
  height: .5rem;
  border-radius: 1rem;
  background: var(--line);
}
.dots i.on { background: var(--accent); }

.idle { display: flex; align-items: flex-end; background: linear-gradient(135deg, #fff 55%, #FBE5EA); }
.idle-line {
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
}

/* Nyheter: ingen kortram, bara lista direkt på bakgrunden */
.news {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: .6rem 0 0;
}
.news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--accent);
}
.news-head h2 { font-size: 2rem; font-weight: 700; }
.news-source { font-size: 1.4rem; color: var(--on-bg-muted); font-weight: 300; }

.news-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.news-list li {
  border-bottom: 1px solid var(--on-bg-line);
  padding: .8rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.news-list li:last-child { border-bottom: 0; }
.news-time { font-size: 1.25rem; color: var(--on-bg-muted); font-weight: 300; margin-bottom: .2rem; }
.news-title {
  font-size: 1.65rem;
  line-height: 1.24;
  padding-bottom: .1em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-empty { color: var(--on-bg-muted); font-size: 1.8rem; font-weight: 300; padding-top: 2rem; }

/* ---------------------------------------------------------------- informationsband */

.band {
  background: var(--panel);
  color: var(--on-ink);
  border: 1px solid var(--on-bg-line);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}
.band > section {
  padding: 2rem var(--pad);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.band > section + section { border-left: 1px solid var(--on-ink-line); }
.band-title { font-size: 1.6rem; font-weight: 400; color: var(--on-ink-muted); }
.band-empty { font-size: 2rem; color: var(--on-ink-muted); font-weight: 300; margin-top: auto; margin-bottom: auto; }

/* Väder */
.weather-body {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2.4rem;
  min-height: 0;
}
.wx-now { display: flex; align-items: center; gap: 1.6rem; }
.wx-now svg { width: 6rem; height: 6rem; flex: none; }
.wx-now-temp { font-size: 6.4rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.wx-now-desc { font-size: 1.45rem; line-height: 1.3; color: var(--on-ink-muted); font-weight: 300; margin-top: .4rem; max-width: 13rem; }

.wx-hours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
}
.wx-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}
.wx-hour-time { font-size: 1.5rem; color: var(--on-ink-muted); }
.wx-hour svg { width: 3.6rem; height: 3.6rem; }
.wx-hour-temp { font-size: 2.4rem; font-weight: 700; }
.wx-hour-rain { font-size: 1.3rem; color: var(--rain); white-space: nowrap; }
.wx-hour-rain.dry { color: var(--on-ink-muted); }

/* Tvärbanan */
.tram-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2rem;
  align-items: center;
  min-height: 0;
}
.dir-name {
  font-size: 1.8rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .6rem;
  border-radius: .7rem;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
}
.dep-next {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: .9rem;
}
.dep-min { font-size: 5.2rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.dep-unit { font-size: 2rem; font-weight: 300; }
.dep-now { color: var(--on-ink); background: var(--accent); border-radius: 99rem; padding: .2rem 2rem; font-size: 3.8rem; line-height: 1.2; font-weight: 700; }
.dep-clock { font-size: 1.6rem; color: var(--on-ink-muted); margin-left: auto; }
.dep-later {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--on-ink-line);
  font-size: 1.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-ink-muted);
  font-weight: 300;
}
.dep-later strong { color: var(--on-ink); font-weight: 700; }
.cancelled { color: #FF9AA8; }

.stale { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .slide, .idle, .screen { transition: none; }
}