/*
 * public/assets/css/components.css | Ultima modifica: 07/05/2026 | v1.0
 *
 * PURPOSE:
 *   Reusable UI components shared across all page types.
 *   Includes: cards, pills/badges, image placeholders, meta bars,
 *   sidebar blocks, course promotion boxes, buttons, tags cloud,
 *   section headings, share bar.
 *
 * DEPENDS ON: base.css (CSS variables)
 *
 * USAGE:
 *   Components are used by home.css, article.css, category.css.
 *   Never add page-specific layout here — that belongs in the page CSS file.
 *
 * CHANGELOG:
 *   - 07/05/2026 v1.0: initial implementation
 */

/* =============================================================================
   BLOCK: Card
   White surface with border and rounded corners.
   Used for article previews, sidebar boxes, and course cards.
   ============================================================================= */
.card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Card with internal padding (for text-only cards like sidebar boxes) */
.card--padded {
    padding: var(--space-md);
}

/* =============================================================================
   BLOCK: Article card — vertical (image top, text bottom)
   Used in: home hot-this-week, home more-news, category grid.
   ============================================================================= */
.article-card {
    display: flex;
    flex-direction: column;
}

.article-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Image placeholder — shown when no cover image is set */
.article-card__image-ph {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-card__image-ph i {
    font-size: 30px;
    color: var(--color-text-muted);
}

/* Variante immagine del placeholder (icona-qualifica.png, nera su
   trasparente): opacita' ridotta per pareggiare la resa "muted"
   delle icone font */
.article-card__image-ph .image-ph__icon {
    height: 34px;
    width: auto;
    opacity: .45;
}

.article-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.article-card__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.article-card__title:hover {
    color: var(--color-accent);
}

.article-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-tight);
}

/* =============================================================================
   BLOCK: Article card — horizontal (image left, text right)
   Used in: home top-news main card, category featured article.
   ============================================================================= */
.article-card--horizontal {
    flex-direction: row;
    align-items: stretch;
}

.article-card--horizontal .article-card__image,
.article-card--horizontal .article-card__image-ph {
    width: 160px;
    min-width: 160px;
    aspect-ratio: unset;
    height: 100%;
    flex-shrink: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Large horizontal card used as category page featured article */
.article-card--featured {
    border: 2px solid var(--color-accent-border);
}

/* =============================================================================
   BLOCK: Article card — mini (thumbnail + title, no excerpt)
   Used in: sidebar popular/trending lists, home top-news list column.
   ============================================================================= */
.article-card--mini {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
}

.article-card--mini .article-card__image-ph {
    width: 44px;
    min-width: 44px;
    height: 36px;
    aspect-ratio: unset;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.article-card--mini .article-card__image-ph i {
    font-size: 16px;
}

.article-card--mini .article-card__title {
    font-size: var(--font-size-sm);
}

/* Mini cards with a real thumbnail */
.article-card--mini-thumb {
    align-items: flex-start;
}

.article-card--mini-thumb .article-card__thumb,
.article-card--mini-thumb .article-card__thumb--fallback {
    width: 56px;
    min-width: 56px;
    height: 56px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    object-fit: cover;
}

.article-card--mini-thumb .article-card__thumb--fallback {
    background: var(--color-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.article-card--mini-thumb .article-card__thumb--fallback i {
    font-size: 22px;
}

.article-card--mini-thumb .article-card__body {
    padding: 0;
    gap: 4px;
    min-width: 0;
}

.article-card--mini-thumb .article-card__title {
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.article-card--mini-thumb .article-card__excerpt {
    font-size: 12px;
}

/* =============================================================================
   BLOCK: Pill / badge
   Category label, tag label, status indicator.
   Colors: accent-light (default), accent-bg (active filter).
   ============================================================================= */
.pill {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Default: light blue — category labels on cards */
.pill--accent {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
}

/* Solid blue — active filter button */
.pill--solid {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Neutral — inactive filter button */
.pill--neutral {
    background: var(--color-bg-placeholder);
    color: var(--color-text-secondary);
}

/* =============================================================================
   BLOCK: Meta bar
   Author, date, read time row below article title or on card footer.
   ============================================================================= */
.meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.meta i {
    font-size: 14px;
}

.meta__dot {
    font-size: 10px;
}

/* Author avatar circle */
.meta__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    flex-shrink: 0;
    overflow: hidden;
}

/* Logo CEFA rimpicciolito dentro il cerchio avatar (byline "Redazione") */
.meta__avatar-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* =============================================================================
   BLOCK: Section heading
   Uppercase label with blue bottom border, used above content sections.
   Example: "Ultime notizie", "Guide pratiche", "Articoli correlati"
   ============================================================================= */
.section-heading {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: var(--space-md);
}

/* =============================================================================
   BLOCK: Sidebar section title
   Smaller version of section-heading, used inside sidebar cards.
   ============================================================================= */
.sidebar-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-accent);
}

/* =============================================================================
   BLOCK: Sidebar course promotion box
   Blue-tinted box promoting a partner course.
   Used in: sidebar (all page types), article inline (inside body).
   ============================================================================= */
.course-box {
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.course-box__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
}

.course-box__image-ph {
    width: 100%;
    height: 48px;
    background: var(--color-accent-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
}

.course-box__image-ph i {
    font-size: 22px;
    color: var(--color-accent);
}

.course-box__name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-accent-dark);
    margin-bottom: 2px;
}

.course-box__provider {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

/* Inline variant — horizontal layout inside article body */
.course-box--inline {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin: var(--space-md) 0;
}

.course-box--inline .course-box__image-ph {
    width: 60px;
    min-width: 60px;
    height: 50px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.course-box--inline .course-box__content {
    flex: 1;
}

/* CTA button inside course box */
.course-box__btn {
    display: block;
    width: 100%;
    background: var(--color-accent);
    color: var(--color-white);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 6px;
    border-radius: var(--radius-md);
    transition: background .2s;
    cursor: pointer;
}

.course-box__btn:hover {
    background: var(--color-accent-dark);
    color: var(--color-white);
}

.course-box--image-ad {
    display: block;
    padding: 0;
    overflow: hidden;
    border-color: var(--color-accent-border);
    background: var(--color-bg-card);
}

.course-box--image-ad img {
    width: 100%;
    display: block;
}

.course-box--image-ad:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 22px rgba(24, 95, 165, .16);
}

/* Inline variant button — smaller */
.course-box--inline .course-box__btn {
    display: inline-block;
    width: auto;
    padding: 4px 12px;
}

/* -----------------------------------------------------------------------------
   Box Promo (pubblicità in sidebar). Card "Pubblicità" con logo, titolo,
   descrizione e CTA, nella palette blu del sito. Link sempre target="_blank".
   ----------------------------------------------------------------------------- */
.promo-box {
    background: var(--color-bg-card, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
}

.promo-box__label {
    text-align: center;
    color: var(--color-accent, #185FA5);
    font-weight: 700;
    font-size: var(--font-size-sm, 14px);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-accent-border, #B5D4F4);
    margin-bottom: 14px;
}

.promo-box__card {
    background: var(--color-accent-light, #E6F1FB);
    border: 1px solid var(--color-accent-border, #B5D4F4);
    border-radius: var(--radius-lg, 12px);
    padding: 18px;
    text-align: center;
}

.promo-box__logo {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 0 14px;
}

.promo-box__title {
    color: var(--color-accent-dark, #0C447C);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 6px;
}

.promo-box__desc {
    color: var(--color-text-muted, #6b7280);
    font-size: var(--font-size-sm, 14px);
    line-height: 1.55;
    margin-bottom: 16px;
}

.promo-box__btn {
    display: block;
    width: 100%;
    background: #f28c1f;
    color: var(--color-white, #ffffff);
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 16px;
    border-radius: 8px;
    transition: background .2s;
}

.promo-box__btn:hover {
    background: #d8760f;
    color: var(--color-white, #ffffff);
}

/* Variante card interamente cliccabile (usata dai banner: tutto il box e' un link). */
.promo-box__card--link {
    display: block;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.promo-box__card--link:hover {
    border-color: #f28c1f;
    box-shadow: 0 8px 22px rgba(24, 95, 165, .12);
}

/* Variante inline (dentro il corpo dell'articolo): card centrata e non a tutta
   larghezza, per non spezzare troppo la lettura. */
.promo-box--inline {
    max-width: 380px;
    margin: 24px auto;
}

/* -----------------------------------------------------------------------------
   Banner consenso cookie. Fisso in basso, mostrato via JS solo se l'utente non
   ha ancora scelto. GA4 parte solo dopo "Accetta".
   ----------------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid var(--color-accent-border, #B5D4F4);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 34px rgba(8, 35, 58, .20);
    padding: 16px 18px;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__text {
    flex: 1 1 320px;
    color: var(--color-text, #1f2937);
    font-size: 14px;
    line-height: 1.55;
}

.cookie-banner__text a {
    color: var(--color-accent, #185FA5);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.cookie-banner__btn {
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.cookie-banner__btn--accept {
    background: var(--color-accent, #185FA5);
    color: #ffffff;
}

.cookie-banner__btn--accept:hover {
    background: var(--color-accent-dark, #0C447C);
}

.cookie-banner__btn--ghost {
    background: #ffffff;
    color: var(--color-accent-dark, #0C447C);
    border-color: var(--color-accent-border, #B5D4F4);
}

.cookie-banner__btn--ghost:hover {
    background: var(--color-accent-light, #E6F1FB);
}

@media (max-width: 560px) {
    .cookie-banner {
        left: 8px;
        right: 8px;
        bottom: 8px;
        flex-direction: column;
        align-items: stretch;
    }
    .cookie-banner__actions {
        justify-content: flex-end;
    }
}

/* =============================================================================
   BLOCK: Trending list
   Numbered list used in sidebar and home trending section.
   ============================================================================= */
.trending-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.trending-list__item {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
}

.trending-list__number {
    color: var(--color-accent);
    font-weight: 600;
    font-size: var(--font-size-md);
    flex-shrink: 0;
    min-width: 20px;
    line-height: 1.4;
}

.trending-list__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.trending-list__title:hover {
    color: var(--color-accent);
}

/* =============================================================================
   BLOCK: Tags cloud
   Used in: article footer, sidebar, category sidebar.
   ============================================================================= */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* =============================================================================
   BLOCK: Share bar
   Social share buttons row. Used at top of article card.
   ============================================================================= */
.share-bar {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.share-bar__btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}

.share-bar__btn:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent-border);
    color: var(--color-accent-dark);
}

/* =============================================================================
   BLOCK: Newsletter widget
   Compact email signup used in sidebar.
   ============================================================================= */
.newsletter-widget {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.newsletter-widget__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.newsletter-widget__input {
    width: 100%;
    font-size: var(--font-size-sm);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--color-border-medium);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .2s;
}

.newsletter-widget__input:focus {
    border-color: var(--color-accent);
}

.newsletter-widget__btn {
    width: 100%;
    background: var(--color-accent);
    color: var(--color-white);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 6px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .2s;
}

.newsletter-widget__btn:hover {
    background: var(--color-accent-dark);
}

/* =============================================================================
   BLOCK: Filter tabs
   Horizontal scrollable filter row. Used in home top-news and category sort.
   ============================================================================= */
.filter-tabs {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.filter-tabs__item {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s, color .15s;
    border: 0.5px solid transparent;
}

.filter-tabs__item--active {
    background: var(--color-accent);
    color: var(--color-white);
}

.filter-tabs__item--inactive {
    background: var(--color-bg-placeholder);
    color: var(--color-text-secondary);
}

.filter-tabs__item--inactive:hover {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-color: var(--color-accent-border);
}

/* =============================================================================
   BLOCK: Flash area soci
   Riquadri di conferma/errore usati nelle pagine soci (member.css le carica)
   e nella sezione commenti degli articoli (article.css). Stanno qui perche'
   components.css e' incluso ovunque.
   ============================================================================= */
.member-flash {
    padding: 10px 14px;
    border-radius: 6px;
    margin: 12px 0;
    font-size: var(--font-size-sm);
}
.member-flash ul { margin: 0; padding-left: 18px; }
.member-flash--success { background: #e6f4ea; color: #1a7f37; border: 1px solid #b7e1c3; }
.member-flash--error   { background: #fdecea; color: #c62828; border: 1px solid #f5c6c3; }
.member-flash--info,
.member-flash--warning { background: var(--color-accent-light); color: var(--color-accent-dark); border: 1px solid var(--color-accent-border); }