/* ==============================================
   EG SOCIAL TIMELINE - STILI
   ==============================================

   I colori sono organizzati in tre livelli:

   1. PALETTE SORGENTE: --egst-light-* e --egst-dark-*, i due insiemi di
      colori di primo piano pensati per stare su una superficie chiara o su
      una scura. Non vengono usati direttamente dalle regole.
   2. TOKEN ATTIVI: --egst-text, --egst-chip-bg, ... Sono quelli che le
      regole leggono. Qui puntano tutti alla palette chiara.
   3. OVERRIDE: il PHP emette CSS inline (wp_add_inline_style) che sposta i
      token attivi sulla palette scura quando la superficie scelta nelle
      impostazioni e' scura, misurando il contrasto del colore reale. Le
      superfici impostate su "segue il browser" producono anche un blocco
      @media (prefers-color-scheme: dark).

   Percio' questo file non contiene nessuna @media prefers-color-scheme: il
   tema scuro non e' piu' deciso qui, ma dalle impostazioni del plugin.
   ============================================== */

.eg-social-timeline {
    /* ---------- Palette sorgente: primo piano su superficie CHIARA ---------- */
    --egst-light-text: #374151;
    --egst-light-heading: #374151;
    --egst-light-muted: #9CA3AF;
    --egst-light-stat: #6B7280;
    --egst-light-link: #6364FF;
    --egst-light-link-hover: #4F46E5;
    --egst-light-badge-bg: #EEF2FF;
    --egst-light-badge-text: #6364FF;
    --egst-light-card-border: #E5E7EB;
    --egst-light-card-border-hover: #D1D5DB;
    --egst-light-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --egst-light-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --egst-light-brand: #6364FF;
    --egst-light-icon-mono: #374151;
    --egst-light-icon-mastodon: #6364FF;
    --egst-light-icon-lemmy: #1A1A1A;
    --egst-light-icon-pleroma: #E08A2E;
    --egst-light-icon-bluesky: #0085FF;
    --egst-light-icon-forgejo: #609926;
    --egst-light-icon-peertube: #F1680D;
    --egst-light-icon-pixelfed: #4F46E5;
    --egst-light-icon-gotosocial: #C76C33;
    --egst-light-icon-friendica: #1872A2;
    --egst-light-icon-rss: #E07B39;
    --egst-light-icon-listenbrainz: #A13D7A;
    --egst-light-empty-bg: #F5F5F5;
    --egst-light-empty-text: #666666;
    --egst-light-filters-bg: #F8F9FF;
    --egst-light-filters-border: #E0E2FF;
    --egst-light-filters-title: #2C3E50;
    --egst-light-filters-shadow: 0 2px 8px rgba(99, 100, 255, 0.08);
    --egst-light-chip-bg: #FFFFFF;
    --egst-light-chip-bg-hover: #FAFBFF;
    --egst-light-chip-bg-off: #F5F5F5;
    --egst-light-chip-border: #E0E0E0;
    --egst-light-chip-text: #2C3E50;
    --egst-light-count: #7F8C8D;

    /* ---------- Palette sorgente: primo piano su superficie SCURA ---------- */
    --egst-dark-text: #D1D5DB;
    --egst-dark-heading: #E5E7EB;
    --egst-dark-muted: #9CA3AF;
    --egst-dark-stat: #9CA3AF;
    --egst-dark-link: #A5B4FC;
    --egst-dark-link-hover: #C7D2FE;
    --egst-dark-badge-bg: #312E81;
    --egst-dark-badge-text: #A5B4FC;
    --egst-dark-card-border: #374151;
    --egst-dark-card-border-hover: #4B5563;
    --egst-dark-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --egst-dark-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
    --egst-dark-brand: #8B8DFF;
    --egst-dark-icon-mono: #E5E7EB;
    --egst-dark-icon-mastodon: #8B8DFF;
    --egst-dark-icon-lemmy: #E0E0E0;
    --egst-dark-icon-pleroma: #FBA457;
    --egst-dark-icon-bluesky: #4DA6FF;
    --egst-dark-icon-forgejo: #8FCB4F;
    --egst-dark-icon-peertube: #FF9248;
    --egst-dark-icon-pixelfed: #A5A6FF;
    --egst-dark-icon-gotosocial: #DF8958;
    --egst-dark-icon-friendica: #FEBF19;
    --egst-dark-icon-rss: #FFA500;
    --egst-dark-icon-listenbrainz: #E191C8;
    --egst-dark-empty-bg: #1F2937;
    --egst-dark-empty-text: #9CA3AF;
    --egst-dark-filters-bg: #2A2A2A;
    --egst-dark-filters-border: #3A3A3A;
    --egst-dark-filters-title: #E0E0E0;
    --egst-dark-filters-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --egst-dark-chip-bg: #1E1E1E;
    --egst-dark-chip-bg-hover: #333333;
    --egst-dark-chip-bg-off: #252525;
    --egst-dark-chip-border: #3A3A3A;
    --egst-dark-chip-text: #E0E0E0;
    --egst-dark-count: #9CA3AF;

    /* ---------- Superfici e struttura ---------- */
    --egst-canvas: transparent;
    --egst-canvas-padding: 24px;
    --egst-canvas-radius: 16px;
    --egst-card-bg: #FFFFFF;

    /* ---------- Token attivi: contesto SCHEDA ---------- */
    --egst-text: var(--egst-light-text);
    --egst-heading: var(--egst-light-heading);
    --egst-muted: var(--egst-light-muted);
    --egst-stat: var(--egst-light-stat);
    --egst-link: var(--egst-light-link);
    --egst-link-hover: var(--egst-light-link-hover);
    --egst-badge-bg: var(--egst-light-badge-bg);
    --egst-badge-text: var(--egst-light-badge-text);
    --egst-card-border: var(--egst-light-card-border);
    --egst-card-border-hover: var(--egst-light-card-border-hover);
    --egst-card-shadow: var(--egst-light-card-shadow);
    --egst-card-shadow-hover: var(--egst-light-card-shadow-hover);
    --egst-brand: var(--egst-light-brand);
    --egst-icon-mono: var(--egst-light-icon-mono);
    --egst-icon-mastodon: var(--egst-light-icon-mastodon);
    --egst-icon-lemmy: var(--egst-light-icon-lemmy);
    --egst-icon-pleroma: var(--egst-light-icon-pleroma);
    --egst-icon-bluesky: var(--egst-light-icon-bluesky);
    --egst-icon-forgejo: var(--egst-light-icon-forgejo);
    --egst-icon-peertube: var(--egst-light-icon-peertube);
    --egst-icon-pixelfed: var(--egst-light-icon-pixelfed);
    --egst-icon-gotosocial: var(--egst-light-icon-gotosocial);
    --egst-icon-friendica: var(--egst-light-icon-friendica);
    --egst-icon-rss: var(--egst-light-icon-rss);
    --egst-icon-listenbrainz: var(--egst-light-icon-listenbrainz);
    --egst-empty-bg: var(--egst-light-empty-bg);
    --egst-empty-text: var(--egst-light-empty-text);

    /* ---------- Token attivi: contesto FILTRI ---------- */
    --egst-filters-bg: var(--egst-light-filters-bg);
    --egst-filters-border: var(--egst-light-filters-border);
    --egst-filters-title: var(--egst-light-filters-title);
    --egst-filters-shadow: var(--egst-light-filters-shadow);
    --egst-chip-bg: var(--egst-light-chip-bg);
    --egst-chip-bg-hover: var(--egst-light-chip-bg-hover);
    --egst-chip-bg-off: var(--egst-light-chip-bg-off);
    --egst-chip-border: var(--egst-light-chip-border);
    --egst-chip-text: var(--egst-light-chip-text);
    --egst-count: var(--egst-light-count);
    --egst-chip-brand: var(--egst-light-brand);
    --egst-chip-icon-mono: var(--egst-light-icon-mono);
    --egst-chip-icon-mastodon: var(--egst-light-icon-mastodon);
    --egst-chip-icon-lemmy: var(--egst-light-icon-lemmy);
    --egst-chip-icon-pleroma: var(--egst-light-icon-pleroma);
    --egst-chip-icon-bluesky: var(--egst-light-icon-bluesky);
    --egst-chip-icon-forgejo: var(--egst-light-icon-forgejo);
    --egst-chip-icon-peertube: var(--egst-light-icon-peertube);
    --egst-chip-icon-pixelfed: var(--egst-light-icon-pixelfed);
    --egst-chip-icon-gotosocial: var(--egst-light-icon-gotosocial);
    --egst-chip-icon-friendica: var(--egst-light-icon-friendica);
    --egst-chip-icon-rss: var(--egst-light-icon-rss);
    --egst-chip-icon-listenbrainz: var(--egst-light-icon-listenbrainz);
}

/* ==============================================
   CONTENITORE
   ============================================== */

.eg-social-timeline {
    max-width: 800px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--egst-canvas);
}

/* Padding e angoli arrotondati solo se il contenitore ha uno sfondo suo,
   altrimenti la timeline resta appoggiata al layout del tema. */
.eg-social-timeline.egst-has-canvas {
    padding: var(--egst-canvas-padding);
    border-radius: var(--egst-canvas-radius);
}

.eg-social-timeline-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--egst-empty-bg);
    border-radius: 12px;
    color: var(--egst-empty-text);
    font-size: 1.1em;
}

/* ==============================================
   FILTRI CSS - Checkbox esterni + Logica invertita
   ============================================== */

/* Nascondi checkbox originali (sono fuori dal box) */
.filter-checkbox-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eg-timeline-filters {
    background: var(--egst-filters-bg);
    border: 2px solid var(--egst-filters-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 32px;
    box-shadow: var(--egst-filters-shadow);
}

.filters-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--egst-filters-border);
}

.filters-icon {
    font-size: 1.1em;
}

.filters-header h3 {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--egst-filters-title);
}

.filters-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--egst-chip-bg);
    border: 2px solid var(--egst-chip-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-weight: 500;
    font-size: 0.85em;
    color: var(--egst-chip-text);
    height: 34px;
    white-space: nowrap;
}

/* Check indicator */
.filter-checkbox-label::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 2px solid var(--egst-chip-brand);
    border-radius: 4px;
    background: var(--egst-chip-brand);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Quando unchecked, nascondi check */
.egst-filter-mastodon:not(:checked) ~ * .egst-label-mastodon::before,
.egst-filter-lemmy:not(:checked) ~ * .egst-label-lemmy::before,
.egst-filter-bluesky:not(:checked) ~ * .egst-label-bluesky::before,
.egst-filter-forgejo:not(:checked) ~ * .egst-label-forgejo::before,
.egst-filter-peertube:not(:checked) ~ * .egst-label-peertube::before,
.egst-filter-pixelfed:not(:checked) ~ * .egst-label-pixelfed::before,
.egst-filter-gotosocial:not(:checked) ~ * .egst-label-gotosocial::before,
.egst-filter-friendica:not(:checked) ~ * .egst-label-friendica::before,
.egst-filter-rss:not(:checked) ~ * .egst-label-rss::before,
.egst-filter-listenbrainz:not(:checked) ~ * .egst-label-listenbrainz::before {
    background: var(--egst-chip-bg);
    color: transparent;
    border-color: var(--egst-chip-border);
}

/* Label unchecked styling */
.egst-filter-mastodon:not(:checked) ~ * .egst-label-mastodon,
.egst-filter-lemmy:not(:checked) ~ * .egst-label-lemmy,
.egst-filter-bluesky:not(:checked) ~ * .egst-label-bluesky,
.egst-filter-forgejo:not(:checked) ~ * .egst-label-forgejo,
.egst-filter-peertube:not(:checked) ~ * .egst-label-peertube,
.egst-filter-pixelfed:not(:checked) ~ * .egst-label-pixelfed,
.egst-filter-gotosocial:not(:checked) ~ * .egst-label-gotosocial,
.egst-filter-friendica:not(:checked) ~ * .egst-label-friendica,
.egst-filter-rss:not(:checked) ~ * .egst-label-rss,
.egst-filter-listenbrainz:not(:checked) ~ * .egst-label-listenbrainz {
    opacity: 0.6;
    background: var(--egst-chip-bg-off);
}

.filter-checkbox-label:hover {
    border-color: var(--egst-chip-brand);
    background: var(--egst-chip-bg-hover);
}

/* Piattaforma esclusa: icona in grigio, non solo piu' pallida. */
.egst-filter-mastodon:not(:checked) ~ * .egst-label-mastodon .platform-icon-small svg,
.egst-filter-lemmy:not(:checked) ~ * .egst-label-lemmy .platform-icon-small svg,
.egst-filter-bluesky:not(:checked) ~ * .egst-label-bluesky .platform-icon-small svg,
.egst-filter-forgejo:not(:checked) ~ * .egst-label-forgejo .platform-icon-small svg,
.egst-filter-peertube:not(:checked) ~ * .egst-label-peertube .platform-icon-small svg,
.egst-filter-pixelfed:not(:checked) ~ * .egst-label-pixelfed .platform-icon-small svg,
.egst-filter-gotosocial:not(:checked) ~ * .egst-label-gotosocial .platform-icon-small svg,
.egst-filter-friendica:not(:checked) ~ * .egst-label-friendica .platform-icon-small svg,
.egst-filter-listenbrainz:not(:checked) ~ * .egst-label-listenbrainz .platform-icon-small svg,
.egst-filter-rss:not(:checked) ~ * .egst-label-rss .platform-icon-small svg {
    filter: grayscale(1);
}

/* ==============================================
   FILTRI COMPATTI - solo icone
   ==============================================
   Stessa struttura e stessi checkbox dello stile completo: cambiano solo
   dimensioni e visibilita' del testo. Il nome della piattaforma resta nel
   documento, nascosto agli occhi ma non agli screen reader, e viene ripetuto
   nel title insieme al conteggio. */

/* Tutto su una riga: intestazione e icone affiancate, senza la linea di
   separazione che serviva quando stavano su due righe. Le icone vanno a capo
   da sole se lo schermo non basta. */
.egst-filters-compact .eg-timeline-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
}

.egst-filters-compact .filters-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.egst-filters-compact .filters-checkboxes {
    gap: 8px;
}

/* L'icona porta un <title> suo (è il nome della piattaforma), e col mouse
   sopra il browser mostrerebbe quello invece del title del chip, che ha anche
   il conteggio. Resa inerte al puntatore: il clic resta al label. */
.filter-checkbox-label svg {
    pointer-events: none;
}

.egst-filters-compact .filter-checkbox-label {
    /* 36px di area cliccabile anche con l'icona da 22: sotto questa misura
       diventa difficile centrarla da telefono. */
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

/* La spunta ruberebbe lo spazio dell'icona. */
.egst-filters-compact .filter-checkbox-label::before {
    display: none;
}

.egst-filters-compact .platform-icon-small,
.egst-filters-compact .platform-icon-small svg {
    width: 22px;
    height: 22px;
}

/* Nascosto alla vista, disponibile per screen reader e ricerca nel testo. */
.egst-filters-compact .platform-label,
.egst-filters-compact .post-count {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.platform-icon-small {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.platform-icon-small svg {
    width: 16px;
    height: 16px;
}

.post-count {
    font-size: 0.9em;
    color: var(--egst-count);
    font-weight: 400;
}

/* ==============================================
   LOGICA FILTRI - CORRETTA! (Invertita)
   ============================================== */

/* Default: TUTTI NASCOSTI */
.timeline-item {
    display: none !important;
}

/* Mostra SOLO quando checked */
.egst-filter-mastodon:checked ~ .timeline-mastodon,
.egst-filter-lemmy:checked ~ .timeline-lemmy,
.egst-filter-bluesky:checked ~ .timeline-bluesky,
.egst-filter-forgejo:checked ~ .timeline-forgejo,
.egst-filter-peertube:checked ~ .timeline-peertube,
.egst-filter-pixelfed:checked ~ .timeline-pixelfed,
.egst-filter-gotosocial:checked ~ .timeline-gotosocial,
.egst-filter-friendica:checked ~ .timeline-friendica,
.egst-filter-rss:checked ~ .timeline-rss,
.egst-filter-listenbrainz:checked ~ .timeline-listenbrainz {
    /* block nell'elenco; la griglia lo porta a flex per allineare il footer. */
    display: var(--egst-item-display, block) !important;
}

/* ==============================================
   TIMELINE ITEMS
   ============================================== */

.timeline-item {
    background: var(--egst-card-bg);
    border: 1px solid var(--egst-card-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--egst-card-shadow);
    transition: all 0.2s ease;
}

.timeline-item:hover {
    box-shadow: var(--egst-card-shadow-hover);
    border-color: var(--egst-card-border-hover);
}

.timeline-item.is-boost {
    border-left: 4px solid var(--egst-brand);
}

/* Header */
.timeline-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.platform-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-icon svg {
    width: 24px;
    height: 24px;
}

.platform-name {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--egst-heading);
}

.boost-badge {
    background: var(--egst-badge-bg);
    color: var(--egst-badge-text);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
}

.post-date {
    margin-left: auto;
    color: var(--egst-muted);
    font-size: 0.85em;
}

/* Content */
.timeline-content {
    margin-bottom: 12px;
}

.post-text {
    color: var(--egst-text);
    line-height: 1.6;
    font-size: 0.95em;
}

/* Image */
.post-image {
    margin-top: 12px;
}

.post-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Footer */
.timeline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.post-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: var(--egst-stat);
}

.view-original {
    color: var(--egst-link);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: color 0.2s;
    margin-left: auto;
}

.view-original:hover {
    color: var(--egst-link-hover);
    text-decoration: underline;
}

/* ==============================================
   ICONE PIATTAFORMA
   ==============================================
   Le icone in social-icons/ sono sagome monocromatiche a un solo path, in
   stile Simple Icons: non portano l'attributo fill, quindi senza la regola
   qui sotto il path resterebbe nero (valore iniziale di fill) e i color
   sarebbero inerti. Il colore lo decide il CSS, non il file SVG.

   Le icone sulla scheda e quelle sui chip dei filtri leggono token distinti
   (--egst-icon-* e --egst-chip-icon-*) perche' stanno su due superfici
   diverse: la scheda puo' essere scura mentre i chip restano chiari. */

.platform-icon svg,
.platform-icon-small svg {
    fill: currentColor;
}

/* Stile "colori delle piattaforme": selettori per slug, come i filtri. */
.egst-icons-brand .platform-mastodon .platform-icon svg { color: var(--egst-icon-mastodon); }
.egst-icons-brand .egst-label-mastodon .platform-icon-small svg { color: var(--egst-chip-icon-mastodon); }
.egst-icons-brand .platform-lemmy .platform-icon svg { color: var(--egst-icon-lemmy); }
.egst-icons-brand .egst-label-lemmy .platform-icon-small svg { color: var(--egst-chip-icon-lemmy); }
.egst-icons-brand .platform-bluesky .platform-icon svg { color: var(--egst-icon-bluesky); }
.egst-icons-brand .egst-label-bluesky .platform-icon-small svg { color: var(--egst-chip-icon-bluesky); }
.egst-icons-brand .platform-forgejo .platform-icon svg { color: var(--egst-icon-forgejo); }
.egst-icons-brand .egst-label-forgejo .platform-icon-small svg { color: var(--egst-chip-icon-forgejo); }
.egst-icons-brand .platform-peertube .platform-icon svg { color: var(--egst-icon-peertube); }
.egst-icons-brand .egst-label-peertube .platform-icon-small svg { color: var(--egst-chip-icon-peertube); }
.egst-icons-brand .platform-pixelfed .platform-icon svg { color: var(--egst-icon-pixelfed); }
.egst-icons-brand .egst-label-pixelfed .platform-icon-small svg { color: var(--egst-chip-icon-pixelfed); }
.egst-icons-brand .platform-gotosocial .platform-icon svg { color: var(--egst-icon-gotosocial); }
.egst-icons-brand .egst-label-gotosocial .platform-icon-small svg { color: var(--egst-chip-icon-gotosocial); }
.egst-icons-brand .platform-friendica .platform-icon svg { color: var(--egst-icon-friendica); }
.egst-icons-brand .egst-label-friendica .platform-icon-small svg { color: var(--egst-chip-icon-friendica); }
.egst-icons-brand .platform-rss .platform-icon svg { color: var(--egst-icon-rss); }
.egst-icons-brand .egst-label-rss .platform-icon-small svg { color: var(--egst-chip-icon-rss); }
.egst-icons-brand .platform-listenbrainz .platform-icon svg { color: var(--egst-icon-listenbrainz); }
.egst-icons-brand .egst-label-listenbrainz .platform-icon-small svg { color: var(--egst-chip-icon-listenbrainz); }

/* Software rilevato via nodeinfo: la piattaforma resta "mastodon" per i
   filtri, ma Pleroma e Akkoma hanno icona e colore propri. Stessa
   specificita' delle regole per slug qui sopra, quindi contano perche'
   vengono dopo. */
.egst-icons-brand .egst-sw-pleroma .platform-icon svg,
.egst-icons-brand .egst-sw-akkoma .platform-icon svg { color: var(--egst-icon-pleroma); }
.egst-icons-brand label.egst-sw-pleroma .platform-icon-small svg,
.egst-icons-brand label.egst-sw-akkoma .platform-icon-small svg { color: var(--egst-chip-icon-pleroma); }

/* Stile "un solo colore": le icone prendono il colore del testo della
   superficie su cui stanno, quindi vanno in contrasto da sole. */
.egst-icons-mono .platform-icon svg {
    color: var(--egst-icon-mono);
}

.egst-icons-mono .platform-icon-small svg {
    color: var(--egst-chip-icon-mono);
}

/* ==============================================
   RESPONSIVE - MOBILE
   ============================================== */

/* ==============================================
   BARRA DEI FILTRI A SCOMPARSA
   Una checkbox nascosta, fuori dalla barra come quelle dei filtri: il titolo
   e' la sua etichetta. Aperta, la barra e' identica a quella visibile (anche
   compatta su una riga); chiusa, si riduce a un pulsante. Niente <details>:
   il browser ne racchiude il contenuto in un blocco, che va sempre a capo.
   ============================================== */

.egst-filters-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.egst-filters-heading {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--egst-filters-title);
}

.egst-filters-toggle-label::after {
    content: "";
    margin-left: 4px;
    border-left: 6px solid var(--egst-filters-title);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform 0.15s;
}

.egst-filters-toggle:checked ~ .egst-filters-collapsible .egst-filters-toggle-label::after {
    transform: rotate(90deg);
}

.egst-filters-toggle:focus-visible ~ .egst-filters-collapsible .egst-filters-toggle-label {
    outline: 2px solid var(--egst-chip-brand);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Chiusa: un pulsante largo quanto il titolo, stessa superficie della barra. */
.egst-filters-toggle:not(:checked) ~ .egst-filters-collapsible {
    width: fit-content;
    max-width: 100%;
    padding: 8px 14px;
    border-radius: 999px;
    justify-self: start;
}

.egst-filters-toggle:not(:checked) ~ .egst-filters-collapsible .filters-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.egst-filters-toggle:not(:checked) ~ .egst-filters-collapsible .filters-checkboxes {
    display: none;
}

/* ==============================================
   LAYOUT A GRIGLIA
   Il contenitore stesso diventa la griglia: checkbox, barra dei filtri e
   schede sono fratelli, come vogliono i filtri CSS. Una scheda filtrata ha
   display:none, esce dalla griglia e le altre si ricompattano da sole.
   Ordine per righe: la piu' recente in alto a sinistra.
   ============================================== */

.eg-social-timeline.egst-layout-grid {
    --egst-item-display: flex;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 20px;
    align-items: stretch;
}

.egst-layout-grid .eg-timeline-filters,
.egst-layout-grid .eg-social-timeline-empty {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.egst-layout-grid .timeline-item {
    flex-direction: column;
    margin-bottom: 0;
    min-width: 0;
}

.egst-layout-grid .timeline-content {
    flex: 1 1 auto;
}

/* Il footer resta in fondo: le schede di una riga hanno la stessa altezza. */
.egst-layout-grid .timeline-footer {
    margin-top: auto;
}

/* Immagini 16:9 ritagliate, cosi' le righe restano ordinate anche con foto
   verticali. Nell'elenco restano intere. */
.egst-layout-grid .post-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (max-width: 768px) {
    .eg-social-timeline {
        margin: 20px auto;
    }

    .eg-social-timeline.egst-has-canvas {
        padding: 16px;
    }

    .eg-timeline-filters {
        padding: 12px;
    }

    .filters-header h3 {
        font-size: 0.9em;
    }

    .filters-checkboxes {
        gap: 8px;
    }

    .filter-checkbox-label {
        padding: 5px 10px;
        font-size: 0.8em;
    }

    .filter-checkbox-label::before {
        width: 14px;
        height: 14px;
        font-size: 10px;
    }

    .platform-icon-small {
        width: 14px;
        height: 14px;
    }

    .platform-icon-small svg {
        width: 14px;
        height: 14px;
    }

    .egst-filters-compact .filter-checkbox-label {
        width: 34px;
        height: 34px;
    }

    .egst-filters-compact .platform-icon-small,
    .egst-filters-compact .platform-icon-small svg {
        width: 20px;
        height: 20px;
    }

    .timeline-item {
        padding: 16px;
        margin-bottom: 16px;
    }

    .timeline-header {
        gap: 8px;
    }

    .platform-name {
        font-size: 0.9em;
    }

    .post-date {
        font-size: 0.8em;
    }

    .post-text {
        font-size: 0.9em;
    }

    .timeline-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .post-stats {
        gap: 12px;
    }

    .stat-item {
        font-size: 0.8em;
    }

    .view-original {
        font-size: 0.85em;
    }
}