/**
 * sf-components.css — i mattoni condivisi del sito
 *
 * Card, valutazioni, bottoni, spazi pubblicitari. Ogni sezione — risorse,
 * eventi, annunci, prodotti, articoli, gruppi, piloti, negozi — usa questi.
 * Niente colori letterali qui dentro: tutto viene da sf-design-tokens.css.
 *
 * Markup: template-parts/card.php · Si guarda su /?sf-styleguide=1
 *
 * @since 2026-08-07 — Design System F3
 */

/* =========================================================================
   Griglia degli archivi — la stessa ovunque, così gli spazi pubblicitari
   occupano una cella senza bisogno di un layout proprio.
   ========================================================================= */
.sf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
}

/* Quando la griglia È una lista — WooCommerce e BuddyPress avvolgono i loro
   cicli in <ul> e noi teniamo il loro contenitore invece di sostituirlo. */
ul.sf-grid { list-style: none; margin: 0; padding: 0; }

/* WooCommerce impagina con `.woocommerce ul.products li.product` — due classi
   più un elemento. Una singola `.sf-grid` perderebbe di specificità e la nostra
   griglia non si applicherebbe: qui la si pareggia di proposito, invece di
   sperare nell'ordine di caricamento dei fogli. */
.woocommerce ul.products.sf-grid,
.woocommerce-page ul.products.sf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
}
/* Le nostre card non portano la classe `product`, quindi le regole di larghezza
   di Woo (float:left; width:22.05%) non le toccano. Questo le azzera comunque,
   per il caso in cui un plugin gliela aggiunga. */
.woocommerce ul.products.sf-grid > .sf-card,
.woocommerce-page ul.products.sf-grid > .sf-card {
    width: auto;
    float: none;
    margin: 0;
}

/* =========================================================================
   Card
   ========================================================================= */
.sf-card {
    background: var(--sf-bg-surface);
    border: 1px solid var(--sf-border-color);
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.sf-card:hover {
    box-shadow: var(--sf-shadow-hover);
    border-color: var(--sf-border-strong);
    transform: translateY(-2px);
}

.sf-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--sf-bg-placeholder);
    overflow: hidden;
}
.sf-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.sf-card__ribbon {
    position: absolute; top: 10px; left: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
    background: var(--sf-brand-red); color: #fff;
}

/* Il cuoricino sta sempre qui, su ogni tipo di contenuto. */
.sf-card__fav { position: absolute; top: 8px; right: 8px; z-index: 2; }

.sf-card__body {
    padding: 15px;
    display: flex; flex-direction: column;
    flex: 1;               /* i piedi restano in fondo anche con testi corti */
    gap: 6px;
}

.sf-card__eyebrow {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--sf-brand-red);
    margin: 0;
}

.sf-card__title {
    font-family: var(--sf-font-heading);
    font-size: 16px; font-weight: 600; line-height: 1.3;
    margin: 0; text-wrap: balance;
}
.sf-card__title a { color: inherit; text-decoration: none; }
.sf-card__title a:hover { color: var(--sf-link); }

.sf-card__excerpt {
    font-size: 14px; line-height: 1.5;
    color: var(--sf-text-secondary);
    margin: 0;
}

.sf-card__foot {
    font-family: var(--sf-font-secondary);
    font-size: 12px; color: var(--sf-text-muted);
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: auto;      /* incollato in fondo: le card di una riga si allineano */
    padding-top: 6px;
}
.sf-card__foot--split { justify-content: space-between; align-items: baseline; }

.sf-card__price {
    font-family: var(--sf-font-body);
    font-size: 17px; font-weight: 700;
    color: var(--sf-text-primary);
    font-variant-numeric: tabular-nums;
}
.sf-card__price .was {
    font-size: 13px; font-weight: 400;
    color: var(--sf-text-muted);
    text-decoration: line-through;
    margin-left: 6px;
}

.sf-card__action { margin-top: 10px; text-align: center; }

/* --- Variante persona: gruppi, piloti, negozi.
       Hanno un avatar, non un'immagine 16:9. Stesso guscio, testa diversa. --- */
.sf-card--person { text-align: center; }
.sf-card--person .sf-card__body { padding: 0 15px 16px; align-items: center; }
.sf-card--person .sf-card__foot { justify-content: center; }

.sf-card__avatar-wrap {
    position: relative;
    padding: 20px 0 12px;
    background: var(--sf-bg-sidebar);
}
.sf-card__avatar {
    width: 72px; height: 72px; margin: 0 auto;
    border-radius: 50%; overflow: hidden;
    border: 3px solid var(--sf-bg-surface);
    background: var(--sf-bg-placeholder);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: var(--sf-text-muted);
}
.sf-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sf-card--person .sf-card__title { margin-top: 12px; }
.sf-card--person .sf-card__action { width: 100%; }

/* =========================================================================
   Valutazione
   ========================================================================= */
.sf-rating { display: inline-flex; align-items: center; gap: 6px; }
.sf-rating__stars {
    color: var(--sf-rating);
    font-size: 14px; line-height: 1; letter-spacing: 1px;
}
.sf-rating__stars .is-empty { color: var(--sf-rating-empty); }
.sf-rating__score {
    font-weight: 600; color: var(--sf-text-primary);
    font-variant-numeric: tabular-nums;
}
.sf-rating__count { color: var(--sf-text-muted); }

/* =========================================================================
   Bottoni
   ========================================================================= */
.sf-btn {
    display: inline-block;
    font-family: var(--sf-font-body);
    font-size: 14px; font-weight: 600; line-height: 1.2;
    padding: 10px 19px;
    border-radius: var(--sf-radius-sm);
    border: 1px solid transparent;
    text-decoration: none; text-align: center; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sf-btn:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

.sf-btn--primary { background: var(--sf-accent); color: #fff; }
.sf-btn--primary:hover { background: var(--sf-accent-hover); color: #fff; }

.sf-btn--danger { background: var(--sf-brand-red); color: #fff; }
.sf-btn--danger:hover { background: var(--sf-brand-red-hover); color: #fff; }

/* Fondo grigio tenue: un'azione secondaria deve leggersi come tale,
   non sparire sul bianco. */
.sf-btn--ghost {
    background: var(--sf-bg-hover);
    border-color: var(--sf-border-color);
    color: var(--sf-text-primary);
}
.sf-btn--ghost:hover {
    background: var(--sf-bg-active);
    border-color: var(--sf-border-strong);
    color: var(--sf-text-primary);
}

/* =========================================================================
   Spazi pubblicitari — si mescolano alle card, ma si dichiarano sempre
   ========================================================================= */
.sf-ad {
    border: 1px dashed var(--sf-border-strong);
    border-radius: var(--sf-radius-lg);
    background: var(--sf-bg-surface);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.sf-ad__label {
    font-family: var(--sf-font-secondary);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--sf-text-muted);
    padding: 7px 12px;
    border-bottom: 1px solid var(--sf-border-color);
}
.sf-ad__slot {
    flex: 1; min-height: 150px;
    display: flex; align-items: center; justify-content: center;
    padding: 12px; text-align: center;
}
.sf-ad__slot img, .sf-ad__slot iframe { max-width: 100%; height: auto; }

/* Forma distesa: feed social e dentro gli articoli, una riga sola. */
.sf-ad--inline { flex-direction: row; align-items: stretch; margin: 24px 0; }
.sf-ad--inline .sf-ad__label {
    border-bottom: 0;
    border-right: 1px solid var(--sf-border-color);
    display: flex; align-items: center;
    writing-mode: vertical-rl; transform: rotate(180deg);
}
.sf-ad--inline .sf-ad__slot { min-height: 92px; }

@media (max-width: 560px) {
    .sf-ad--inline { flex-direction: column; }
    .sf-ad--inline .sf-ad__label {
        border-right: 0; border-bottom: 1px solid var(--sf-border-color);
        writing-mode: horizontal-tb; transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-card { transition: none; }
    .sf-card:hover { transform: none; }
}

/* =========================================================================
   Marketplace — la card prodotto ha regole sue, e sono di sostanza
   =========================================================================
   Il 16:9 va bene a una notizia o a un evento: c'è una foto d'ambiente e
   tagliarne i bordi non toglie nulla. Su un prodotto toglie il prodotto.
   Le foto e-commerce sono quadrate e centrate sull'oggetto: ritagliarle
   significa mostrarne mezzo, e chi non vede cosa compra non compra.
   ========================================================================= */

.sf-card--product .sf-card__thumb {
    aspect-ratio: 1 / 1;          /* il formato in cui le foto prodotto sono scattate */
    background: var(--sf-bg-surface);
    padding: 10px;
}
.sf-card--product .sf-card__thumb img {
    object-fit: contain;          /* si vede TUTTO l'oggetto, bordi vuoti compresi */
}

/* Il corpo respira: prezzo, valutazione e azione erano appiccicati. */
.sf-card--product .sf-card__body { gap: 10px; padding: 16px; }
.sf-card--product .sf-card__foot { gap: 14px; padding-top: 10px; }

/* Riga d'azione: valutazione a sinistra, bottone a destra.
   Il nome del negozio qui NON ci sta: i nomi variano in lunghezza e una riga a
   due estremi con un elemento elastico balla da una card all'altra. */
.sf-card--product .sf-card__action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}
.sf-card--product .sf-card__action-row .sf-card__action { margin: 0; flex: 0 0 auto; }

/* Il bottone d'acquisto prende il colore canonico dei bottoni del sito.
   WooCommerce e il tema padre gli danno il proprio: qui si vince di
   specificità, non si spera nell'ordine dei fogli. */
.sf-card--product .sf-card__action .button,
.sf-card--product .sf-card__action a.button,
.woocommerce .sf-card--product .sf-card__action a.button {
    display: inline-block;
    font-family: var(--sf-font-body);
    font-size: 14px; font-weight: 600; line-height: 1.2;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-accent);
    color: #fff;
    text-decoration: none;
    margin: 0;
    transition: background .15s;
}
.woocommerce .sf-card--product .sf-card__action a.button:hover {
    background: var(--sf-accent-hover);
    color: #fff;
}

/* Venditore: riga sua, sotto, allineata a sinistra. È provenienza, non azione.
   Arriva da WCFM già come logo + nome cliccabile: qui si colloca, non si riscrive.
   Il markup di WCFM annida wrapper su wrapper, quindi le spaziature vanno messe
   dove stanno davvero logo e link, non solo sul contenitore esterno. */
.sf-card--product .sf-card__shop {
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid var(--sf-border-color);
    font-family: var(--sf-font-secondary);
    font-size: 13px;
    min-width: 0;
}
.sf-card--product .sf-card__shop .wcfmmp_sold_by_wrapper,
.sf-card--product .sf-card__shop .wcfmmp_sold_by_container {
    display: flex;
    align-items: center;
    gap: 10px;              /* logo e nome erano appiccicati */
    min-width: 0;
}
.sf-card--product .sf-card__shop .wcfm-clearfix { display: none; }

/* Il logo va tondo, non ellittico: senza dimensioni imposte prende le
   proporzioni del file e il border-radius lo deforma. aspect-ratio più
   object-fit lo rendono quadrato prima di arrotondarlo. */
.sf-card--product .sf-card__shop img,
.sf-card--product .sf-card__shop img.wcfmmp_sold_by_logo {
    width: 34px;
    height: 34px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--sf-border-color);
    flex: 0 0 auto;
    margin: 0;
    display: block;
}

/* Il nome del negozio è un link: prende il colore dei link del sito. */
.sf-card--product .sf-card__shop a,
.woocommerce .sf-card--product .sf-card__shop a {
    color: var(--sf-link);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.sf-card--product .sf-card__shop a:hover { text-decoration: underline; }

/* L'etichetta "Store:" è svuotata all'origine col filtro wcfmmp_sold_by_label
   in functions.php: qui non serve nasconderla. */

/* WooCommerce e i temi centrano il bottone del ciclo: qui non serve, sta a destra. */
.sf-card--product .sf-card__action { text-align: right; margin-top: 0; }

/* Dopo aver svuotato l'etichetta col filtro, WCFM lascia comunque i due punti e
   gli spazi che le stavano attorno (":&nbsp;"). Si azzera il testo nudo del suo
   contenitore e lo si ripristina su logo e link, che sono i figli veri. */
.sf-card--product .sf-card__shop .wcfmmp_sold_by_container,
.sf-card--product .sf-card__shop .wcfmmp_sold_by_container * { font-size: 0; }
.sf-card--product .sf-card__shop .wcfmmp_sold_by_container a { font-size: 13px; }

/* =========================================================================
   WCFM impone il suo stile con !important, e senza rispondergli le nostre
   regole perdono in silenzio. Misurato in wcfm-style-core.css:

     .wcfmmp_sold_by_wrapper img.wcfmmp_sold_by_logo { width:25px!important }
     .wcfmmp_sold_by_wrapper a { color:#17a2b8!important }

   Il logo veniva ELLITTICO proprio per questo: 25px di larghezza imposti dal
   plugin, 34px di altezza dai nostri — due fonti diverse per la stessa forma.
   Qui si usa !important solo dove è già usato contro di noi, che è la sola
   eccezione ammessa alla regola di non usarlo.
   ========================================================================= */
.sf-card--product .sf-card__shop .wcfmmp_sold_by_wrapper img.wcfmmp_sold_by_logo {
    width: 34px !important;
    height: 34px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    vertical-align: middle !important;
    flex: 0 0 auto;
}
.sf-card--product .sf-card__shop .wcfmmp_sold_by_wrapper a {
    color: var(--sf-link) !important;
    display: inline-block !important;
}
.sf-card--product .sf-card__shop .wcfmmp_sold_by_wrapper a:hover {
    text-decoration: underline !important;
}
/* Il wrapper è width:100%;display:block nel plugin: qui serve una riga flex. */
.sf-card--product .sf-card__shop .wcfmmp_sold_by_wrapper {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: auto;
}

/* =========================================================================
   Sponsor dell'evento — venduti dall'organizzatore, invenduti alla piattaforma
   ========================================================================= */
.sf-event-sponsors { margin: 28px 0 8px; }
.sf-event-sponsors__title {
    font-family: var(--sf-font-secondary);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--sf-text-muted);
    margin: 0 0 10px;
}
.sf-event-sponsors__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.sf-event-sponsors__slot {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 84px; padding: 12px;
    background: var(--sf-bg-surface);
    border: 1px solid var(--sf-border-color);
    border-radius: var(--sf-radius);
}
.sf-event-sponsors__slot img { max-width: 100%; max-height: 60px; object-fit: contain; }
.sf-event-sponsors__name { font-weight: 600; color: var(--sf-text-primary); }

/* Lo slot della piattaforma si dichiara: chi guarda deve poter distinguere lo
   sponsor scelto dall'organizzatore dalla pubblicità che ci mettiamo noi. */
.sf-event-sponsors__slot.is-platform { border-style: dashed; }
.sf-event-sponsors__label {
    position: absolute; top: 4px; left: 8px;
    font-family: var(--sf-font-secondary);
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--sf-text-muted);
}

/* =========================================================================
   Etichette sui prodotti — il colore dice di che si tratta senza leggere
   ========================================================================= */
.sf-card__ribbon--sale { background: var(--sf-brand-red); color: #fff; }
.sf-card__ribbon--new  { background: var(--sf-accent); color: #fff; }
.sf-card__ribbon--low  { background: var(--sf-color-warning); color: var(--sf-brand-gray-900); }

/* Esaurito è l'unico che non deve attirare: grigio, non un colore che invita. */
.sf-card__ribbon--out {
    background: var(--sf-text-muted);
    color: #fff;
}
/* E la miniatura si spegne, così si capisce a colpo d'occhio che non si compra. */
.sf-card--product:has(.sf-card__ribbon--out) .sf-card__thumb img {
    filter: grayscale(1);
    opacity: .65;
}