/* Layout "Comò": griglia regolare su fondo crema (mockup approvato). Tutto sotto .tlsf-feed. */
.tlsf-feed.tlsf-layout-como {
    --tlsf-giallo: #ffd67f;
    --tlsf-petrolio: #236368;
    --tlsf-azzurro: #5290a7;
    --tlsf-prugna: #9d6381;
    --tlsf-crema: #fdf8e9;
    --tlsf-testo: #3c3c3b;
    --tlsf-cols: 3;
    box-sizing: border-box;
    max-width: calc(var(--tlsf-cols) * 320px + (var(--tlsf-cols) - 1) * 14px + 36px);
    margin: 0 auto;
    padding: 18px;
    border-radius: 8px;
    background: var(--tlsf-crema);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tlsf-testo);
}
.tlsf-feed.tlsf-layout-como *, .tlsf-feed.tlsf-layout-como *::before, .tlsf-feed.tlsf-layout-como *::after { box-sizing: border-box; }
.tlsf-feed.tlsf-layout-como .tlsf-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tlsf-feed.tlsf-layout-como p { margin: 0; }
.tlsf-feed.tlsf-layout-como img { display: block; max-width: 100%; height: auto; }

/* Intestazione */
.tlsf-feed.tlsf-layout-como .tlsf-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px dashed var(--tlsf-giallo);
}
.tlsf-feed.tlsf-layout-como .tlsf-kicker { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tlsf-prugna); font-weight: 600; }
.tlsf-feed.tlsf-layout-como .tlsf-title { margin: 0; font-family: 'Bitter', Georgia, serif; font-size: 28px; line-height: 1.2; color: var(--tlsf-petrolio); }
.tlsf-feed.tlsf-layout-como .tlsf-follow {
    display: inline-block; padding: 8px 16px; border-radius: 20px; background: var(--tlsf-petrolio); color: #fff;
    font-size: 13px; text-decoration: none; white-space: nowrap;
}
.tlsf-feed.tlsf-layout-como .tlsf-follow:hover { background: #1b4f53; }

/* Griglia */
/* Colonne responsive: almeno 220px ciascuna, mai più di --tlsf-cols (la larghezza minima cresce con il contenitore). */
.tlsf-feed.tlsf-layout-como .tlsf-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, calc((100% - (var(--tlsf-cols) - 1) * 14px) / var(--tlsf-cols) - 0.5px))), 1fr));
}
.tlsf-feed.tlsf-layout-como .tlsf-card {
    display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff;
    box-shadow: 0 2px 0 var(--tlsf-giallo); outline: none;
}
.tlsf-feed.tlsf-layout-como .tlsf-card[hidden] { display: none; }
.tlsf-feed.tlsf-layout-como .tlsf-card:focus-visible { box-shadow: 0 0 0 3px var(--tlsf-azzurro); }

/* Media 4:5: foto ritagliata oppure, senza foto, testo su fondo colorato */
.tlsf-feed.tlsf-layout-como .tlsf-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #efe7cf; }
.tlsf-feed.tlsf-layout-como .tlsf-media a { display: block; width: 100%; height: 100%; }
.tlsf-feed.tlsf-layout-como .tlsf-media a[hidden] { display: none; }
.tlsf-feed.tlsf-layout-como .tlsf-media img { width: 100%; height: 100%; object-fit: cover; }
.tlsf-feed.tlsf-layout-como .tlsf-datebadge {
    position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 12px;
    background: var(--tlsf-giallo); color: var(--tlsf-testo); font-size: 12px; font-weight: 600; pointer-events: none;
}
.tlsf-feed.tlsf-layout-como .tlsf-play {
    position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
    border-radius: 50%; background: rgba(35, 99, 104, .85); pointer-events: none;
}
.tlsf-feed.tlsf-layout-como .tlsf-play::after {
    content: ''; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -6px;
    border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff;
}
.tlsf-feed.tlsf-layout-como .tlsf-media--text { display: flex; align-items: center; padding: 48px 18px 18px; color: #fff; }
.tlsf-feed.tlsf-layout-como .tlsf-tone-0 .tlsf-media--text { background: var(--tlsf-petrolio); }
.tlsf-feed.tlsf-layout-como .tlsf-tone-1 .tlsf-media--text { background: var(--tlsf-prugna); }
/* Azzurro: testo scuro per mantenere il contrasto. */
.tlsf-feed.tlsf-layout-como .tlsf-tone-2 .tlsf-media--text { background: var(--tlsf-azzurro); color: #1d1d1b; }
.tlsf-feed.tlsf-layout-como .tlsf-quote {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden;
    font-family: 'Bitter', Georgia, serif; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere;
}
.tlsf-feed.tlsf-layout-como .tlsf-quote a { color: inherit; text-decoration: underline; }

/* Corpo */
.tlsf-feed.tlsf-layout-como .tlsf-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.tlsf-feed.tlsf-layout-como .tlsf-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
    overflow-wrap: anywhere; font-size: 13px;
}
.tlsf-feed.tlsf-layout-como .tlsf-linkbox { display: block; color: inherit; font-size: 13px; text-decoration: none; }
.tlsf-feed.tlsf-layout-como .tlsf-linkbox strong, .tlsf-feed.tlsf-layout-como .tlsf-linkbox span { display: block; }
.tlsf-feed.tlsf-layout-como .tlsf-linkbox span { color: #6b6b69; }
.tlsf-feed.tlsf-layout-como .tlsf-readmore {
    align-self: flex-start; margin: 0; padding: 2px 0; border: 0; background: none;
    color: #8a5272; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tlsf-feed.tlsf-layout-como .tlsf-readmore:hover { text-decoration: underline; }
.tlsf-feed.tlsf-layout-como .tlsf-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px;
    font-size: 12px; color: #6b6b69;
}
.tlsf-feed.tlsf-layout-como .tlsf-counts { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
.tlsf-feed.tlsf-layout-como .tlsf-fb { color: #3f7890; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tlsf-feed.tlsf-layout-como .tlsf-fb:hover { text-decoration: underline; }
.tlsf-feed.tlsf-layout-como a:focus-visible, .tlsf-feed.tlsf-layout-como button:focus-visible { outline: 3px solid var(--tlsf-azzurro); outline-offset: 2px; }

/* Altri post */
.tlsf-feed.tlsf-layout-como .tlsf-more-wrap { margin-top: 18px; text-align: center; }
.tlsf-feed.tlsf-layout-como .tlsf-more {
    padding: 8px 22px; border: 2px solid var(--tlsf-petrolio); border-radius: 20px; background: transparent;
    color: var(--tlsf-petrolio); font: inherit; font-size: 14px; cursor: pointer;
}
.tlsf-feed.tlsf-layout-como .tlsf-more:hover { background: var(--tlsf-petrolio); color: #fff; }

/* Box vuoto / eventi: componente comune ai due layout, identico in entrambi i fogli di stile */
.tlsf-feed.tlsf-notice {
    box-sizing: border-box; max-width: 960px; margin: 0 auto; padding: 18px 20px; border-radius: 10px;
    background: #fdf8e9; text-align: center; font-family: 'Poppins', system-ui, sans-serif; font-size: 14px;
    line-height: 1.45; color: #3c3c3b;
}
.tlsf-feed.tlsf-notice p { margin: 0; }
.tlsf-feed.tlsf-notice p + p { margin-top: 10px; }
.tlsf-feed.tlsf-notice .tlsf-follow {
    display: inline-block; padding: 8px 18px; border-radius: 20px; background: #236368; color: #fff;
    font-size: 13px; text-decoration: none;
}
.tlsf-feed.tlsf-notice .tlsf-notice-admin { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #ffd67f; font-size: 13px; text-align: left; }

/* Contenuto del post nel lightbox (il lightbox sta fuori da .tlsf-feed) */
.glightbox-container .tlsf-full { display: block !important; }
/* Sopra la barra fissa del tema (My Sticky Bar, z-index 1000000): il lightbox copre tutto lo schermo. */
.glightbox-container { z-index: 1000010 !important; }
.glightbox-container .tlsf-lb--como .tlsf-full-text, .glightbox-container .tlsf-lb--como .tlsf-full-link, .glightbox-container .tlsf-lb--como .tlsf-full-fb { margin: 0 0 10px; }
.glightbox-container .tlsf-lb--como .tlsf-full-text a, .glightbox-container .tlsf-lb--como .tlsf-full-fb a, .glightbox-container .tlsf-lb--como .tlsf-full-link a { color: #236368; text-decoration: underline; }
.glightbox-container .tlsf-lb--como .tlsf-counts { display: inline-flex; gap: 14px; margin-bottom: 10px; font-size: 13px; color: #3c3c3b; }
.glightbox-container .tlsf-lb--como .tlsf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.glightbox-container .gslide-inline .tlsf-lb--como { padding: 24px; background: #fdf8e9; color: #3c3c3b; border-radius: 14px; max-width: 640px; }
.glightbox-container .gslide-inline .tlsf-lb--como a { color: #236368; }

@media (max-width: 600px) {
    .tlsf-feed.tlsf-layout-como { padding: 14px; }
    .tlsf-feed.tlsf-layout-como .tlsf-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .tlsf-feed.tlsf-layout-como * { transition: none !important; }
}