/* Homepress — news/gossip homepage per GeneratePress.
   Namespace hp- per evitare collisioni con altri plugin/tema.
   Colori base: --hp-accent (blu GP) + --hp-hot magenta per mood caldo.
   Colori per-sezione sovrascrivibili via CSS vars inline sul <section>. */

:root {
    --hp-accent: var(--accent, #1e73be);
    --hp-hot: #e91e63;
    --hp-hot-soft: #ffe3ec;
    --hp-text: #1a1a1f;
    --hp-muted: #4b5563; /* gray-600, WCAG AA-compliant su tutti i bg chiari (>=7:1) */
    --hp-card-bg: #ffffff;
    --hp-card-border: #eceef2;
    --hp-shadow: 0 1px 2px rgba(17,24,39,.04), 0 4px 12px rgba(17,24,39,.06);
    --hp-shadow-hover: 0 2px 6px rgba(17,24,39,.06), 0 14px 28px rgba(17,24,39,.10);
    --hp-radius: 12px;
}

/* Root container */
.hp-root {
    max-width: var(--hp-max, 1100px);
    margin: 0 auto;
    padding: 18px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--hp-gap, 20px) * 1.8);
}
.entry-content .hp-root { margin: 0 auto; }

/* ================== HERO ================== */
.hp-hero {
    position: relative;
    border-radius: var(--hp-radius);
    overflow: hidden;
    box-shadow: var(--hp-shadow);
    background: #000;
}
.hp-hero-link {
    display: block; color: #fff; text-decoration: none;
    position: relative;
}
.hp-hero-link:hover .hp-hero-img { transform: scale(1.02); }
.hp-hero-img {
    display: block; width: 100%; height: auto; aspect-ratio: 16/9;
    object-fit: cover; transition: transform .6s ease;
}
.hp-hero-aspect-16-9 .hp-hero-img { aspect-ratio: 16/9; }
.hp-hero-aspect-21-9 .hp-hero-img { aspect-ratio: 21/9; }
.hp-hero-aspect-4-3  .hp-hero-img { aspect-ratio: 4/3;  }
.hp-hero-inner {
    position: absolute; inset: auto 0 0 0;
    padding: clamp(16px, 3vw, 32px);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.82) 100%);
    display: flex; flex-direction: column; gap: 10px;
}
.hp-hero-title {
    font-size: clamp(20px, 3.4vw, 34px);
    font-weight: 900; line-height: 1.15; margin: 0;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
    letter-spacing: -.01em;
}
.hp-hero-desc {
    font-size: clamp(14px, 1.6vw, 16px); color: rgba(255,255,255,.92);
    margin: 0; line-height: 1.4; max-width: 70ch;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* ================== SECTION ================== */
.hp-section {
    display: flex; flex-direction: column;
    gap: calc(var(--hp-gap, 20px) * .8);
    background: var(--hp-section-bg, transparent);
    /* quando ha sfondo custom aggiunge padding/radius per staccare dallo sfondo pagina */
}
.hp-section.hp-has-custom-style:not([style*="--hp-section-bg:"]) {
    /* sicurezza: se style inline non include bg, non aggiungere padding */
}
.hp-section[style*="--hp-section-bg"] {
    padding: calc(var(--hp-gap, 20px) * 1.2);
    border-radius: var(--hp-radius);
}
.hp-section-title {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 800;
    margin: 0; padding-bottom: 10px;
    color: var(--hp-section-text, var(--hp-text));
    text-transform: uppercase;
    letter-spacing: .02em;
    position: relative;
    display: inline-block;
}
.hp-section-title::after {
    content: ''; position: absolute;
    left: 0; bottom: 0;
    width: 44px; height: 4px;
    background: var(--hp-section-accent, var(--hp-hot));
    border-radius: 2px;
}

/* ================== GRID ================== */
.hp-grid {
    display: grid; gap: var(--hp-gap, 20px);
    grid-template-columns: 1fr;
}

/* Auto-fit: il numero colonne lo passa il PHP via --hp-cols (min(count,4)).
   Su mobile resta 1 col; tablet sale a 2; desktop al valore calcolato. */
.hp-layout-auto .hp-grid {
    grid-template-columns: 1fr;
}

/* Layout forzati */
.hp-layout-grid-2 .hp-grid  { grid-template-columns: 1fr; }
.hp-layout-grid-3 .hp-grid  { grid-template-columns: 1fr; }
.hp-layout-grid-4 .hp-grid  { grid-template-columns: 1fr; }
.hp-layout-list .hp-grid    { grid-template-columns: 1fr; gap: calc(var(--hp-gap, 20px) * .6); }
.hp-layout-compact .hp-grid { grid-template-columns: 1fr; gap: calc(var(--hp-gap, 20px) * .6); }

@media (min-width: 640px) {
    .hp-layout-auto .hp-grid    { grid-template-columns: repeat(min(var(--hp-cols, 4), 2), 1fr); }
    .hp-layout-grid-2 .hp-grid  { grid-template-columns: repeat(2, 1fr); }
    .hp-layout-grid-3 .hp-grid  { grid-template-columns: repeat(2, 1fr); }
    .hp-layout-grid-4 .hp-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .hp-layout-auto .hp-grid    { grid-template-columns: repeat(var(--hp-cols, 4), 1fr); }
    .hp-layout-grid-3 .hp-grid  { grid-template-columns: repeat(3, 1fr); }
    .hp-layout-grid-4 .hp-grid  { grid-template-columns: repeat(4, 1fr); }
}

/* Auto-fit count=1: mostra la card piena a tutta larghezza con immagine grande
   (come un mini-hero non-overlay) */
.hp-layout-auto[data-count="1"] .hp-card-img { aspect-ratio: 16/9; }

/* ================== CARD ================== */
.hp-card {
    background: var(--hp-card-bg);
    border: 1px solid var(--hp-card-border);
    border-radius: var(--hp-radius);
    overflow: hidden;
    box-shadow: var(--hp-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
}
.hp-card:hover { transform: translateY(-3px); box-shadow: var(--hp-shadow-hover); }
.hp-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.hp-card-img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16/9; object-fit: cover;
    background: #f1f2f5;
}
.hp-card-body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column;
    gap: 8px;
}
.hp-card-title {
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 700; line-height: 1.3; margin: 0;
    color: var(--hp-text);
    letter-spacing: -.005em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Hover: niente color change (non funziona bene se l'accent è un tono chiaro
   su card chiare). Meglio un underline colorato: feedback visivo senza
   compromettere la leggibilità del testo. */
.hp-card:hover .hp-card-title {
    text-decoration: underline;
    text-decoration-color: var(--hp-section-accent, var(--hp-hot));
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* compact: image a sinistra */
.hp-card-compact { flex-direction: row; }
.hp-card-compact .hp-card-link { flex-direction: row; align-items: stretch; }
.hp-card-compact .hp-card-img  { width: 140px; aspect-ratio: 1; flex-shrink: 0; }
.hp-card-compact .hp-card-body { padding: 10px 14px; justify-content: center; }
.hp-card-compact .hp-card-title { font-size: 15px; -webkit-line-clamp: 2; }
@media (min-width: 640px) {
    .hp-card-compact .hp-card-img { width: 180px; }
}

/* ================== PAGINATION ================== */
/* Alta specificità + !important mirati per vincere su rules del tema:
   GP applica list-style a `.entry-content ul` e margin che rovinerebbero la row. */
nav.hp-pagination {
    margin: calc(var(--hp-gap, 20px) * 1.6) 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    clear: both;
}
nav.hp-pagination ul.page-numbers {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
nav.hp-pagination ul.page-numbers::before,
nav.hp-pagination ul.page-numbers::after { content: none !important; }
nav.hp-pagination ul.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none;
    display: inline-flex;
}
nav.hp-pagination ul.page-numbers li::marker,
nav.hp-pagination ul.page-numbers li::before { content: none !important; }
nav.hp-pagination ul.page-numbers li > a,
nav.hp-pagination ul.page-numbers li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--hp-card-bg);
    border: 1px solid var(--hp-card-border);
    color: var(--hp-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    box-sizing: border-box;
}
nav.hp-pagination ul.page-numbers li > a:hover {
    background: var(--hp-hot-soft);
    border-color: var(--hp-hot);
    color: var(--hp-hot);
}
nav.hp-pagination ul.page-numbers li > span.current {
    background: var(--hp-hot);
    border-color: var(--hp-hot);
    color: #fff;
}
nav.hp-pagination ul.page-numbers li > span.dots {
    background: transparent;
    border-color: transparent;
    color: var(--hp-muted);
}

/* ================== BADGE ================== */
.hp-badge {
    display: inline-block; align-self: flex-start;
    font-size: 10px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 4px;
    color: var(--hp-section-text, #fff);
    background: var(--hp-section-accent, var(--hp-hot));
    text-decoration: none;
    line-height: 1;
}
.hp-badge-cat { margin-bottom: 4px; }
/* Colori badge: eredità omogenea da `--hp-section-accent` (sfondo) e `--hp-section-text`
   (testo). Scope = sezione home/archive/author. Fallback: `--hp-hot` magenta + bianco.
   Niente override per-slug: i colori scelti in Customizer sono l'unica sorgente di verità. */

/* ================== META ================== */
.hp-meta {
    font-size: 12px; color: var(--hp-muted);
    display: inline-flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.hp-meta-sep    { opacity: .5; }
.hp-meta-author { font-weight: 600; color: var(--hp-text); opacity: .85; }
.hp-hero .hp-meta { color: rgba(255,255,255,.82); }
.hp-hero .hp-meta-author { color: #fff; }

/* ================== RESPONSIVE TWEAKS ================== */
@media (max-width: 520px) {
    .hp-root { padding: 12px 12px 28px; }
    .hp-section-title { font-size: 18px; }
}

/* HERO mobile: testo sotto l'immagine, no overlay. */
@media (max-width: 640px) {
    .hp-hero {
        background: transparent;
        box-shadow: var(--hp-shadow);
        border-radius: var(--hp-radius);
        overflow: hidden;
    }
    .hp-hero-link { color: inherit; }
    .hp-hero-img { aspect-ratio: 16/9; border-radius: 0; }
    .hp-hero-inner {
        position: static;
        padding: 14px 16px 18px;
        background: var(--hp-card-bg);
        border-top: 1px solid var(--hp-card-border);
        gap: 8px;
    }
    .hp-hero-title {
        color: var(--hp-text);
        text-shadow: none;
        font-size: 20px;
        font-weight: 800;
    }
    .hp-hero-desc {
        color: var(--hp-muted);
        text-shadow: none;
        font-size: 14px;
    }
    .hp-hero .hp-meta { color: var(--hp-muted); }
    .hp-hero .hp-meta-author { color: var(--hp-text); }
    .hp-hero-link:hover .hp-hero-img { transform: none; }
}

/* ================== SINGLE POST (v0.4.0) ================== */
/* Slot intercambiabili: titolo / meta (autore+data) / immagine featured.
   Ordine controllato da CSS vars iniettate dal PHP:
     --hp-post-title-order / --hp-post-meta-order / --hp-post-image-order */

.hp-single .inside-article {
    display: flex;
    flex-direction: column;
}
.hp-single .inside-article > .hp-breadcrumb      { order: 1; }
.hp-single .inside-article > .hp-post-cap        { order: 5; }
.hp-single .inside-article > .entry-header       { order: var(--hp-post-title-order, 20); }
.hp-single .inside-article > .hp-post-meta       { order: var(--hp-post-meta-order, 30); }
.hp-single .inside-article > .featured-image,
.hp-single .inside-article > .post-image         { order: var(--hp-post-image-order, 40); }
.hp-single .inside-article > .entry-content      { order: 60; }
.hp-single .inside-article > .entry-meta,
.hp-single .inside-article > footer.entry-meta   { order: 80; }

/* Cappello cat/tag: piccola riga editoriale sopra il titolo. */
.hp-post-cap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    align-items: center;
}
.hp-post-cap .hp-badge,
.hp-post-cap .hp-pill-tag {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--hp-radius);
}
.hp-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--hp-radius);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: #f3f4f6;
    color: var(--hp-text);
    line-height: 1;
    transition: background .15s ease;
}
.hp-pill:hover { background: #e5e7eb; }
.hp-pill-tag { color: var(--hp-muted); }

/* Meta box (autore + data) come sibling indipendente. */
.hp-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.hp-post-meta-avatar img {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    object-fit: cover;
    display: block;
}
.hp-post-meta-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.9em;
    color: var(--hp-muted);
}
.hp-post-meta-info a { text-decoration: none; color: var(--hp-text); font-weight: 600; }
.hp-post-meta-info a:hover { text-decoration: underline; }
.hp-post-meta-sep { opacity: .5; }
.hp-post-meta-date { color: var(--hp-muted); font-size: 0.95em; }

/* Fondo articolo: terms (cat/tag footer) + bio + short bio + disclaimer */
.hp-post-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 12px;
    padding: 14px 0;
    border-top: 1px solid var(--hp-card-border);
    border-bottom: 1px solid var(--hp-card-border);
}
.hp-post-foot-cat,
.hp-post-foot-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.hp-post-foot-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hp-muted);
    margin-right: 4px;
}
.hp-pill-tag-prefix {
    display: inline-flex;
    align-items: center;
    color: var(--hp-muted);
    font-weight: 700;
    margin-right: 2px;
    user-select: none;
}

/* Breadcrumb Homepress nativo */
.hp-breadcrumb {
    font-size: 0.85em;
    line-height: 1.5;
    padding: 10px 16px;
    margin: 0 0 16px;
    border-radius: var(--hp-radius);
    background: #f5f5f4;
    color: #57534e;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.hp-breadcrumb-link {
    color: #44403c;
    text-decoration: none;
}
.hp-breadcrumb-link:hover { text-decoration: underline; }
.hp-breadcrumb-sep { opacity: .6; user-select: none; }
.hp-breadcrumb-current { font-weight: 600; color: var(--hp-text); opacity: .9; }

/* Breadcrumb stile testuale: niente box, riga sotto discreta. */
.hp-breadcrumb.hp-breadcrumb-plain {
    background: transparent;
    border-radius: 0;
    padding: 0 0 8px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--hp-card-border);
    font-size: 0.82em;
}

/* Short bio fondo articolo: avatar + label "Scritto da" + nome + testo. */
.hp-post-short-bio {
    background: #f0f6fc;
    border-left: 4px solid var(--hp-hot);
    border-radius: 0 var(--hp-radius) var(--hp-radius) 0;
    padding: 16px 20px;
    margin: 28px 0 12px;
    font-size: 0.92em;
    color: var(--hp-text);
    line-height: 1.6;
}
.hp-post-short-bio-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.hp-post-short-bio-avatar img {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: block;
}
.hp-post-short-bio-info { display: flex; flex-direction: column; gap: 2px; }
.hp-post-short-bio-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hp-muted);
    font-weight: 700;
}
.hp-post-short-bio-name {
    font-size: 1.02em;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}
.hp-post-short-bio-name:hover { text-decoration: underline; }
.hp-post-short-bio-text p { margin: 0 0 0.4em; }
.hp-post-short-bio-text p:last-child { margin-bottom: 0; }

/* Disclaimer affiliazioni: accento più neutro, tipografia più sobria. */
.hp-post-disclaimer {
    background: #fff8e6;
    border-left: 4px solid #d97706;
    border-radius: 0 var(--hp-radius) var(--hp-radius) 0;
    padding: 14px 18px;
    margin: 16px 0 12px;
    font-size: 0.85em;
    color: #78350f;
    line-height: 1.6;
}
.hp-post-disclaimer p { margin: 0; }
.hp-post-disclaimer p + p { margin-top: 4px; }
.hp-post-disclaimer a { color: inherit; font-weight: 600; }

/* Responsive: su mobile bio si verticalizza. */
@media (max-width: 600px) {
    .hp-post-short-bio { padding: 14px 16px; }
    .hp-post-short-bio-head { gap: 10px; }
    .hp-post-short-bio-avatar img { width: 40px; height: 40px; }
}