/* ============================================================
   MYCAPRI.IT — Foglio di stile principale
   ============================================================
   FILE:        mycapri.css
   VERSIONE:    1.1 — Aprile 2026
   FONT:        Montserrat (Google Fonts — caricato via @import)
   COLORI BRAND:
     Azzurro Capri  #3398CC  → colore primario, logo, bottoni, accenti
     Navy scuro     #0A1E2E  → sidebar, footer, sfondi dark
     Bianco         #FFFFFF  → testo su scuro, sfondi light

   STRUTTURA DEL FILE:
     1.  Google Fonts import
     2.  Variabili CSS (:root)
     3.  Reset base
     4.  Sidebar navigation
     5.  Hamburger menu (mobile)
     6.  Topbar mobile
     7.  Overlay backdrop
     8.  Main content wrapper
     9.  Hero — Wallet (default) e Fullscreen (variante)
     10. Bottoni
     11. News grid (home page)
     12. Gallery strip (home page)
     13. Footer
     14. Disclaimer bar
     15. Pagina articolo — Hero, barra lingua, layout
     16. Corpo articolo e tipografia
     17. Sidebar articolo (widget)
     18. Galleria full screen
     19. Banner pubblicitari a rotazione
     20. Pagina archivio
     21. Responsive tablet (<=1024px)
     22. Responsive mobile (<=600px)
     23. Responsive small mobile (<=400px)

   COME MODIFICARE I COLORI:
     Cambia i valori delle variabili in :root (sezione 2).
     Tutto il sito si aggiorna automaticamente.

   COME CAMBIARE IL FONT:
     1. Aggiorna l'@import con il nuovo font Google Fonts.
     2. Aggiorna --font in :root.
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   Carica Montserrat in tutti i pesi usati nel sito.
   Rimuovi i pesi che non usi per ridurre il peso della pagina.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400&display=swap');


/* ============================================================
   2. VARIABILI CSS (DESIGN TOKENS)
   Modifica qui per cambiare l'intero sito.
   ============================================================ */
:root {
  /* Colori brand */
  --capri-blue:        #3398CC;  /* Azzurro logo — colore principale */
  --capri-blue-deep:   #1A72A8;  /* Azzurro scuro — hover, stati attivi */
  --capri-blue-light:  #A8E4F8;  /* Azzurro chiaro — testo su sfondi scuri */
  --capri-sky:         #E6F6FD;  /* Azzurro pallido — sfondo sezioni chiare */

  /* Colori neutri */
  --dark:              #0A1E2E;  /* Navy notte — sidebar, footer, overlay */
  --dark-mid:          #0D2840;  /* Navy medio — card placeholder */
  --text:              #0A1E2E;  /* Testo principale body */
  --text-muted:        #4A7090;  /* Testo secondario, metadati */
  --white:             #FFFFFF;

  /* Layout */
  --sidebar-w:         300px;    /* Larghezza sidebar desktop — cambia qui */

  /* Animazioni */
  --transition:        0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Font */
  --font:              'Montserrat', sans-serif;
}


/* ============================================================
   3. RESET BASE
   box-sizing: border-box = padding/border inclusi nella width.
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--text);
  overflow-x: hidden; /* Niente scroll orizzontale */
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }


/* ============================================================
   4. SIDEBAR NAVIGATION
   Fissa a sinistra su desktop. Su mobile (<=1024px) è nascosta
   e si apre con l'hamburger (classe .open aggiunta dal JS).

   STRUTTURA HTML:
   <aside id="sidebar">
     <div class="sidebar-logo">...</div>
     <nav class="sidebar-nav">
       <div class="nav-category">
         <div class="nav-category-title" onclick="toggleCat(this)">Nome ▶</div>
         <ul class="nav-items">
           <li class="nav-item"><a href="...">Voce</a></li>
         </ul>
       </div>
     </nav>
     <div class="sidebar-bottom"><!-- link utili --></div>
   </aside>

   PER AGGIUNGERE UNA CATEGORIA:
   Copia un blocco .nav-category e modifica il testo.
   ============================================================ */

#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--capri-blue);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* il container NON scrolla — scrolla solo .sidebar-nav */
  transform: translateX(0);
  transition: transform var(--transition);
}

/* Area logo — stesso azzzurro sfondo per effetto seamless */
.sidebar-logo {
  padding: 28px 24px 22px;
  background: var(--capri-blue);   /* IDENTICO al fondo sidebar — nessuna interruzione visiva */
  border-bottom: 1px solid rgba(255,255,255,0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}

/* Immagine logo — 160px, zoom leggero al hover */
.sidebar-logo-img {
  width: 160px;          /* dimensione desktop — cambia in mycapri.css :root per resize */
  height: auto;
  display: block;
  margin: 0 auto 10px;
  /* Nessun bordo — il logo è transparent su sfondo dello stesso colore */
  border: none;
  outline: none;
  box-shadow: none;
  transition: transform 0.3s ease;
}

/* Rimuovi outline su click/focus (accessibilità visiva — link logo) */
.sidebar-logo a:focus .sidebar-logo-img,
.sidebar-logo a:focus-visible .sidebar-logo-img {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Hover scala — solo su dispositivi con mouse preciso */
@media (hover: hover) and (pointer: fine) {
  .sidebar-logo-img:hover { transform: scale(1.04); }
}

/* Tagline ("L'isola in un click") */
.sidebar-logo .logo-tagline {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* Navigazione — flex:1 + min-height:0 + overflow:auto → solo il nav scrolla,
   logo e link istituzionali restano sempre visibili.
   min-height:0 è obbligatorio: senza, il flex item ignora overflow-y:auto
   e espande oltre il 100vh del container. */
.sidebar-nav {
  padding: 16px 0;
  flex: 1;
  min-height: 0;             /* CRITICO: permette overflow-y:auto in flex */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.sidebar-nav::-webkit-scrollbar       { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.nav-category { margin-bottom: 1px; }

/* Titolo categoria cliccabile (accordion) */
.nav-category-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 28px;
  font-size: 13px;       /* DIMENSIONE FONT MENU PRINCIPALE */
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  user-select: none;     /* no selezione testo al doppio click */
  border-left: 3px solid transparent;
  transition: background 0.2s, border-left-color 0.2s;
}

.nav-category-title:hover {
  background: rgba(255,255,255,0.14);
  border-left-color: rgba(255,255,255,0.7);
}

/* Stato aperto (classe .open via JS) */
.nav-category.open .nav-category-title {
  background: rgba(0,0,0,0.14);
  border-left-color: var(--white);
}

/* Freccia rotante — JS aggiunge .open al parent */
.nav-category-title .arrow { font-size: 9px; transition: transform 0.25s; opacity: 0.7; }
.nav-category.open .nav-category-title .arrow { transform: rotate(90deg); }

/* Lista voci: accordion — max-height 0 = nascosto */
.nav-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: rgba(0,0,0,0.1);
}

.nav-category.open .nav-items { max-height: 360px; }

/* Singola voce menu */
.nav-item a {
  display: block;
  padding: 9px 28px 9px 46px; /* indent per gerarchia visiva */
  font-size: 13px;             /* DIMENSIONE FONT VOCI SUB-MENU */
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  border-left: 2px solid transparent;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}

.nav-item a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
  padding-left: 52px;
  border-left-color: rgba(255,255,255,0.8);
}

/* Link in fondo alla sidebar (Chi siamo, Contatti…) */
.sidebar-bottom {
  padding: 18px 28px;
  border-top: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.sidebar-bottom a {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  margin-right: 12px;
  margin-bottom: 6px;
  transition: color 0.2s;
}

.sidebar-bottom a:hover { color: var(--white); }


/* ============================================================
   5. HAMBURGER MENU (MOBILE)
   3 linee → X al click. Visibile solo su <=1024px.
   La classe .active viene aggiunta/rimossa dal JS.
   ============================================================ */
#menu-toggle {
  display: none;         /* mostrato via media query */
  position: fixed;
  top: 0;                /* parte dal top della topbar */
  left: 0;
  height: 60px;          /* stessa altezza della topbar per allineamento perfetto */
  width: 60px;
  z-index: 1100;
  background: var(--capri-blue); /* STESSO azzurro della topbar e sidebar */
  border: none;
  cursor: pointer;
  padding: 0;            /* padding gestito dal flex centrato */
  border-radius: 0;      /* niente border-radius — flush con topbar */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* leggero bordo destro per separazione visiva */
  border-right: 1px solid rgba(255,255,255,0.15);
}

#menu-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;         /* leggermente più spesse per visibilità */
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}

/* Trasformazione in X */
#menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-toggle.active span:nth-child(2) { opacity: 0; }
#menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   6. TOPBAR MOBILE
   Barra fissa in cima — solo su <=1024px.
   ============================================================ */
.topbar {
  display: none;         /* visibile solo via media query ≤1024px */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;          /* altezza generosa per il logo */
  background: var(--capri-blue); /* STESSO colore della sidebar desktop */
  z-index: 900;
  align-items: center;
  justify-content: center;
  /* padding-left compensa l'hamburger fisso a sinistra (≈52px)
     così il logo risulta visivamente centrato nella topbar */
  padding-left: 52px;
  padding-right: 52px;
  border-bottom: 2px solid rgba(255,255,255,0.25);
}

/* Logo nella topbar mobile */
.topbar img {
  height: 52px;
  width: auto;
  display: block;
}


/* ============================================================
   7. OVERLAY BACKDROP
   Pannello scuro dietro la sidebar aperta su mobile.
   Click sull'overlay chiude la sidebar (via JS: closeSidebar()).
   ============================================================ */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 999; /* sotto sidebar (1000), sopra contenuto */
  backdrop-filter: blur(2px);
}


/* ============================================================
   8. MAIN CONTENT WRAPPER
   Spostato a destra di var(--sidebar-w) su desktop.
   Su mobile: margin-left = 0 (la sidebar si sovrappone).
   ============================================================ */
#main {
  margin-left: var(--sidebar-w);
  transition: margin-left var(--transition);
  min-height: 100vh;
}


/* ============================================================
   9. HERO — WALLET (default) e FULLSCREEN (variante CSS)

   DEFAULT (Wallet): titolo, excerpt e CTA in basso sull'immagine.
   FULLSCREEN: titolo più grande. Si attiva aggiungendo la classe
               .hero-fullscreen sull'elemento .hero-wallet.

   CAMBIARE IMMAGINE DI SFONDO:
   Modifica il style="background:url(...)" nel div .hero-bg
   direttamente nell'HTML, o usa JS: el.style.backgroundImage = ...
   ============================================================ */
.hero-wallet {
  position: relative;
  height: 100vh;       /* altezza intera viewport */
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* contenuto ancorato in basso */
}

/* Immagine di sfondo con Ken Burns effect al hover */
.hero-wallet .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);       /* leggermente zoomata */
  transition: transform 8s ease;
}

.hero-wallet:hover .hero-bg { transform: scale(1.0); } /* zoom-out al hover */

/* Gradiente scurante per leggibilità del testo */
.hero-wallet .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 30, 46, 0.92) 0%,
    rgba(10, 30, 46, 0.30) 60%,
    transparent 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 60px 70px;
  max-width: 720px;
}

/* Etichetta categoria sull'hero (es. "In primo piano") */
.hero-tag {
  display: inline-block;
  background: var(--capri-blue);
  color: var(--white);
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 5px 14px; margin-bottom: 20px;
}

/* Titolo hero — fluido tra 2rem e 3.5rem */
.hero-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900; color: var(--white);
  line-height: 1.08; letter-spacing: -1.5px; margin-bottom: 18px;
}

.hero-excerpt {
  font-size: 16px; font-weight: 300;
  color: rgba(255,255,255,0.75);
  line-height: 1.75; margin-bottom: 32px; max-width: 560px;
}

.hero-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.hero-meta .date   { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hero-meta .author { font-size: 11px; color: var(--capri-blue-light); font-weight: 600; }

/* Variante FULLSCREEN — aggiungere .hero-fullscreen all'elemento */
.hero-fullscreen .hero-content   { padding: 80px; max-width: 960px; }
.hero-fullscreen .hero-title     { font-size: clamp(2.5rem, 6vw, 5rem); }


/* ============================================================
   10. BOTTONI
   .btn-primary = bottone azzurro pieno (CTA principale).
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--capri-blue); color: var(--white);
  font-family: var(--font); font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 28px; border: none; cursor: pointer;
  transition: background 0.25s, transform 0.2s;
  text-decoration: none;
}

.btn-primary:hover { background: var(--capri-blue-deep); transform: translateY(-2px); }
.btn-primary svg { transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(4px); }


/* ============================================================
   11. NEWS GRID (HOME PAGE)
   Griglia asimmetrica a 12 colonne per le card articoli.

   CLASSI DISPONIBILI:
     .card-lg   → 5 col, h:420px  (grande)
     .card-md   → 4 col, h:420px  (media)
     .card-sm   → 3 col, h:420px  (piccola)
     .card-wide → 7 col, h:320px  (larga orizzontale)
     .card-half → 5 col, h:320px  (mezza larghezza)

   Esempio layout prima riga: card-lg + card-md + card-sm = 5+4+3 = 12 col
   ============================================================ */
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 60px 60px 32px;
}

/* Titolo sezione con lineetta azzurra a sinistra */
.section-title { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }
.section-title::before {
  content: ''; display: inline-block;
  width: 20px; height: 2px; background: var(--capri-blue);
  margin-right: 10px; vertical-align: middle;
}

.see-all { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--capri-blue); transition: color 0.2s; }
.see-all:hover { color: var(--capri-blue-deep); }

/* Griglia 12 colonne */
.news-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;   /* gap minimo effetto mosaico */
  padding: 0 60px 60px;
}

/* Card base */
.card {
  position: relative; overflow: hidden;
  background: var(--dark-mid); /* visibile durante caricamento img */
  cursor: pointer;
}

.card:hover .card-img { transform: scale(1.06); }

.card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* Gradiente scurante dal basso */
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,30,46,0.9) 0%, transparent 60%);
  transition: opacity 0.3s;
}

.card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 24px 20px; }
.card-cat  { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--capri-blue-light); margin-bottom: 8px; }
.card-title { font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.3; letter-spacing: -0.3px; }
.card-date  { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 8px; font-weight: 500; }

/* Span colonne — modifica questi valori per cambiare il layout */
.card-lg   { grid-column: span 5; height: 420px; }
.card-md   { grid-column: span 4; height: 420px; }
.card-sm   { grid-column: span 3; height: 420px; }
.card-wide { grid-column: span 7; height: 320px; }
.card-half { grid-column: span 5; height: 320px; }


/* ============================================================
   12. GALLERY STRIP (HOME PAGE)
   5 thumbnail cliccabili con hover effect. Link alla galleria FS.
   ============================================================ */
.gallery-strip { background: var(--dark); padding: 60px; }
.gallery-strip .section-header { padding: 0 0 32px; }
.gallery-strip .section-title  { color: rgba(255,255,255,0.4); }
.gallery-strip .see-all        { color: var(--capri-blue-light); }
.gallery-strip .see-all:hover  { color: var(--white); }

.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }

.gallery-thumb { position: relative; height: 220px; overflow: hidden; cursor: pointer; }

.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s;
  filter: brightness(0.82);
}

.gallery-thumb:hover img { transform: scale(1.1); filter: brightness(1); }

/* Overlay azzurro al hover */
.gallery-thumb .overlay {
  position: absolute; inset: 0;
  background: rgba(51,152,204,0);
  transition: background 0.3s;
  display: flex; align-items: center; justify-content: center;
}

.gallery-thumb:hover .overlay { background: rgba(51,152,204,0.18); }

.gallery-thumb .overlay svg {
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s, transform 0.3s; color: white;
}

.gallery-thumb:hover .overlay svg { opacity: 1; transform: scale(1); }


/* ============================================================
   13. FOOTER
   Griglia 3 colonne: brand (2fr) + 2 liste link (1fr ciascuna).
   .footer-copy occupa tutta la larghezza (grid-column: 1/-1).
   ============================================================ */
footer {
  background: var(--capri-blue); /* stesso azzurro della sidebar */
  padding: 50px 60px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-brand img { height: 60px; width: auto; margin-bottom: 16px; }
.footer-brand p   { font-size: 13px; color: #fff; line-height: 1.75; max-width: 280px; }

footer h4 { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
footer ul { list-style: none; }
footer ul li a {
  font-size: 13px;
  color: #fff;
  display: block;
  padding: 4px 0;
  transition: color 0.2s;
}
footer ul li a:hover { color: var(--capri-sky); }

.footer-copy { /* striscia copyright in fondo al footer */
  grid-column: 1 / -1;  /* larghezza intera */
  border-top: 1px solid rgba(255,255,255,0.35);
  padding-top: 24px;
  font-size: 11px; color: #fff;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}


/* ============================================================
   14. DISCLAIMER BAR (legge 62/2001)
   Sfondo quasi nero — separato dal footer visivamente.
   ============================================================ */
.disclaimer-bar {
  background: #071828; /* navy scuro — contrasto col footer azzurro */
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 16px 60px;
  text-align: center;
}

.disclaimer-bar p {
  font-size: 11px; font-weight: 400;
  color: #fff;
  line-height: 1.75; max-width: 920px; margin: 0 auto;
}

.disclaimer-bar strong { color: #fff; font-weight: 700; }
.disclaimer-link       { color: var(--capri-blue-light); transition: color 0.2s; }
.disclaimer-link:hover { color: var(--white); }


/* ============================================================
   15. PAGINA ARTICOLO — Hero, breadcrumb, barra lingua

   STRUTTURA HTML:
   <header class="article-hero">
     <img src="..." alt="..." />
     <div class="article-hero-overlay"></div>
     <div class="article-hero-caption">
       <nav class="breadcrumb">Home › Categoria › Titolo</nav>
       <span class="article-cat-tag">Categoria</span>
       <h1 class="article-hero-title">Titolo articolo</h1>
     </div>
   </header>
   ============================================================ */
.article-hero { position: relative; height: 70vh; min-height: 480px; overflow: hidden; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,30,46,0.85) 0%, rgba(10,30,46,0.2) 70%, transparent 100%); }
.article-hero-caption { position: absolute; bottom: 40px; left: 60px; right: 60px; max-width: 820px; }

.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.breadcrumb a       { color: var(--capri-blue-light); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--white); }

.article-cat-tag {
  display: inline-block;
  background: var(--capri-blue); color: var(--white);
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; padding: 5px 14px; margin-bottom: 16px;
}

.article-hero-title {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900; color: var(--white);
  line-height: 1.1; letter-spacing: -1px;
}

/* Barra lingua + metadati (sticky sotto l'hero) */
.lang-switcher-bar {
  background: var(--capri-sky);
  border-bottom: 1px solid var(--capri-blue-light);
  padding: 14px 60px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

.lang-meta { display: flex; gap: 24px; align-items: center; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.lang-meta strong { color: var(--text); }
.lang-btns { display: flex; gap: 4px; }

/* Bottone lingua (IT / EN) */
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer;
  transition: all 0.2s; background: transparent; color: var(--text-muted);
}

.lang-btn.active { background: var(--capri-blue); color: var(--white); border-color: var(--capri-blue); }
.lang-btn:not(.active):hover { border-color: var(--capri-blue); color: var(--capri-blue-deep); }
.lang-flag { font-size: 15px; }


/* ============================================================
   16. CORPO ARTICOLO E TIPOGRAFIA

   .lang-panel        = div testo in una lingua (IT o EN)
   .lang-panel.active = quello visibile (il JS commuta)
   .article-body      = wrapper per stile tipografico
   ============================================================ */

/* Layout 2 colonne: testo largo + sidebar fissa 300px */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  padding: 60px 60px 80px;
  max-width: 1200px;
}

.lang-panel        { display: none; }
.lang-panel.active { display: block; }

/* Lead (frase di apertura) — corsivo + bordo azzurro */
.article-body .lead {
  font-size: 20px; font-weight: 300; line-height: 1.65;
  color: var(--text); margin-bottom: 32px;
  font-style: italic;
  border-left: 3px solid var(--capri-blue); padding-left: 20px;
}

/* Sottotitoli di sezione */
.article-body h2 { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin: 40px 0 16px; }

/* Paragrafi */
.article-body p { font-size: 16px; font-weight: 400; line-height: 1.85; color: #1A3050; margin-bottom: 22px; }

/* Citazione */
.article-body blockquote { background: var(--capri-sky); border-left: 4px solid var(--capri-blue); padding: 24px 28px; margin: 32px 0; border-radius: 0 4px 4px 0; }
.article-body blockquote p    { font-size: 17px; font-style: italic; font-weight: 300; color: var(--dark-mid); margin: 0; }
.article-body blockquote cite { display: block; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--capri-blue-deep); font-style: normal; }

/* ── Video player articolo ─────────────────────────────────────
   Supporta sia MP4 locale sia iframe YouTube.
   Uso: <figure class="article-video-wrap">…</figure>
   Per YouTube usare .article-video-youtube come wrapper iframe.
─────────────────────────────────────────────────────────────── */
.article-video-wrap {
  margin: 32px 0 36px;
}

/* MP4 locale */
.article-video-wrap video {
  width: 100%;
  display: block;
  background: #000;
  border-radius: 4px;
}

/* YouTube iframe — aspect-ratio 16:9 responsive */
.article-video-youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}
.article-video-youtube iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

.article-video-wrap figcaption {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
  text-align: center;
}
/* ─────────────────────────────────── FINE stile video player */

/* Immagine inline */
.article-img-inline { margin: 36px 0; }
.article-img-inline img { width: 100%; border-radius: 2px; }
.article-img-inline figcaption { font-size: 11px; color: var(--text-muted); margin-top: 8px; font-style: italic; }

/* Riga tag + share buttons */
.article-footer { margin-top: 50px; padding-top: 30px; border-top: 1px solid #d0e6f0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tag articolo */
.tag { display: inline-block; padding: 5px 12px; border: 1px solid var(--capri-blue-light); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--capri-blue-deep); transition: all 0.2s; }
.tag:hover { background: var(--capri-blue); color: var(--white); border-color: var(--capri-blue); }

/* Bottoni share */
.share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn { width: 38px; height: 38px; border: 1px solid #cde4ee; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; background: transparent; color: var(--text-muted); }
.share-btn svg { stroke: var(--text-muted); fill: none; }
.share-btn svg[fill="currentColor"] { fill: currentColor; stroke: none; }
.share-btn:hover { background: var(--capri-blue); border-color: var(--capri-blue); color: #fff; }
.share-btn:hover svg { stroke: #fff; fill: none; }
.share-btn:hover svg[fill="currentColor"] { fill: #fff; stroke: none; }


/* ============================================================
   17. SIDEBAR ARTICOLO (WIDGET)
   Contiene banner, articoli correlati, newsletter.

   AGGIUNGERE UN WIDGET:
   Copia un <div class="widget">...</div> e metti dentro
   .widget-title come intestazione.
   ============================================================ */
.article-sidebar { padding-top: 4px; }
.widget          { margin-bottom: 40px; }

/* Intestazione widget con lineetta azzurra */
.widget-title {
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid #d0e6f0;
}

.widget-title::before { content: ''; display: inline-block; width: 14px; height: 2px; background: var(--capri-blue); margin-right: 8px; vertical-align: middle; }

/* Card articolo correlato */
.related-card { display: flex; gap: 12px; margin-bottom: 16px; cursor: pointer; }
.related-card img { width: 70px; height: 70px; object-fit: cover; flex-shrink: 0; }
.related-card .rc-cat  { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--capri-blue); }
.related-card h4       { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text); margin-top: 3px; }
.related-card .rc-date { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.related-card:hover h4 { color: var(--capri-blue-deep); }

/* Widget newsletter */
.newsletter-widget { background: var(--dark); padding: 24px; }
.newsletter-widget p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 16px; }
.newsletter-widget input { width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--white); font-family: var(--font); font-size: 13px; margin-bottom: 8px; outline: none; }
.newsletter-widget input::placeholder { color: rgba(255,255,255,0.3); }
.newsletter-widget button { width: 100%; padding: 11px; background: var(--capri-blue); color: var(--white); border: none; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
.newsletter-widget button:hover { background: var(--capri-blue-deep); }


/* ============================================================
   18. GALLERIA FULL SCREEN
   Il JS in gallery.html gestisce slideshow, filtri e griglia.
   Qui solo lo stile per i filtri nella sidebar galleria.
   ============================================================ */

/* Voci filtro categoria nella sidebar galleria */
.gallery-cats .gallery-cat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.6); cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s; gap: 8px;
}

.gallery-cats .gallery-cat-item:hover,
.gallery-cats .gallery-cat-item.active { color: var(--white); }

/* Badge contatore foto per categoria */
.gallery-cats .gallery-cat-item .count {
  margin-left: auto; font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,0.1); padding: 2px 8px;
  border-radius: 20px; flex-shrink: 0;
}

.gallery-cats .gallery-cat-item.active .count { background: var(--capri-blue); color: var(--white); }


/* ============================================================
   19. BANNER PUBBLICITARI A ROTAZIONE
   Il JS in banners.js costruisce il markup dinamicamente.

   COME AGGIUNGERE UN BANNER:
   1. Metti un div vuoto con .mycapri-banner-container nell'HTML.
   2. Aggiungi l'oggetto banner in banners.js.
   Il JS fa tutto il resto.

   POSIZIONI DISPONIBILI:
   .banner-inline   → dentro l'articolo (larghezza del testo)
   .banner-sidebar  → nel widget sidebar (più compatto)
   ============================================================ */

.mycapri-banner-container { width: 100%; margin: 0 0 32px; position: relative; }

/* Etichetta banner */
.banner-label { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; color: var(--capri-blue); text-align: right; margin-bottom: 4px; }

.banner-wrapper { position: relative; width: 100%; overflow: hidden; background: #f0f4f7; min-height: 90px; }

/* Singolo slide — nascosto; .active = visibile con fade */
.banner-slide        { display: none; width: 100%; }
.banner-slide.active { display: block; animation: bannerFadeIn 0.5s ease; }

@keyframes bannerFadeIn { from { opacity: 0; } to { opacity: 1; } }

.banner-slide a {
  display: block;
  width: 100%;
  line-height: 0;
}
.banner-slide img { width: 100%; height: auto; display: block; max-height: 250px; object-fit: cover; transition: opacity 0.2s; }
.banner-slide img:hover { opacity: 0.92; }

/* Puntini di navigazione (auto-generati se >1 banner) */
.banner-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.banner-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(51,152,204,0.3); border: none; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.banner-dot.active { background: var(--capri-blue); transform: scale(1.3); }
.banner-dot:hover  { background: var(--capri-blue-deep); }

/* Variante inline (dentro articolo) */
.banner-inline { margin: 36px 0; border-top: 1px solid var(--capri-sky); border-bottom: 1px solid var(--capri-sky); padding: 16px 0; }
.banner-inline .banner-label { text-align: center; }

/* Variante sidebar */
.banner-sidebar .banner-wrapper   { min-height: 60px; }
.banner-sidebar .banner-slide img { max-height: 200px; }

@media (max-width: 600px) { .banner-slide img { max-height: 180px; } }


/* ============================================================
   20. PAGINA ARCHIVIO
   Layout a 2 colonne: .archive-list (sinistra) + .archive-sidebar.
   I filtri in .archive-filters sono sticky (position: sticky).
   I dati sono generati dinamicamente dal JS in archivio.html.
   ============================================================ */

/* Intestazione — sfondo scuro con linea azzurra in cima */
.archive-header { background: var(--dark); padding: 60px 60px 50px; position: relative; overflow: hidden; }
.archive-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--capri-blue); }
.archive-header h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: var(--white); letter-spacing: -1px; margin-bottom: 8px; }
.archive-header .archive-subtitle { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 400; }

/* Barra filtri sticky */
.archive-filters {
  background: var(--capri-sky);
  border-bottom: 1px solid var(--capri-blue-light);
  padding: 20px 60px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100; /* sopra le card */
}

.filter-group  { display: flex; align-items: center; gap: 8px; }
.filter-label  { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

/* Select e input con aspetto personalizzato */
.filter-select, .filter-input {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--white);
  border: 1px solid var(--capri-blue-light);
  padding: 7px 12px; outline: none; cursor: pointer;
  transition: border-color 0.2s; -webkit-appearance: none; appearance: none;
}

.filter-select:focus, .filter-input:focus { border-color: var(--capri-blue); }

.filter-select-wrap        { position: relative; }
.filter-select-wrap::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--capri-blue); pointer-events: none; }

/* Pill filtri attivi */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 60px 16px; background: var(--capri-sky); border-bottom: 1px solid var(--capri-blue-light); }
.filter-pill  { display: inline-flex; align-items: center; gap: 6px; background: var(--capri-blue); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 12px; border: none; cursor: pointer; }
.filter-pill .pill-x { opacity: 0.7; font-style: normal; }
.filter-pill:hover .pill-x { opacity: 1; }

.archive-results-count { padding: 24px 60px 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }

/* Layout: lista (1fr) + sidebar (280px) */
.archive-layout  { display: grid; grid-template-columns: 1fr 280px; gap: 0; padding: 0 60px 60px; }
.archive-list    { padding-right: 48px; padding-top: 32px; border-right: 1px solid #dde8ed; }

/* Card archivio: thumbnail + testo */
.archive-card {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 24px; padding: 24px 0;
  border-bottom: 1px solid #eaf1f5; cursor: pointer; transition: background 0.15s;
}

.archive-card:first-child { padding-top: 0; }
.archive-card:hover { background: var(--capri-sky); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }

.archive-card-img { width: 180px; height: 120px; object-fit: cover; flex-shrink: 0; transition: opacity 0.2s; }
.archive-card:hover .archive-card-img { opacity: 0.9; }

.archive-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }

.archive-card-cat  { display: inline-block; background: var(--capri-blue); color: var(--white); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 3px 9px; }
.archive-card-date { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.archive-card-lang { font-size: 10px; color: var(--capri-blue); font-weight: 700; border: 1px solid var(--capri-blue-light); padding: 2px 6px; }

.archive-card h2 { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.3; letter-spacing: -0.3px; margin-bottom: 8px; transition: color 0.2s; }
.archive-card:hover h2 { color: var(--capri-blue-deep); }

/* Excerpt troncato 2 righe */
.archive-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.archive-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.archive-card-tag  { font-size: 10px; color: var(--capri-blue-deep); border: 1px solid var(--capri-blue-light); padding: 2px 8px; font-weight: 600; transition: all 0.15s; cursor: pointer; }
.archive-card-tag:hover { background: var(--capri-blue); color: var(--white); border-color: var(--capri-blue); }

/* Sidebar archivio */
.archive-sidebar { padding: 32px 0 32px 40px; }
.archive-sidebar .widget-title { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #dde8ed; }
.archive-sidebar .widget-title::before { content: ''; display: inline-block; width: 14px; height: 2px; background: var(--capri-blue); margin-right: 8px; vertical-align: middle; }

/* Lista categorie */
.cat-list { list-style: none; margin-bottom: 32px; }
.cat-list li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; font-weight: 500; color: var(--text); border-bottom: 1px solid #eaf1f5; transition: color 0.2s, padding-left 0.2s; }
.cat-list li a:hover, .cat-list li a.active { color: var(--capri-blue); padding-left: 6px; }
.cat-list li a .cat-count { font-size: 11px; font-weight: 700; color: var(--text-muted); background: #eaf1f5; padding: 1px 7px; border-radius: 20px; }
.cat-list li a.active .cat-count { background: var(--capri-blue); color: var(--white); }

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.tag-cloud a { font-size: 11px; font-weight: 600; color: var(--capri-blue-deep); border: 1px solid var(--capri-blue-light); padding: 4px 10px; transition: all 0.2s; }
.tag-cloud a:hover, .tag-cloud a.active { background: var(--capri-blue); color: var(--white); border-color: var(--capri-blue); }

/* Archivio per mese */
.month-list { list-style: none; margin-bottom: 32px; }
.month-list li { border-bottom: 1px solid #eaf1f5; }
.month-list li a { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; color: var(--text); transition: color 0.2s; }
.month-list li a:hover { color: var(--capri-blue); }
.month-list li a .month-count { font-size: 11px; color: var(--text-muted); }

/* Paginazione */
.archive-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 40px 0 0; }
.page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--text); background: var(--white); border: 1px solid #dde8ed; cursor: pointer; transition: all 0.2s; }
.page-btn:hover  { background: var(--capri-sky); border-color: var(--capri-blue); }
.page-btn.active { background: var(--capri-blue); color: var(--white); border-color: var(--capri-blue); }
.page-btn.dots   { border: none; cursor: default; }

.no-results { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.no-results p { font-size: 15px; }


/* ============================================================
   21. RESPONSIVE — TABLET (<=1024px)
   Sidebar fuori schermo; hamburger + topbar visibili.
   Layout a 2 colonne ridotto a 1 colonna.
   ============================================================ */
@media (max-width: 1024px) {
  /* Sidebar nascosta — .open la riporta in view */
  #sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
  #sidebar.open {
    transform: translateX(0);
    background: var(--capri-blue); /* stessa sidebar del desktop */
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  }

  #main { margin-left: 0; padding-top: 60px; } /* altezza topbar mobile */

  /* Mostra hamburger, topbar, overlay */
  #menu-toggle { display: flex; }
  .topbar      { display: flex; }
  #overlay.show { display: block; }

  /* Logo nella topbar tablet — dimensione corretta */
  .topbar img { height: 44px; }

  /* News grid: 2 colonne, tutte le card uguali */
  .news-grid { grid-template-columns: 1fr 1fr; padding: 0 20px 40px; }
  .card-lg, .card-md, .card-sm, .card-wide, .card-half { grid-column: span 1; height: 260px; }

  .section-header { padding: 40px 20px 24px; }
  .hero-content   { padding: 40px 24px 50px; }
  .hero-fullscreen .hero-content { padding: 40px 24px 50px; }

  /* Gallery strip: 3 thumbnails, nascondi 4a e 5a */
  .gallery-strip { padding: 40px 20px; }
  .gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .gallery-thumb:nth-child(n+4) { display: none; }

  footer { grid-template-columns: 1fr 1fr; padding: 40px 20px; }

  /* Articolo: colonna singola */
  .article-hero-caption { left: 20px; right: 20px; bottom: 24px; }
  .lang-switcher-bar { padding: 14px 20px; }
  .article-layout { grid-template-columns: 1fr; padding: 40px 20px 60px; gap: 40px; }

  /* Archivio: colonna singola */
  .archive-header  { padding: 40px 20px 30px; }
  .archive-filters { padding: 16px 20px; }
  .archive-results-count { padding: 20px 20px 8px; }
  .archive-layout  { grid-template-columns: 1fr; padding: 0 20px 40px; }
  .archive-list    { padding-right: 0; border-right: none; }
  .archive-sidebar { padding: 32px 0 0; border-top: 1px solid #dde8ed; }
  .filter-pills    { padding: 0 20px 12px; }
  .disclaimer-bar  { padding: 14px 20px; }
}


/* ============================================================
   22. RESPONSIVE — MOBILE (<=600px)
   ============================================================ */
@media (max-width: 600px) {
  :root { --sidebar-w: 270px; } /* sidebar mobile leggermente più larga */

  /* Logo sidebar su mobile — visibile e proporzionato */
  .sidebar-logo-img { width: 140px; }
  .sidebar-logo { padding: 24px 20px 20px; }

  .news-grid { grid-template-columns: 1fr; }
  .card-lg, .card-md, .card-sm, .card-wide, .card-half { height: 240px; }

  .gallery-thumbs { grid-template-columns: repeat(2, 1fr); }
  .gallery-thumb:nth-child(n+4) { display: block; } /* ripristina tutte */
  .gallery-thumb { height: 160px; }

  footer { grid-template-columns: 1fr; }

  .hero-content { padding: 28px 18px 44px; }
  .hero-title   { letter-spacing: -0.5px; }

  .sidebar-logo-img { width: 130px; }

  .article-hero { height: 50vh; min-height: 320px; }
  .article-body .lead { font-size: 17px; }
  .article-body p     { font-size: 15px; }
  .lang-meta { flex-direction: column; gap: 4px; align-items: flex-start; }

  .archive-card     { grid-template-columns: 1fr; }
  .archive-card-img { width: 100%; height: 180px; }

  /* Share buttons: dimensione ridotta su mobile per 6 bottoni */
  .share-btn { width: 34px; height: 34px; }
  .share-btns { gap: 6px; }

  /* Article footer: tag e share su righe separate */
  .article-footer { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   23. RESPONSIVE — SMALL MOBILE (<=400px)
   iPhone SE e dispositivi molto stretti.
   ============================================================ */
@media (max-width: 400px) {
  .lang-btn         { padding: 7px 12px; font-size: 10px; }
  .hero-tag         { font-size: 8px; letter-spacing: 1.5px; }
  .sidebar-logo-img { width: 120px; } /* dimensione minima su schermi piccoli */
  .archive-filters  { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ============================================================
   ARTICOLO A COLONNA SINGOLA
   Layout centrato per la lettura ottimale.
   max-width 740px = circa 65 caratteri per riga (leggibilità ideale).
   ============================================================ */

/* Wrapper colonna singola centrata */
.article-single-col {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 40px 60px;
}

/* Font per la lettura — più grande e spaziato del normale */
.article-single-col .article-body p {
  font-size: 18px;        /* più grande per lettura comoda */
  line-height: 1.9;       /* interlinea generosa */
  color: #1a2b35;
  margin-bottom: 26px;
  font-weight: 400;
}

.article-single-col .article-body .lead {
  font-size: 22px;
  line-height: 1.7;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  border-left: 4px solid var(--capri-blue);
  padding-left: 22px;
  margin-bottom: 36px;
}

.article-single-col .article-body h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 48px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde8ed;
}

.article-single-col .article-body blockquote {
  padding: 28px 32px;
  margin: 40px 0;
}

.article-single-col .article-body blockquote p {
  font-size: 20px;
  line-height: 1.6;
}

.article-single-col .article-img-inline {
  margin: 44px -40px; /* immagine leggermente più larga del testo */
}

.article-single-col .article-img-inline img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

/* ── Articoli correlati in griglia 3 colonne ───────────────────
   Appare sotto il testo dell'articolo, dentro .article-single-col
────────────────────────────────────────────────────────────── */
.article-related {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid #dde8ed;
}

.related-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.related-title::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--capri-blue);
  margin-right: 10px;
  vertical-align: middle;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.related-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s;
}

.related-item:hover { transform: translateY(-3px); }

.related-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.related-item-body {
  padding: 14px 0 0;
}

.related-item .rc-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--capri-blue);
  display: block;
  margin-bottom: 6px;
}

.related-item h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  transition: color 0.2s;
}

.related-item:hover h4 { color: var(--capri-blue-deep); }

.related-item .rc-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  display: block;
}


/* ============================================================
   BANNER ARTICOLO — 1024 × 400 px
   Tre posizioni: top (prima del testo), mid (a metà), bottom (finale).
   Il CSS forza le dimensioni e il corretto comportamento responsive.
   ============================================================ */

/* ── Banner nelle pagine articolo ───────────────────────────
   Tre posizioni: banner-article-top / mid / bottom
   Dimensione fissa 1024×400 px scalata al 100% della larghezza.
   ─────────────────────────────────────────────────────────── */

/* Container: larghezza piena, margini verticali */
.banner-article-top,
.banner-article-mid,
.banner-article-bottom {
  width: 100%;
  margin: 40px 0;
}

/* Wrapper: altezza proporzionale 400/1024 = 39.06% via padding-top */
.banner-article-top .banner-wrapper,
.banner-article-mid .banner-wrapper,
.banner-article-bottom .banner-wrapper {
  position: relative;
  width: 100%;
  padding-top: 39.06%;   /* rapporto 400:1024 — mantiene le proporzioni */
  height: 0;
  overflow: hidden;
  background: #e8f4fa;
  min-height: unset;
}

/* Slide: position assoluta che riempie il wrapper */
.banner-article-top .banner-slide,
.banner-article-mid .banner-slide,
.banner-article-bottom .banner-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
}

.banner-article-top .banner-slide.active,
.banner-article-mid .banner-slide.active,
.banner-article-bottom .banner-slide.active {
  display: block;
  animation: bannerFadeIn 0.5s ease;
}

/* Immagine: riempie tutto lo slide */
.banner-article-top .banner-slide img,
.banner-article-mid .banner-slide img,
.banner-article-bottom .banner-slide img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
  display: block;
}

/* Link che avvolge l'immagine */
.banner-article-top .banner-slide a,
.banner-article-mid .banner-slide a,
.banner-article-bottom .banner-slide a {
  display: block;
  position: absolute;
  inset: 0;
  line-height: 0;
}

/* ── Banner archivio — stesse proporzioni 1024×400 degli articoli ──────────
   Usa la stessa tecnica padding-top: 39.06% per garantire identiche
   proporzioni su ogni larghezza schermo, desktop e mobile.
   ─────────────────────────────────────────────────────────────────────── */
.banner-archivio {
  width: 100%;
  max-width: 780px;    /* identico alla larghezza massima della colonna articolo */
  margin: 28px auto;   /* centrato come article-single-col */
}

.banner-archivio .banner-label {
  text-align: right;
  margin-bottom: 4px;
}

/* Wrapper: altezza proporzionale 400/1024 = 39.06% — identico agli articoli */
.banner-archivio .banner-wrapper {
  position: relative;
  width: 100%;
  padding-top: 39.06%;
  height: 0;
  overflow: hidden;
  background: #e8f4fa;
}

/* Slide: posizione assoluta che riempie il wrapper */
.banner-archivio .banner-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
}

.banner-archivio .banner-slide.active {
  display: block;
  animation: bannerFadeIn 0.5s ease;
}

/* Immagine: riempie tutto lo slide — identico agli articoli */
.banner-archivio .banner-slide img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  max-height: none;
  display: block;
}

/* Link: copre lo slide — identico agli articoli */
.banner-archivio .banner-slide a {
  display: block;
  position: absolute;
  inset: 0;
  line-height: 0;
}

.banner-archivio .banner-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}


/* ============================================================
   LINK ARCHIVIO SPECIALE nel menu (in fondo alla sidebar)
   ============================================================ */
.nav-archivio {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 8px;
}

.nav-archivio-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  transition: background 0.2s;
  border-left: 3px solid rgba(255,255,255,0.5);
}

.nav-archivio-link:hover {
  background: rgba(255,255,255,0.18);
  border-left-color: var(--white);
}

/* Link attivo nel menu — evidenzia la pagina corrente */
.sidebar-nav a.current {
  color: var(--white) !important;
  font-weight: 700;
  border-left-color: var(--white) !important;
  background: rgba(0,0,0,0.15);
}


/* ============================================================
   ARCHIVIO — BARRA RICERCA
   ============================================================ */

.archive-search-bar {
  background: var(--dark);
  padding: 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Riga input + bottone Cerca */
.search-row {
  display: flex;
  gap: 0;
  align-items: stretch;
}

/* Campo di ricerca principale */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.search-icon {
  position: absolute;
  left: 16px;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  padding: 16px 50px 16px 50px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}

.search-input::placeholder { color: rgba(255,255,255,0.35); }
.search-input:focus {
  border-color: var(--capri-blue);
  background: rgba(255,255,255,0.12);
}

/* Pulsante × per cancellare la ricerca */
.search-clear {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}

.search-clear:hover { color: var(--white); }

/* Filtri affiancati alla ricerca */
.search-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.search-filters .filter-select {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: var(--white);
  padding-right: 32px;
}

.search-filters .filter-select option {
  background: var(--dark);
  color: var(--capri-blue-light);
}

.search-filters .filter-select:focus { border-color: var(--capri-blue); }
.search-filters .filter-select-wrap::after { color: rgba(255,255,255,0.6); }

/* Pulsante Cerca */
.btn-cerca {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--capri-blue);
  border: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 28px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-cerca:hover  { background: var(--capri-blue-deep); }
.btn-cerca:active { transform: scale(0.97); }

/* Pulsante reset */
.btn-reset {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.6);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-reset:hover {
  border-color: var(--capri-blue);
  color: var(--capri-blue-light);
}

/* Barra risultati */
.archive-results-bar {
  padding: 16px 60px;
  background: var(--capri-sky);
  border-bottom: 1px solid var(--capri-blue-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Label query "— ricerca: 'xxx'" */
.search-hl {
  color: var(--capri-blue-deep);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

/* Evidenziazione testo trovato nelle card */
mark {
  background: #fff3a3;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}


/* ============================================================
   ARCHIVIO — INDICI NAVIGAZIONE (Categorie / Tag / Mesi)
   Griglia 3 colonne sopra la lista articoli.
   ============================================================ */

.archive-index-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid #dde8ed;
  padding: 24px 60px;
  background: var(--white);
}

.index-col { padding-right: 32px; }
.index-col:last-child { padding-right: 0; border-right: none; }
.index-col:not(:last-child) { border-right: 1px solid #dde8ed; margin-right: 32px; }

.index-col-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--capri-blue);
}

/* Pulsanti indice categoria */
.idx-cat-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f4f7;
  padding: 7px 0;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s, padding-left 0.2s;
}

.idx-cat-btn span {
  float: right;
  font-size: 11px;
  color: var(--text-muted);
  background: #f0f4f7;
  padding: 1px 7px;
  border-radius: 20px;
}

.idx-cat-btn:hover, .idx-cat-all { color: var(--capri-blue); }
.idx-cat-all { font-weight: 700; }
.idx-cat-btn:hover { padding-left: 6px; }

/* Tag cloud indice */
.index-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.idx-tag {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--capri-blue-deep);
  border: 1px solid var(--capri-blue-light);
  background: none;
  padding: 4px 9px;
  cursor: pointer;
  transition: all 0.15s;
}

.idx-tag:hover {
  background: var(--capri-blue);
  color: var(--white);
  border-color: var(--capri-blue);
}

/* Lista mesi */
.index-month-list { display: flex; flex-direction: column; gap: 1px; }

.idx-month {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 1px solid #f0f4f7;
  padding: 7px 0;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, padding-left 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.idx-month span {
  font-size: 11px;
  color: var(--text-muted);
  background: #f0f4f7;
  padding: 1px 7px;
  border-radius: 20px;
}

.idx-month:hover { color: var(--capri-blue); padding-left: 6px; }

/* Lista articoli wrapper */
.archive-main-wrap { padding: 0 60px 60px; }

/* Autore nella card archivio */
.archive-card-author {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================
   RESPONSIVE — Aggiornamenti per colonna singola articolo
   ============================================================ */

@media (max-width: 1024px) {
  .article-single-col { padding: 36px 24px 48px; }
  .article-single-col .article-img-inline { margin: 32px 0; }
  .archive-search-bar { padding: 20px; }
  .archive-results-bar { padding: 14px 20px; }
  .archive-index-bar { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .index-col:not(:last-child) { border-right: none; margin-right: 0; border-bottom: 1px solid #dde8ed; padding-bottom: 16px; }
  .archive-banner-wrap { padding: 0 20px; }
  .archive-main-wrap { padding: 0 20px 40px; }
  .related-grid { grid-template-columns: 1fr 1fr; }

  /* Banner a tutta larghezza su tablet — breakout dal padding 24px */
  .article-single-col .banner-article-mid,
  .article-single-col .banner-article-bottom {
    margin-left: -24px;
    margin-right: -24px;
  }


}

@media (max-width: 600px) {
  .article-single-col { padding: 24px 16px 40px; }
  .article-single-col .article-body p { font-size: 16px; }
  .article-single-col .article-body .lead { font-size: 18px; }
  .related-grid { grid-template-columns: 1fr; }
  .related-item img { height: 200px; }
  .search-row { flex-direction: column; }
  .btn-cerca  { padding: 14px 20px; justify-content: center; }
  .archive-search-bar .search-filters { flex-direction: column; align-items: stretch; }
  .search-filters .filter-select-wrap { width: 100%; }
  .search-filters .filter-select { width: 100%; }
  .banner-article-top .banner-wrapper,
  .banner-article-mid .banner-wrapper,
  .banner-article-bottom .banner-wrapper,
  .banner-archivio .banner-wrapper { padding-top: 50%; }

  /* Banner a tutta larghezza su mobile — breakout dal padding 16px */
  .article-single-col .banner-article-mid,
  .article-single-col .banner-article-bottom {
    margin-left: -16px;
    margin-right: -16px;
  }

  /* Banner archivio: full-width su mobile — breakout dal padding 20px
     di archive-main-wrap, max-width rimosso per allinearsi agli articoli */
  .banner-archivio {
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }
}


/* ============================================================
   NAV-DIRECT — Sezioni senza sottocategorie (es. MyCapri Gallery)
   Link diretto nella sidebar, stesso stile dei titoli categoria.
   ============================================================ */
.nav-direct { border-top: 1px solid rgba(255,255,255,0.12); }

.nav-direct-link {
  display: flex;
  align-items: center;
  padding: 13px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-left-color 0.2s;
}

.nav-direct-link:hover {
  background: rgba(255,255,255,0.14);
  border-left-color: rgba(255,255,255,0.7);
  color: var(--white);
}