/* HABITUAL TOURIST — CAROSELLO.CSS v7.6 */
/* v7.6: intro carosello — -webkit-line-clamp:8 di fallback su
   .intro-carosello__text-inner. Prima era assente: il browser
   applicava line-clamp:1 di default (dato display:-webkit-box +
   -webkit-box-orient:vertical + overflow:hidden) causando ellipsis
   dopo una sola riga prima che js/ui.js intervenisse.
   Ora il default è 8 righe, poi il JS lo aggiusta all'altezza reale. */
/* v7.5: intro carosello senza testo — usa classe .intro-carosello__grid--no-text */
/* v7.4: intro carosello senza testo — larghezza fluida con clamp() (superato) */
/* v7.3: intro carosello senza testo — centrato nel main, larghezza fissa 550px (superato) */
/* v7.2: intro carosello senza testo — centrato e ridotto (superato) */
/* v7.1: fix grid nesting — min-width:0 e width:100% a .infinite-scroll-container */
/* v7.0: rimosso .grid--1row, .grid--compact a larghezza fissa */
/* v6.3: overlay rimosso, dots più grandi e distanziati */
/* v6.2: fix altezza foto intro carosello — wrapper senza flex:1, solo aspect-ratio */
/* v6.1: intro carosello — testatina e foto in un unico blocco arrotondato */
/* v6.0: assorbe da base.css INTRO CAROSELLO + TESTATINA DINAMICA */
/* v5.2: allineato a text.css — nessun font-size hardcoded */
/* v5.0: font-size centralizzati in base.css/text.css */
/* v4.1: fix barre grigie sotto .grid--1row */
/* v4.0: aggiunta .grid--compact.grid--1row */
/* v3.9: griglia 1 colonna su mobile per .grid e .grid--4col */

/* === 1. LAYOUT / GRIGLIE === */
.grid{display:grid;gap:var(--s-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start}
.grid--4col{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-md);align-items:start}
.grid--compact{display:grid;grid-template-columns:repeat(auto-fill,180px);gap:var(--s-sm);align-items:start;justify-content:start}
.grid--flex{display:flex !important;flex-wrap:wrap;gap:var(--s-md);align-items:flex-start}
.grid-cell{display:contents}
.infinite-scroll-container{min-width:0;width:100%}

/* === 2. CARD BASE === */
.card{height:100%;display:flex;flex-direction:column;background:var(--c-card);border:var(--bw) solid var(--c-border);border-radius:var(--radius-md);padding:var(--s-xs);text-decoration:none;color:inherit;min-width:0;transition:box-shadow var(--t-fast)}
.card:hover{box-shadow:var(--shadow-md)}
.card:active{transform:scale(.98)}
.card--draft{background:rgba(0,0,0,.10)}

/* === 3. CARD — VARIANTI === */
.card--compact{padding:var(--s-2xs)}
.card--compact .card__header{height:2.4rem;gap:var(--s-2xs)}
.card--compact .card__icon{width:2rem;height:2rem}
.card--compact .card__icon img{width:1.2rem;height:1.2rem}
.card--compact .card__title{font-size:var(--fs-card-title-compact)}
.card--compact .card__subtitle{font-size:var(--fs-card-title-compact)}
.card--compact .card__media{aspect-ratio:1 / 1}
.card--compact .status{width:.675rem;height:.675rem;top:var(--s-2xs);right:var(--s-2xs);border-width:1px}
.card--comune-tipo{padding:6px}
.card--comune-tipo .card__header{padding:0;gap:0;justify-content:flex-start;text-align:left}
.card--comune-tipo .card__body{padding:0;text-align:left;align-items:flex-start;width:100%}
.card--comune-tipo .card__title{font-size:var(--fs-card-title-tipo);font-weight:700;line-height:1.25;text-align:left;margin:0;padding:4px 8px 0;width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card--comune-tipo .card__subtitle{font-size:var(--fs-card-subtitle-tipo);color:var(--c-muted);text-align:left;line-height:1.15;margin:0;padding:0 8px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}

/* === 4. CARD — ELEMENTI === */
.card__header{display:flex;align-items:center;gap:var(--s-xs);padding:var(--s-2xs);flex-shrink:0;overflow:hidden}
.card__icon{width:3rem;height:3rem;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-circle)}
.card__icon img{width:2rem;height:2rem;object-fit:contain}
.card__icon-img{width:40px;height:40px;object-fit:contain}
.card__body{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.card__title{font-size:var(--fs-card-title);font-weight:700;line-height:1.3;color:var(--c-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.card__subtitle{font-size:var(--fs-card-subtitle);opacity:.75;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.card__media{width:100%;aspect-ratio:1 / 1;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--s-2xs);position:relative;background:var(--c-bg)}
.card__media > img,.card__img{width:100%;height:100%;object-fit:cover}
.card__footer{padding:var(--s-2xs);border-top:1px solid rgba(0,0,0,.05);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-2xs);min-height:2rem}

/* === 5. CARD — MOSAICO === */
.card__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;width:100%;height:100%;position:absolute;top:0;left:0}
.card__grid-item{overflow:hidden}
.card__grid-item img,.card__grid-item-img{width:100%;height:100%;object-fit:cover}
.card__grid-item--icon{display:flex;align-items:center;justify-content:center;background:var(--c-card);padding:4px}
.card__grid-item--icon img{width:100%;height:100%;max-width:55px;max-height:55px;object-fit:contain;margin:0 auto}
.card__grid-item-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:4px}
.card__grid-item-label{font-size:var(--fs-card-grid-label);font-weight:600;color:var(--c-text);text-align:center;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}

/* === 6. CARD — STATUS E BADGE === */
.card .status{position:absolute;top:var(--s-xs);right:var(--s-xs);width:.9rem;height:.9rem;border-radius:50%;border:2px solid #fff;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.card .status--published{background:var(--c-success)}
.card .status--draft{background:#95a5a6}
.card .status--wip{background:var(--c-wip)}
.card .status--error{background:var(--c-danger)}
.card .status.stream-indicator{background:#ff6b6b;right:var(--s-xs);top:var(--s-xs)}
.card .status.stream-indicator i{font-size:var(--fs-card-stream-icon);color:#fff}
.card .card-badge-status{position:absolute;bottom:var(--s-xs);left:var(--s-xs);background:var(--c-wip);color:#fff;font-size:var(--fs-card-wip-badge);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);z-index:10}

/* === 7. CAROSELLO === */
.carousel,.card-carousel,.cosi-carousel,.related-items{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar,.card-carousel::-webkit-scrollbar,.cosi-carousel::-webkit-scrollbar,.related-items::-webkit-scrollbar{display:none}
.carousel .grid,.card-carousel .grid,.cosi-carousel .grid,.related-items .grid{display:flex;gap:var(--s-md);margin:0;scroll-snap-type:x mandatory}
.carousel .grid > *,.card-carousel .grid > *,.cosi-carousel .grid > *,.related-items .grid > *{flex:0 0 280px;scroll-snap-align:start}

/* === 8. GRUPPI === */
.tipo-group-header{margin:0;display:flex;align-items:center;gap:var(--s-sm);padding-bottom:var(--s-xs);flex-wrap:wrap}
.tipo-group-header__title{margin:0;font-size:var(--fs-titolo-sub);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tipo-group-header__icon{width:2.2rem;height:2.2rem;opacity:.7;background:transparent;border:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.tipo-group-header__icon img{width:1.5rem;height:1.5rem;object-fit:contain}
.tipo-group-header__icon--fa{color:var(--c-muted);font-size:var(--fs-tag-icon);line-height:1;opacity:.7}
.line-decorator{width:var(--s-2xs);height:var(--s-lg);background:var(--c-accent);border-radius:2px}
.titolo-sub{display:inline-flex;align-items:center;gap:var(--s-xs);margin:0;font-size:var(--fs-titolo-sub);color:var(--c-muted);font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.titolo-sub__link{display:inline-flex;align-items:center;gap:var(--s-xs);color:inherit;text-decoration:none}
.titolo-sub__link:hover{text-decoration:underline}
.section.flow{--flow-gap:var(--s-xl)}
.section.flow > .tipo-group-header + *{margin-top:var(--s-xs)}

/* === 9. RESPONSIVE === */
@media (max-width:1100px){
.grid .card__icon{display:none}
.grid--4col .card__icon{display:flex}
.carousel .grid > *,.card-carousel .grid > *,.cosi-carousel .grid > *,.related-items .grid > *{flex:0 0 calc(50% - var(--s-sm))}
}
@media (max-width:768px){
.carousel,.card-carousel,.cosi-carousel,.related-items{overflow-x:visible;scroll-snap-type:none}
.carousel .grid,.card-carousel .grid,.cosi-carousel .grid,.related-items .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s-sm)}
.carousel .grid > *,.card-carousel .grid > *,.cosi-carousel .grid > *,.related-items .grid > *{flex:none;width:100%;scroll-snap-align:none}
.card__grid-item--icon img{max-width:32px;max-height:32px}
.card__grid-item--icon{padding:2px}
.card__grid-item-label{font-size:var(--fs-card-grid-label);font-weight:500}
.card__media{aspect-ratio:16 / 9}
.grid, .grid--4col {grid-template-columns:1fr}
.grid--compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));justify-content:stretch}
}
@media (max-width:480px){
.card__title{font-size:var(--fs-card-title);-webkit-line-clamp:3}
.card__subtitle{font-size:var(--fs-card-subtitle)}
.card__icon{width:2.4rem;height:2.4rem}
.card__icon img{width:1.6rem;height:1.6rem}
}
@media (min-width:769px){
.card__title{font-size:var(--fs-card-title);line-height:1.3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:none;-webkit-box-orient:initial}
.card__subtitle{font-size:var(--fs-card-subtitle)}
}

/* === 10. INTRO CAROSELLO (v6.3) === */
.intro-carosello{width:100%}
.intro-carosello__grid{display:grid;grid-template-columns:1.2fr 2fr;gap:var(--s-md);align-items:start}
.intro-carosello__grid--wip{grid-template-columns:1fr}
.intro-carosello__grid--wip .intro-carosello__media{max-width:800px;margin:0 auto;width:100%}

/* Media: blocco unico testatina + foto. Bordo esterno + radius sull'intero blocco. */
.intro-carosello__media{position:relative;min-width:0;overflow:hidden;border-radius:var(--radius-md);background:var(--c-bg);width:100%;align-self:start;display:flex;flex-direction:column;border:var(--bw) solid var(--c-border)}

/* Wrapper slideshow + dots: quadrato, sotto la testatina. NIENTE flex:1. */
.intro-carosello__slideshow-wrapper{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--c-bg)}

.intro-carosello__slideshow{position:relative;width:100%;height:100%}
.intro-carosello__slide{position:absolute;inset:0;display:block;text-decoration:none;opacity:0;transition:opacity .8s ease;pointer-events:none;z-index:1}
.intro-carosello__slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.intro-carosello__img{width:100%;height:100%;object-fit:cover;display:block;background:var(--c-bg)}

/* v6.3: overlay rimosso (la testatina sopra dice già il nome) */
.intro-carosello__overlay{display:none}

/* v6.3: dots più grandi e distanziati */
.intro-carosello__dots{position:absolute;bottom:var(--s-sm);left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10;background:rgba(0,0,0,.5);padding:8px 14px;border-radius:var(--radius-pill);backdrop-filter:blur(6px);align-items:center}
.intro-carosello__dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.5);border:none;padding:0;cursor:pointer;transition:all .2s ease;flex-shrink:0}
.intro-carosello__dot:hover{background:rgba(255,255,255,.85);transform:scale(1.15)}
.intro-carosello__dot.is-active{width:28px;border-radius:var(--radius-pill);background:#fff}

.intro-carosello__text{min-width:0;overflow:hidden;align-self:start}
/* v7.6: -webkit-line-clamp:8 di fallback. Il JS lo aggiusta all'altezza reale.
   Senza questo, il browser applicava line-clamp:1 di default (dato che
   l'elemento ha display:-webkit-box + -webkit-box-orient:vertical),
   causando ellipsis dopo una sola riga prima che ui.js intervenisse. */
.intro-carosello__text-inner{font-size:var(--fs-intro-text);line-height:1.6;color:var(--c-text);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;text-overflow:ellipsis}
.intro-carosello__text-inner p{margin-bottom:var(--s-sm)}
.intro-carosello__text-inner p:last-child{margin-bottom:0}
.intro-carosello__text-inner a{color:var(--c-accent);text-decoration:underline}
.intro-carosello__text-inner a:hover{text-decoration:none}

/* === 11. TESTATINA DINAMICA CAROSELLO INTRO === */
.intro-carosello__testatina{background:var(--c-card);border-bottom:var(--bw) solid var(--c-border);flex-shrink:0}
.intro-carosello__testatina.card__header{padding:var(--s-2xs) var(--s-sm);gap:var(--s-xs);min-height:44px}
.intro-carosello__testatina .card__icon{width:2rem;height:2rem;border:none;background:transparent}
.intro-carosello__testatina .card__icon img{width:1.5rem;height:1.5rem}
.intro-carosello__testatina .card__title{font-size:var(--fs-card-title-compact);line-height:1.2}
.intro-carosello__testatina .card__subtitle{font-size:var(--fs-card-title-compact);line-height:1.2;opacity:.65}
.intro-carosello__testatina .card__title,
.intro-carosello__testatina .card__subtitle{transition:opacity .25s ease}
.intro-carosello__testatina.is-switching .card__title,
.intro-carosello__testatina.is-switching .card__subtitle{opacity:0}

@media (max-width:768px){
.intro-carosello__grid{grid-template-columns:1fr;gap:var(--s-md)}
.intro-carosello__grid--wip .intro-carosello__media{max-width:100%}
.intro-carosello__text-inner{-webkit-line-clamp:15;line-clamp:15}
.intro-carosello__testatina.card__header{padding:var(--s-2xs) var(--s-xs);min-height:40px}
.intro-carosello__testatina .card__icon{width:1.75rem;height:1.75rem}
.intro-carosello__testatina .card__icon img{width:1.25rem;height:1.25rem}
}

/* === 12. INTRO CAROSELLO — SINGOLA FOTO (v2.0) === */
.intro-carosello__single{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--c-bg)}
.intro-carosello__single a{display:block;width:100%;height:100%;text-decoration:none}
.intro-carosello__single img{width:100%;height:100%;object-fit:cover;display:block}

/* === 13. INTRO CAROSELLO — SOLO MEDIA, CENTRATO (v7.5) === */
/* Quando la griglia NON ha il testo (.intro-carosello__grid--no-text,
   aggiunta dal PHP in IntroCarosello), il media si prende tutta la
   larghezza. Lo limitiamo con una larghezza fluida e lo centriamo.
   Niente :has(), niente dipendenze da supporto browser. */
.intro-carosello__grid--no-text{
    grid-template-columns:1fr;
    justify-items:center;
}
.intro-carosello__grid--no-text .intro-carosello__media{
    max-width:clamp(340px, 40vw, 720px);
    width:100%;
}

@media (max-width:768px){
.intro-carosello__grid--no-text .intro-carosello__media{
    max-width:100%;
}
}