/* =========================
   TOKENS (design system)
   ========================= */

:root {
  /* Theme defaults (dark) */
  --bg: #0e0e11;
  --card: #14141a;
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);

  /* Layout */
  --page-max: 1400px;
  --gap: 12px;

  /* Typography */
  --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Base text sizes */
  --fs-card: 0.85rem;   /* meteo + info */
  --fs-tl: 0.95rem;     /* timelapse content (ovládací prvky + text) */
  --fs-xs: 0.8rem;      /* meta / drobnosti */

  /* Shapes */
  --r-card: 14px;
  --r-media: 6px;
  --r-control: 10px;
  --r-video: 12px;

  /* Spacing */
  --pad-card: 10px 12px;
  --pad-media-card: 8px 8px 12px;

  /* Borders & states */
  --border-strong: rgba(127,127,127,.45);
  --img-border: rgba(127,127,127,.18);
  --img-border-light: rgba(0,0,0,.10);

  /* Brand */
  --brand-size: 0.95rem;
  --brand-weight: 600;
  --brand-track: 0.06em;

  /* Controls */
  --control-font: 0.85rem;
  --control-pad-y: 6px;
  --control-pad-x: 10px;

  /* Topbar */
  --topbar-gap: 12px;

  /* Mobile overrides (tokens) */
  --brand-size-mobile: 0.85rem;
  --brand-track-mobile: 0.05em;
  --fs-card-mobile: 0.8rem;
  --fs-tl-mobile: 0.9rem; /* mobilní timelapse (můžeš srovnat na 0.8rem) */
}

/* Light theme overrides */
html[data-theme="light"] {
  --bg: #f4f5f7;
  --card: #ffffff;
  --border: rgba(0,0,0,.12);
  --text: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.55);
  --img-border: var(--img-border-light);
}

/* Dark theme explicit (optional, keeps symmetry) */
html[data-theme="dark"] {
  --bg: #0e0e11;
  --card: #14141a;
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
}

/* =========================
   BASE
   ========================= */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

/* =========================
   COMPONENT: Controls
   (buttons, selects)
   ========================= */

select,
button {
  color: var(--text);
  font-size: var(--control-font);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}

select {
  background-color: var(--card);
  padding: var(--control-pad-y) 8px; /* select needs a bit less x-pad */
  appearance: none;
}

select option {
  background-color: var(--card);
  color: var(--text);
}

button {
  background: transparent;
  padding: var(--control-pad-y) var(--control-pad-x);
  cursor: pointer;
}

select:focus,
button:focus {
  outline: none;
  border-color: var(--border-strong);
}

/* =========================
   LAYOUT
   ========================= */

.layout {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--gap);
  display: grid;
  gap: var(--gap);
}

/* =========================
   TOPBAR (brand + theme)
   ========================= */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
}

.topbar-right {
  gap: var(--topbar-gap);
}

.topbar-left {
  gap: var(--topbar-gap);
}

.brand {
  font-size: var(--brand-size);
  font-weight: var(--brand-weight);
  letter-spacing: var(--brand-track);
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.version {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .version { display: none; }
}

/* =========================
   GRID (cameras)
   ========================= */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* =========================
   COMPONENT: Media Card
   ========================= */

.media-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  text-decoration: none;

  padding: var(--pad-media-card);
  overflow: visible;
}

.media-card img {
  display: block;
  width: 100%;
  height: auto;
  background: #000;

  border-radius: var(--r-media);
  border: 1px solid var(--img-border);
}

/* =========================
   COMPONENT: Info / Meteo cards
   ========================= */

.meteo,
.info {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  font-size: var(--fs-card);
  color: var(--muted);
}

.meteo-item,
.info-item {
  line-height: 1.4;
}

.meteo-item strong,
.info-item strong {
  color: var(--text);
  font-weight: 600;
}

.info a {
  color: var(--text);
  text-decoration: none;
}

.info a:hover {
  text-decoration: underline;
}

/* =========================
   TIME-LAPSE (details accordion)
   ========================= */

.tl-details {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.tl-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--pad-card);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text);

  font-size: var(--fs-card);
}

.tl-hint {
  color: var(--muted);
  font-size: 0.9em;
  font-weight: 400;
}

.tl-summary::-webkit-details-marker { display: none; }

.tl-summary::after {
  content: "▾";
  color: var(--muted);
}

.tl-details[open] .tl-summary::after { content: "▴"; }

.timelapse {
  padding: var(--pad-card);
  font-size: var(--fs-tl);      /* 👈 timelapse obsah */
  color: var(--muted);
}

.timelapse-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.tl-label {
  display: flex;
  gap: 6px;
  align-items: center;
}

#tl-video {
  width: 100%;
  border-radius: var(--r-video);
  background: #000;
}

.tl-meta {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* =========================
   UTIL: Zalamování titulku (–)
   ========================= */

.sep { margin: 0 4px; }
.sep-br { display: none; }

/* =========================
   IMPROVEMENTS: hover borders (consistent)
   ========================= */

@media (hover: hover) {
  .media-card:hover {
    border-color: var(--border-strong);
  }

  .meteo:hover,
  .info:hover,
  .tl-details:hover {
    border-color: var(--border-strong);
  }
}

/* =========================
   RESPONSIVE (mobile)
   ========================= */

@media (max-width: 520px) {
  .brand {
    font-size: var(--brand-size-mobile);
    letter-spacing: var(--brand-track-mobile);
  }

  .meteo,
  .info {
    font-size: var(--fs-card-mobile);
  }

  .tl-summary {
    font-size: var(--fs-card-mobile);
  }

  .timelapse {
    font-size: var(--fs-tl-mobile);
  }

  .sep { display: none; }
  .sep-br { display: block; }
}