html, body{ min-height: 100%; }
:root{
  --bg-image: url("assets/bg/bergamo.webp");
--bg-overlay-top: rgba(11,15,20,.30);
--bg-overlay-bottom: rgba(11,15,20,.50);

  --maxw: 1200px;
  --gap: 16px;
  --radius: 14px;

  --bg: #0b0f14;
  --card: rgba(255,255,255,.03);
  --border: rgba(255,255,255,.10);
  --text: #e7eefc;
  --muted: #9bb0d0;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(70,110,255,.18), transparent 60%),
    linear-gradient(var(--bg-overlay-top), var(--bg-overlay-bottom)),
    var(--bg-image);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  color: var(--text);
}

a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.brand{ display:flex; flex-direction: column; gap: 2px; }
.title{ margin:0; font-size: 18px; letter-spacing: .2px; }
.subtitle{ margin:0; color: var(--muted); font-size: 13px; }

.header-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Status pill */
.status{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(43,213,118,.35);
  border-radius: 999px;
  background: rgba(43,213,118,.14);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  white-space: nowrap;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2bd576;
  box-shadow: 0 0 0 5px rgba(43,213,118,.18);
}

/* NAV */
.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: all .2s ease;
}

.nav-link:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
}

.nav-link.is-active{
  color: #ffffff;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* Ad slots */
.ad-slot{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.ad-link{ display:block; }
.ad-img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* per banner è meglio non tagliare */
  background: transparent;
}

/* Nasconde slot vuoti */
.is-empty{ display:none; }

/* Top premium banner */
.ad-slot--top{
  min-height: 120px;
}

@media (min-width: 900px){
  .ad-slot--top{ min-height: 250px; }
}

/* Main grid */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: var(--gap);
}

@media (min-width: 1024px){
  .grid{
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "video side"
      "below below";
    align-items: start;
  }
  .video-card{ grid-area: video; }
  .side{ grid-area: side; }
  .below{ grid-area: below; }
}

/* Layout singola colonna */
.grid-single{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: var(--gap);
}

/* Card */
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.card-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}

.card-body{
  padding: 14px;
}

.muted{ color: var(--muted); font-size: 12px; }

/* Video */
.video-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}

.video-frame iframe,
.video-frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Sidebar ads */
.side{
  display:grid;
  gap: var(--gap);
}

.ad-slot--side{
  min-height: 250px;
}

@media (min-width: 1024px){
  /* altezza sidebar sincronizzata via JS (ads.js) */

  .sticky{
    position: sticky;
    top: 14px;
  }
}

/* Below ads */
.below{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.ad-slot--below{ min-height: 250px; }

@media (min-width: 700px){
  .below{ grid-template-columns: repeat(3, 1fr); }
}

/* METEO widget responsive */
.weather-widget{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
}

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

@media (min-width: 900px){
  .weather-grid{
    grid-template-columns: 382px 382px;
    align-items: start;
  }
}

.weather-block{ width: 100%; }

.weather-frame{
  width: 100%;
  max-width: 382px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}

.weather-frame--main{ aspect-ratio: 382 / 497; }
.weather-frame--side{ aspect-ratio: 382 / 302; }

.weather-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display:block;
}

.weather-link{
  color: var(--muted);
  font-size: 12px;
}

.weather-link:hover{
  color: var(--text);
}

/* Footer */
.footer{
  margin-top: auto;
  padding-top: 18px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-links{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-links a{
  color: var(--muted);
  font-size: 12px;
}
.footer-links a:hover{ color: var(--text); }

/* Powered by link */
.powered{
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.powered:hover{ color: var(--text); }

/* Meteo widget titles */
.weather-title{
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .2px;
}

/* Meteo banners spacing */
.below--meteo{
  margin-top: var(--gap);
}

/* Sidebar banner: altezza uguale al box video (gestita via JS su desktop) */
.match-video{ min-height: 0 !important; 
  height: auto;
}


/* Background attachment (avoid fixed on mobile for performance) */
@media (min-width: 1024px){
  body{ background-attachment: scroll, scroll, fixed; }
}

/* Social icons */
.social{
  display:flex;
  gap: 10px;
  align-items: center;
}

.social-link{
  width: 42px;
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: all .2s ease;
}

.social-link svg{
  width: 20px;
  height: 20px;
  fill: #ffffff;
  color: #ffffff;
}

.social-link:hover{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

.social-link:hover svg{
  fill: #ffffff;
  color: #ffffff;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #ffffff;
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  white-space: nowrap;
  transition: all .2s ease;
}

.btn:hover{
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

.btn--primary{
  background: rgba(70,110,255,.28);
  border-color: rgba(70,110,255,.50);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

.btn--primary:hover{
  background: rgba(70,110,255,.40);
  border-color: rgba(70,110,255,.68);
}

/* Top sponsor split (2 slot) */
.ad-top-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

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

/* Top sponsor height override */
.ad-slot--top{
  height: 170px;
  min-height: 170px;
}

@media (max-width: 899px){
  .ad-slot--top{
    height: 120px;
    min-height: 120px;
  }
}


/* Ensure short pages fill viewport */
.wrap > main{ flex: 1; }

/* Ensure sidebar slot respects JS height (full video box) */
#adSide1{ min-height: 0 !important; overflow: hidden; }
#adSide1 .ad-link{ height: 100%; }
#adSide1 .ad-img{ width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1023px){
  #adSide1{
    min-height: 600px !important;
    height: 600px;
    max-height: 600px;
  }

  #adSide1 .ad-link{
    height: 100%;
  }

  #adSide1 .ad-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}