@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');

html, body { height: 100%; }
body { margin: 0; background: #006f62; color: #003B25; font-family: Rubik, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; overflow: hidden; }

:root {
  --bs-secondary-rgb: 0, 111, 98; /* valore RGB di #006f62 */
}

/* Screen grid */
.screen { height: 100vh; width: 100vw; display: grid; grid-template-areas:
  'video side'
  'events events';
  grid-template-columns: 7fr 3fr; grid-template-rows: 3fr 1fr; gap: 16px; padding: 16px; box-sizing: border-box; }
.area { min-height: 0; min-width: 0; }
.area.video { grid-area: video; }
.area.side { grid-area: side; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.area.eventi { grid-area: events; }

/* Video */
.videoWrap { height: 100%; position: relative; background:#000; overflow: hidden; }
.videoWrap { border-radius: 12px; }
.videoWrap iframe { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); border:0; display:block; border-radius: 12px; }
.brand { position: absolute; top: 8px; left: 10px; background: rgba(0,0,0,.35); color:#fff; padding:6px 10px; border-radius:4px; font-weight:700; z-index:5; }
.logo { position: absolute; bottom: 8px; left: 10px; padding:6px 10px; z-index:5; }
.logo img { width:120px; }

/* Meteo */
.tile { background: #fff; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.meteo { padding: 10px 12px; }
.clock { font-weight: 600; font-size: clamp(14px, 1.6vw, 22px); margin-bottom: 0px; text-align: left; }
.meteo-content { display: grid; grid-template-columns: auto 1fr; align-items: center; height: 100%; column-gap: 14px; padding:0 0px; }
.temp-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.now-label { font-weight:700; letter-spacing:.04em; font-size: clamp(12px, 1.4vw, 18px); margin-bottom: 4px; }

.temp { font-weight:700; display:flex; align-items: baseline; gap: 6px; }
.temp .val { font-size: clamp(28px, 4.6vw, 80px); line-height: 1; }
.temp .unit { font-size: clamp(14px, 1.8vw, 24px); opacity:.8; }
.hours { display: grid; gap: 12px; justify-items: end; }
.hour { display:flex; align-items:center; gap:12px; font-size: clamp(14px, 1.6vw, 22px); font-weight: 600; }
.hour img { width: clamp(36px, 5.2vw, 72px); height: auto; }

/* Webcam */
.webcam { padding: 0; }
.webcam-slider, .webcam-slider .slick-list, .webcam-slider .slick-track, .webcam-slider .slick-slide { height: 100%; }
.webcam-item { position: relative; height: 100%; }
.webcam-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.webcam-item::after { content:""; position:absolute; left:0px; right:0px; bottom:0px; height:45%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 95%); border-radius: 0 0 8px 8px; pointer-events:none; z-index:1; }
.webcam-caption { position:absolute; left: 12px; right: 12px; bottom: 12px; color:#fff; z-index:2; font-weight:600; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.webcam-caption p { margin:0; font-size: clamp(12px, 1.2vw, 16px); }

/* Eventi */
.area.eventi { background: transparent; border-radius: 8px; overflow: hidden; padding: 0; }
.events-slider, .events-slider .slick-list, .events-slider .slick-track, .events-slider .slick-slide { height: 100%; }
/* Inner spacing between slides without margins on edges */
.events-slider .slick-slide { padding: 0 0px; margin:0 5px; }
.events-slider .slick-list { margin: 0 -10px; }
.event-card { position: relative; height: 100%; overflow: hidden; border-radius: 12px; }
.event-card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.event-card::after { content:""; position:absolute; left:0px; right:0px; top:0px; height:60%; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%); border-radius: 0 0 10px 10px; pointer-events:none; z-index:1; }
.event-card .caption { position: absolute; left: 0px; right: 0px; top: 0px; padding: 10px 12px; color:#fff; background: transparent; z-index:2; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.event-card .caption p, .event-card .caption h4 span { font-weight: normal; margin:0 0 0px 0; font-size: clamp(12px, 1.2vw, 16px); opacity:.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card .caption h4 { margin:0; font-size: clamp(14px, 1.5vw, 20px); font-weight:700; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }

/* Portrait layout */
@media (orientation: portrait) {
  .screen { grid-template-areas:
    'video'
    'side'
    'events'; grid-template-columns: 1fr; grid-template-rows: auto 2fr 2.5fr; gap: 10px; padding: 10px; }
  .area.side { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
  .clock { text-align: left; margin-bottom: 0px; font-size: clamp(16px, 2.4vw, 26px); }
  .temp .val { font-size: clamp(36px, 8vw, 80px); }
  .temp .unit { font-size: clamp(18px, 3vw, 30px); }
  .hour { font-size: clamp(16px, 2.4vw, 26px); font-weight: 600; }
  .hour img { width: clamp(40px, 7vw, 80px); }
  /* Enforce 16:9 visible area for the video in portrait */
  .area.video { height: auto; }
  .videoWrap { aspect-ratio: 16/9; height: auto; }
}

#stato-impianti {
  margin-top: 0px;
}

.impianto-stato {
  display: flex;
  align-items: center;
  margin: 0px 0;
  font-size: clamp(12px, 1.2vw, 16px);
}

.impianto-stato .icon {
  margin-right: 8px;
  font-size: clamp(12px, 1.2vw, 16px);
}

.impianto-stato.aperta .nome {
  color: #006f62;
  font-weight: 600;
}

.impianto-stato.chiusa .nome {
  color: red;
  font-weight: 600;
}


/* Ken Burns */
.kenburns img { animation: kenburns 12s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns {
  0%   { transform: scale(1.06) translate3d(0,0,0); }
  50%  { transform: scale(1.16) translate3d(1.5%, -1.5%, 0); }
  100% { transform: scale(1.22) translate3d(-2.5%, 2.5%, 0); }
}