/* Info zaslon GŠ Vrhnika – slog po www.gsv.si. Ležeče 1920×1080, na dotik. */
:root {
  --red: #ef403c;
  --maroon: #902520;
  --dark: #321214;
  --ink: #2a2427;
  --ink-soft: #4d4548;
  --band: #f7f8f7;
  --white: #fff;
  --radius: 24px;
  --shadow: 0 2px 6px rgba(42, 36, 39, .08);
  --shadow-lift: 0 14px 34px rgba(42, 36, 39, .18);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--white); color: var(--ink);
  font-family: Montserrat, system-ui, "Segoe UI", sans-serif;
  /* na dotik: brez označevanja, zooma in kontekstnega menija */
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
body { display: grid; grid-template-rows: 120px 1fr 96px; }

/* Glava – svetel pas z logotipom kot na gsv.si */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; background: var(--band);
  border-bottom: 1px solid rgba(42, 36, 39, .06);
}
.logo { height: 84px; width: auto; display: block; }
.clock {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
}
.clock .time { font-size: 48px; font-weight: 700; color: var(--maroon); font-variant-numeric: tabular-nums; }
.clock .date { font-size: 20px; font-weight: 500; color: var(--ink-soft); text-transform: capitalize; }

.view { padding: 40px 56px; overflow: hidden; }

/* Mreža ploščic */
.grid {
  height: 100%;
  display: grid; gap: 28px;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  grid-auto-rows: 1fr;
}
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  border: 0; border-radius: var(--radius); padding: 32px;
  background: var(--dark); box-shadow: var(--shadow);
  font: inherit; color: var(--white); text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  cursor: pointer; transition: transform .3s, box-shadow .3s;
}
.tile-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.tile-scrim { position: absolute; inset: 0; z-index: -1; }
.tone-red    .tile-scrim { background: linear-gradient(rgba(239,64,60,.02) 0%, rgba(239,64,60,.30) 50%, rgba(239,64,60,.78) 100%); }
.tone-maroon .tile-scrim { background: linear-gradient(rgba(144,37,32,.02) 0%, rgba(144,37,32,.30) 50%, rgba(144,37,32,.80) 100%); }
.tone-dark   .tile-scrim { background: linear-gradient(rgba(50,18,20,.02) 0%, rgba(50,18,20,.32) 50%, rgba(50,18,20,.82) 100%); }
.tile-title { font-size: 44px; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.tile-sub   { font-size: 22px; font-weight: 500; color: rgba(255,255,255,.94); line-height: 1.3; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.tile:active { transform: scale(.975); box-shadow: var(--shadow-lift); }
.tile:active .tile-bg { transform: scale(1.05); }

/* Podstran */
.page { height: 100%; display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.page-hero {
  position: relative; height: 100%; max-height: 760px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.page-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero .tile-scrim { z-index: 0; }
.page-text { padding-top: 8px; overflow-y: auto; max-height: 100%; }
.page-text h1 { font-size: 72px; font-weight: 800; color: var(--maroon); margin: 0 0 8px; line-height: 1.05; }
.page-text .lead { font-size: 30px; font-weight: 600; color: var(--red); margin: 0 0 32px; }
.page-text .body { font-size: 30px; line-height: 1.55; color: var(--ink); }
.page-text .body p { margin: 0 0 .8em; }

/* Noga – temno rdeča kot na gsv.si */
.bottombar {
  display: flex; align-items: center; gap: 32px;
  padding: 0 56px; background: var(--dark); color: rgba(255,255,255,.72);
}
.hint { font-size: 24px; font-weight: 500; margin-left: auto; }
.home-btn {
  border: 0; border-radius: 999px; padding: 16px 44px;
  background: var(--red); color: var(--white);
  font: inherit; font-size: 28px; font-weight: 700;
  transition: background .2s, transform .2s;
}
.home-btn:active { background: var(--maroon); transform: scale(.96); }