/* InFesta - Blog: lista, articolo, card evento, slider.
   Usato da public/blog.php e dall'anteprima di cron/weekly_blog.php (--dry-run). */

:root{
  --b-navy:#1B263B; --b-navy-2:#24324d; --b-ink:#1d2433; --b-muted:#667085;
  --b-line:#e6e8ec; --b-bg:#f6f6f6; --b-card:#fff; --b-sun:#FFD166; --b-sun-soft:#FFF4D1;
  --b-radius:18px; --b-shadow:0 1px 2px rgba(16,25,40,.06),0 8px 24px rgba(16,25,40,.08);
  --b-display:'DM Sans','Inter',system-ui,sans-serif;
}
.blog-shell{font-family:'Inter',system-ui,sans-serif;line-height:1.65}
.blog-wrap{width:min(1100px,92%);margin:0 auto}

/* barra di lettura */
.read-progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--b-sun);z-index:80;transition:width .08s linear}

/* ---------- LISTA ---------- */
.blog-head{padding:2.4rem 0 1.4rem}
.blog-head h1{font-family:var(--b-display);font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:0 0 .5rem;color:var(--b-navy)}
.blog-head p{margin:0;color:var(--b-muted);max-width:56ch;font-size:1.05rem}

.blog-feature{display:grid;grid-template-columns:1.35fr 1fr;background:var(--b-card);border-radius:24px;overflow:hidden;box-shadow:var(--b-shadow);text-decoration:none;color:inherit;margin-bottom:1.6rem}
.blog-feature-media{position:relative;min-height:320px;background:linear-gradient(135deg,var(--b-navy),#3a4f7a)}
.blog-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-feature-body{padding:clamp(1.3rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center;gap:.8rem}
.blog-feature-body h2{font-family:var(--b-display);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;margin:0;color:var(--b-navy)}
.blog-feature-body p{margin:0;color:var(--b-muted)}
.pill{display:inline-block;align-self:flex-start;background:var(--b-sun);color:var(--b-navy);font-weight:700;font-size:.78rem;padding:.25rem .7rem;border-radius:999px}
.post-date{color:var(--b-muted);font-size:.88rem}
.read-more{font-weight:700;color:var(--b-navy);display:inline-flex;align-items:center;gap:.35rem}
.blog-feature:hover .read-more,.blog-card:hover .read-more{text-decoration:underline}

.blog-list{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));padding-bottom:1rem}
.blog-card{display:flex;flex-direction:column;background:var(--b-card);border-radius:20px;overflow:hidden;box-shadow:var(--b-shadow);text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,25,40,.06),0 16px 34px rgba(16,25,40,.14)}
.blog-card-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--b-navy),#3a4f7a);overflow:hidden}
.blog-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.blog-card-title{font-family:var(--b-display);font-size:1.18rem;line-height:1.25;margin:0;color:var(--b-navy)}
.blog-card-body p{margin:0;color:var(--b-muted);font-size:.95rem}
.blog-card .read-more{margin-top:auto;padding-top:.4rem}
.empty-state{background:var(--b-card);border:1px dashed var(--b-line);border-radius:16px;padding:1.4rem;color:var(--b-muted)}

/* ---------- ARTICOLO: HERO ---------- */
.post-hero{position:relative;margin:1.2rem 0 0;border-radius:26px;overflow:hidden;min-height:clamp(300px,44vw,470px);display:flex;align-items:flex-end;color:#fff;
  background:radial-gradient(900px 400px at 85% -10%,rgba(255,209,102,.35),transparent 60%),linear-gradient(135deg,#16213a,#2c4373)}
.post-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.post-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,30,.15) 0%,rgba(10,16,30,.25) 35%,rgba(10,16,30,.86) 100%)}
.post-hero-inner{position:relative;width:100%;padding:clamp(1.2rem,3.5vw,2.6rem);padding-bottom:clamp(1.6rem,4vw,2.8rem)}
.crumb{display:inline-flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.85);font-size:.88rem;font-weight:600;margin-bottom:.9rem;background:rgba(255,255,255,.14);padding:.3rem .85rem;border-radius:999px;backdrop-filter:blur(6px)}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{opacity:.6}
.post-hero h1{font-family:var(--b-display);font-size:clamp(1.7rem,4.6vw,3.2rem);line-height:1.1;margin:0 0 .9rem;max-width:22ch;letter-spacing:-.01em;text-wrap:balance}
.post-meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.9rem;color:rgba(255,255,255,.88)}
.post-meta span+span::before,.post-meta time+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--b-sun);margin-right:.9rem;vertical-align:middle}
.post-credit{position:absolute;right:.9rem;top:.8rem;margin:0;font-size:.72rem;color:rgba(255,255,255,.85);background:rgba(10,16,30,.45);padding:.2rem .6rem;border-radius:999px;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-credit a{color:#fff}

/* ---------- ARTICOLO: CORPO ---------- */
.post-body{margin:2rem auto 0;color:var(--b-ink);font-size:1.07rem}
.post-body>*{max-width:740px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.post-body>.ev-slider,.post-body>.stats{max-width:1100px}
.post-body p{margin:0 auto 1.1rem}
.post-body .lead{font-size:1.28rem;line-height:1.55;color:var(--b-navy);font-weight:500}
.post-body h2{font-family:var(--b-display);font-size:clamp(1.45rem,3vw,1.95rem);line-height:1.2;color:var(--b-navy);margin:2.6rem auto 1rem;display:flex;align-items:center;gap:.7rem}
.post-body h2::before{content:"";flex:0 0 auto;width:.45rem;height:1.5em;border-radius:99px;background:var(--b-sun)}
.post-body h3{font-family:var(--b-display);font-size:1.15rem;line-height:1.3;margin:0}
.post-body a{color:var(--b-navy);text-decoration-color:var(--b-sun);text-decoration-thickness:2px;text-underline-offset:3px}
.post-body a:hover{background:var(--b-sun-soft)}
.post-body ul,.post-body ol{padding-left:1.3rem;margin-bottom:1.2rem}
.post-body li{margin:.35rem 0}
.post-body img{max-width:100%;height:auto;border-radius:14px}

/* numeri chiave */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:1.6rem auto 2rem;background:var(--b-navy);color:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--b-shadow)}
.stats>div{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.15rem;border-left:1px solid rgba(255,255,255,.12)}
.stats>div:first-child{border-left:0}
.stats b{font-family:var(--b-display);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1;color:var(--b-sun)}
.stats span{font-size:.85rem;color:rgba(255,255,255,.8)}

/* slider */
.ev-slider{position:relative;margin:1rem auto 1.6rem}
/* le schede partono allineate al testo e scorrendo escono nel margine sinistro */
.ev-track{--pad:max(.2rem,calc((100% - 740px)/2));padding-left:var(--pad);padding-right:var(--pad);scroll-padding-left:var(--pad);
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-top:.3rem;padding-bottom:1.2rem;scrollbar-width:thin;scrollbar-color:#c5cad3 transparent;-webkit-overflow-scrolling:touch}
.ev-track::-webkit-scrollbar{height:6px}
.ev-track::-webkit-scrollbar-thumb{background:#c5cad3;border-radius:99px}
.ev-track>.ev-card{flex:0 0 min(310px,78vw);scroll-snap-align:start}
.ev-nav{position:absolute;top:36%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--b-navy);box-shadow:0 4px 16px rgba(16,25,40,.28);cursor:pointer;font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .15s}
.ev-nav:hover{transform:translateY(-50%) scale(1.07)}
.ev-nav[disabled]{opacity:0;pointer-events:none}
.ev-prev{left:-14px}.ev-next{right:-14px}
@media (hover:none),(max-width:700px){.ev-nav{display:none}}

.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1rem auto 1.6rem}

/* card evento */
.ev-card{display:flex;flex-direction:column;background:var(--b-card);border-radius:18px;overflow:hidden;box-shadow:var(--b-shadow);border:1px solid var(--b-line);transition:transform .2s ease,box-shadow .2s ease}
.ev-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,25,40,.06),0 14px 30px rgba(16,25,40,.14)}
.ev-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#243556,#4b6ba3)}
.post-body .ev-media,.post-body .ev-media:hover{background-color:transparent}
.ev-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .5s ease}
.ev-card:hover .ev-media img{transform:scale(1.05)}
.ev-media.noimg{background:linear-gradient(135deg,#243556,#4b6ba3)}
.ev-media.noimg::after{content:"🎉";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.6rem;opacity:.9}
.ev-card[data-cat="food"] .ev-media.noimg{background:linear-gradient(135deg,#a45a14,#e9a23b)}.ev-card[data-cat="food"] .ev-media.noimg::after{content:"🍷"}
.ev-card[data-cat="music"] .ev-media.noimg{background:linear-gradient(135deg,#4a2a86,#8a63d2)}.ev-card[data-cat="music"] .ev-media.noimg::after{content:"🎶"}
.ev-card[data-cat="sport"] .ev-media.noimg{background:linear-gradient(135deg,#17653f,#43b37a)}.ev-card[data-cat="sport"] .ev-media.noimg::after{content:"🏃"}
.ev-card[data-cat="culture"] .ev-media.noimg{background:linear-gradient(135deg,#0f5964,#3aa7b5)}.ev-card[data-cat="culture"] .ev-media.noimg::after{content:"🎭"}
.ev-date{position:absolute;left:.7rem;top:.7rem;z-index:2;background:#fff;color:var(--b-navy);border-radius:12px;padding:.3rem .65rem .35rem;text-align:center;line-height:1.05;box-shadow:0 4px 12px rgba(16,25,40,.25)}
.ev-date b{display:block;font-family:var(--b-display);font-size:1.35rem}
.ev-date small{font-size:.72rem;font-weight:700;color:var(--b-muted)}
.ev-body{display:flex;flex-direction:column;gap:.35rem;padding:.95rem 1.05rem 1.1rem;flex:1}
.ev-cat{align-self:flex-start;font-size:.72rem;font-weight:700;padding:.15rem .6rem;border-radius:999px;background:#eef1f6;color:var(--b-navy)}
.ev-card[data-cat="food"] .ev-cat{background:#fdebd0;color:#7a3f06}
.ev-card[data-cat="music"] .ev-cat{background:#ece4fb;color:#43237d}
.ev-card[data-cat="sport"] .ev-cat{background:#dcf3e6;color:#145b39}
.ev-card[data-cat="culture"] .ev-cat{background:#d9f0f3;color:#0c4e58}
.ev-card[data-cat="festival"] .ev-cat{background:#ffe0dc;color:#8a2616}
.ev-body h3{font-size:1.06rem}
.ev-body h3 a{color:var(--b-navy);text-decoration:none}
.ev-body h3 a:hover{text-decoration:underline;background:none}
.ev-when{margin:0!important;font-weight:700;font-size:.9rem;color:var(--b-navy)}
.ev-where{margin:0!important;font-size:.86rem;color:var(--b-muted)}
.ev-snip{margin:.2rem 0 0!important;font-size:.9rem;color:#4b5565;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-body a.ev-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;background:var(--b-navy);color:#fff;text-decoration:none;font-weight:700;font-size:.85rem;padding:.5rem .95rem;border-radius:999px;transition:background .15s,color .15s}
.post-body a.ev-cta:hover{background:var(--b-sun);color:var(--b-navy)}
.ev-body .ev-cta{margin-top:.6rem}

/* classifica regioni */
.rank{list-style:none;padding:0!important;margin:1rem auto 1.6rem;display:grid;gap:.55rem}
.rank li{display:grid;grid-template-columns:minmax(120px,200px) 1fr auto;align-items:center;gap:.8rem;margin:0;background:#fff;border:1px solid var(--b-line);border-radius:14px;padding:.7rem 1rem}
.rank .pos{font-family:var(--b-display);font-weight:700;color:var(--b-muted);margin-right:.5rem}
.rank a{font-weight:700;text-decoration:none}
.rank .bar{height:10px;border-radius:99px;background:#eef1f6;overflow:hidden}
.rank .bar i{display:block;height:100%;width:var(--w,50%);border-radius:99px;background:linear-gradient(90deg,var(--b-sun),#f2a93b)}
.rank b{font-family:var(--b-display);color:var(--b-navy)}
@media (max-width:560px){.rank li{grid-template-columns:1fr auto}.rank .bar{grid-column:1/-1;order:3}}

/* domande frequenti */
.post-body .faq h3{margin:1.5rem 0 .3rem;font-size:1.1rem}
.post-body .faq p{margin:0 0 .4rem}

/* consiglio, link, nota */
.tip ul{margin:.2rem 0 0;padding-left:1.2rem}
.tip li{margin:.4rem 0}
.tip{margin:2.4rem auto;background:var(--b-sun-soft);border:1px solid #f3dc9b;border-radius:18px;padding:1.1rem 1.3rem}
.tip-title{display:block;font-family:var(--b-display);font-weight:700;color:var(--b-navy);margin-bottom:.3rem}
.tip-title::before{content:"💡 "}
.tip p{margin:0!important}
.more-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem auto 1.4rem}
.post-body .more-links a{display:inline-flex;align-items:center;gap:.4rem;border:2px solid var(--b-navy);border-radius:999px;padding:.45rem .95rem;font-weight:700;font-size:.92rem;text-decoration:none;color:var(--b-navy);background:#fff;transition:background .15s,color .15s}
.post-body .more-links a:hover{background:var(--b-navy);color:#fff}
.post-body .note{font-size:.9rem;color:var(--b-muted);border-top:1px solid var(--b-line);padding-top:1rem;margin-top:1.6rem}

/* condividi + leggi anche */
.share{max-width:740px;margin:2rem auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.share strong{font-family:var(--b-display);color:var(--b-navy);margin-right:.3rem}
.share a,.share button{font:inherit;font-size:.9rem;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--b-line);background:#fff;color:var(--b-navy);text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--b-navy)}
.related{margin:3.2rem 0 1rem}
.related h2{font-family:var(--b-display);font-size:1.6rem;color:var(--b-navy);margin:0 0 1rem}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .blog-feature{grid-template-columns:1fr}
  .blog-feature-media{min-height:220px}
}
@media (max-width:560px){
  .post-hero{border-radius:20px;margin-top:.8rem}
  .post-body{font-size:1.02rem}
  .post-body .lead{font-size:1.15rem}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats>div{padding:.8rem .7rem}
  .stats b{font-size:1.45rem}
  .stats span{font-size:.74rem;line-height:1.25}
  .post-credit{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ev-track{scroll-behavior:auto}
  .ev-card,.blog-card,.ev-media img{transition:none}
}