/* Glimt layout-motor – deles af afspiller og design-editor */

.gl-canvas {
  position: absolute;
  overflow: hidden;
  container-type: size;
}

.gl-wrap {
  position: absolute;
}

.gl-el {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}

.gl-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.gl-media.gl-visible { opacity: 1; }

.gl-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.18) 0 10px, rgba(148, 163, 184, 0.08) 10px 20px);
  color: rgba(255, 255, 255, 0.85);
  font: 600 min(14cqh, 7cqw) / 1.2 system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  padding: 4%;
}

.gl-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/* ---------- Ur ---------- */

.gl-clock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gl-time { font-weight: 700; font-size: min(50cqh, 30cqw); letter-spacing: -0.02em; }
.gl-time-s { font-size: min(50cqh, 19cqw); }
.gl-nodate .gl-time { font-size: min(70cqh, 30cqw); }
.gl-nodate .gl-time-s { font-size: min(70cqh, 19cqw); }
.gl-date { font-size: min(13cqh, 7.5cqw); margin-top: 4cqh; opacity: 0.85; font-weight: 500; }
.gl-clock-analog svg { width: 92%; height: 92%; }

/* ---------- Vejr ---------- */

.gl-weather {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 4cqmin;
  line-height: 1.1;
}
.gl-w-now { display: flex; align-items: center; justify-content: center; gap: 4cqw; }
.gl-w-icon { font-size: min(62cqh, 30cqw); line-height: 1; }
.gl-w-temp { font-size: min(40cqh, 20cqw); font-weight: 700; letter-spacing: -0.03em; }
.gl-w-desc { font-size: min(12cqh, 6.5cqw); font-weight: 500; }
.gl-w-place { font-size: min(8.5cqh, 4.5cqw); opacity: 0.75; margin-top: 1cqh; }

.gl-weather-fc { justify-content: space-evenly; }
.gl-weather-fc .gl-w-icon { font-size: min(34cqh, 24cqw); }
.gl-weather-fc .gl-w-temp { font-size: min(24cqh, 15cqw); }
.gl-weather-fc .gl-w-desc { font-size: min(7.5cqh, 5.5cqw); }
.gl-weather-fc .gl-w-place { font-size: min(5.5cqh, 4cqw); }

.gl-w-fc { display: flex; justify-content: space-around; border-top: 1px solid currentColor; border-color: rgba(127, 127, 127, 0.35); padding-top: 3cqh; }
.gl-w-day { text-align: center; }
.gl-w-dname { font-size: min(6.5cqh, 4.5cqw); text-transform: capitalize; opacity: 0.8; }
.gl-w-dicon { font-size: min(13cqh, 8cqw); margin: 1cqh 0; }
.gl-w-drange { font-size: min(6cqh, 4cqw); font-weight: 600; white-space: nowrap; }

/* ---------- Rullende tekst ---------- */

.gl-ticker {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  font: 600 60cqh / 1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.gl-ticker-text { white-space: nowrap; will-change: transform; padding-right: 2em; }
.gl-w-error { text-align: center; opacity: 0.7; }