/*
 * home.css — GlitchZone front-page (Step 6c). Caricato SOLO su is_front_page() (inc/enqueue.php).
 *
 * Estratto byte-fedele dal <style> inline di glitchzone-statico/index_v13.html (blocco hero).
 * Le classi (.hero/.meta/.article-category/.signal-stamp…) collidono di NOME con archivio
 * (listing.css) e single (single-base.css), ma NON a runtime: i tre file sono page-scoped e
 * non si caricano mai insieme (bivio 6c §3.2). I colori erano già token nello statico.
 *
 * 6c-1 = blocco HERO (1 main + 3 secondari). Griglia "Ultime Pollate" → 6c-2;
 *         banner anti-pollo/Tech-Zone + newsletter + disclaimer → 6c-3.
 *
 * Fedeltà:
 *  - @keyframes onlineBlink NON ridichiarato: è già centralizzato in components/glitch-mode.css (sempre-on).
 *  - reduced-motion NON gestito qui: la guard globale `*` di base.css spegne già tutte le animazioni.
 *  - Colore icone-meta: la home NON è una pagina-sezione (niente body.term-*) → --cat-color cadrebbe
 *    sul default (verde). L'icona-reazione prende il COLORE DELLA SUA SEZIONE via una classe sec-*
 *    sul .meta-react (front-page.php passa lo slug da glitchzone_reaction_meta); i 4 valori sono
 *    allineati a base.css. Rosa = fallback se la sezione manca. (Prima era rosa fissa "showcase", 6c-1.)
 */

/* ===== HERO LAYOUT ===== */
.hero { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 48px; }

/* HERO MAIN — bordo neon pulito (barra top ::before rosa + bordo perimetrale ::after) */
.hero-main {
    display: block; color: inherit; text-decoration: none; /* card-intera cliccabile (è un <a>, come la griglia) */
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.hero-main::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--accent); box-shadow: 0 0 15px var(--accent-glow); z-index: 4;
}
.hero-main::after {
    content: ''; position: absolute; inset: 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    z-index: 3; pointer-events: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-main:hover::after {
    border-color: var(--accent);
    box-shadow: inset 0 0 20px rgba(255, 0, 128, 0.1);
}
.hero-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px -10px rgba(0,0,0,0.6);
}

.hero-image {
    width: 100%; height: 280px; background: linear-gradient(45deg, #1a1a2e, #2d1b2e);
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.hero-image::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px);
    pointer-events: none; z-index: 1;
}
.hero-image-content {
    font-size: 5rem; z-index: 2; transition: transform 0.3s ease;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}
/* D5: copertina reale al posto dell'emoji (object-fit per non deformare) */
.hero-image img.hero-image-cover { width: 100%; height: 100%; object-fit: cover; z-index: 2; }

@keyframes soft-glitch {
    0% { clip-path: inset(0 0 0 0); transform: translate(0); filter: hue-rotate(0deg); }
    20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 1px); }
    40% { clip-path: inset(60% 0 20% 0); transform: translate(2px, -1px); filter: hue-rotate(15deg); }
    60% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); }
    80% { clip-path: inset(0 0 0 0); transform: translate(1px, 0); filter: hue-rotate(-10deg); }
    100% { clip-path: inset(0 0 0 0); transform: translate(0); filter: hue-rotate(0deg); }
}
.hero-main:hover .hero-image-content {
    transform: scale(1.05);
    animation: soft-glitch 0.5s linear;
}

.hero-content { padding: 24px; }

.hero-title {
    font-family: 'Space Mono', monospace; font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: 12px; color: var(--text-primary);
}
/* .hero-main è un <a> (card-intera cliccabile, come la griglia): il titolo non è più un link separato. */

@keyframes intermittent-glitch {
    0%, 95% { text-shadow: none; transform: translate(0); }
    96% { text-shadow: 2px 0 var(--primary), -2px 0 var(--accent); transform: translate(-2px, 0); }
    97% { text-shadow: -2px 0 var(--primary), 2px 0 var(--accent); transform: translate(2px, 0); }
    98%, 100% { text-shadow: none; transform: translate(0); }
}
.hero-title:hover { animation: intermittent-glitch 4s infinite; }

.hero-excerpt { color: var(--text-secondary); font-size: 1rem; margin-bottom: 16px; }

/* ===== META (data · reazione) ===== */
.meta { display: flex; align-items: center; gap: 16px; color: var(--text-muted-strong); font-size: 0.8rem; font-family: 'Space Mono', monospace; flex-wrap: wrap; }

/* Icone-meta: calendario allineato baseline (currentColor = muted); reazione più grande. */
.meta .icon-svg { vertical-align: -1px; margin-right: 3px; }
.meta .icon-svg svg { width: 12px; height: 12px; }
.meta .meta-react .icon-svg { vertical-align: -2px; }
.meta .meta-react .icon-svg svg { width: 14px; height: 14px; }
/* Reazione: UN solo colore (rosa brand) sulla home. La home mischia le sezioni, quindi
   il colore per-sezione qui sarebbe rumore (4 tinte sparse, senza logica per chi guarda)
   → tinta unica. La varietà resta nella FORMA dell'icona + nell'etichetta. Il colore
   per-sezione resta sugli ARCHIVI (body.term-* → --cat-color), dove un colore = una sezione. */
.meta .meta-react .icon-svg { color: var(--accent); }

/* ===== HERO SIDEBAR (3 secondari) ===== */
.hero-sidebar { display: flex; flex-direction: column; gap: 12px; }
.hero-small {
    background: var(--surface); border-radius: var(--radius-md); padding: 16px; border: 1px solid var(--border);
    transition: all 0.3s ease; position: relative; overflow: hidden;
}
.hero-small::before {
    content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--accent);
    transform: scaleY(0); transition: transform 0.3s ease;
}
.hero-small:hover::before { transform: scaleY(1); }
.hero-small:hover { border-color: var(--accent); transform: translateX(5px); box-shadow: 0 0 20px rgba(255, 0, 128, 0.1); }
.hero-small-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; line-height: 1.4; transition: color 0.3s ease; }
.hero-small-title a { color: inherit; text-decoration: none; }
.hero-small:hover .hero-small-title { color: var(--accent); }
/* .article-category (kicker "//") spostato in base.css: componente condiviso da tutte le pagine. */

/* ===== SECTION HEADER ("// Ultime …") ===== */
.section-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; }
.section-title {
    font-family: 'Space Mono', monospace; font-size: 1.25rem; font-weight: 700; color: var(--primary);
    display: flex; align-items: center; gap: 12px;
}
.section-title::before { content: '//'; color: var(--accent); }

/* ===== ARTICLE GRID (Ultime Pollate) ===== */
/* Card DEDICATA della home (bivio §3.2), dal markup statico. Resa come <a> (card intera
   cliccabile, come l'archivio): display:block + reset colore/underline sull'ancora. */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 24px; margin-bottom: 48px; }
.article-card {
    display: flex;
    flex-direction: column;
    background: var(--surface); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border);
    transition: all 0.3s ease; position: relative;
    color: inherit; text-decoration: none;
}
.article-card:hover {
    border-color: var(--primary); transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.article-image {
    width: 100%; height: 120px; flex-shrink: 0; background: linear-gradient(45deg, #1a1a2e, #252540);
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem; position: relative; overflow: hidden;
}
.article-image-content { transition: transform 0.3s ease; z-index: 2; }
.article-image::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px);
    pointer-events: none; z-index: 1;
}
.article-card:hover .article-image-content { transform: scale(1.05); animation: soft-glitch 0.5s linear; }
/* D5: copertina reale al posto dell'emoji */
.article-image img.article-image-cover { width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.article-content { flex: 1; display: flex; flex-direction: column; padding: 16px; }
.article-content .meta { margin-top: auto; } /* meta ancorata in fondo → card a pari altezza (come TZ) */
.article-title { font-weight: 600; font-size: 0.95rem; line-height: 1.4; margin-bottom: 10px; color: var(--text-primary); transition: color 0.3s ease; }
.article-card:hover .article-title { color: var(--primary); }

/* ===== ANTI-POLLO — DE-BOX (callout giallo, come i single) =====
   Barra-accento sx + velo color-mix giallo 5% + spigoli vivi; niente box/ombra/lift
   (callout statico). Mascot "pollo" (polli.png, glow giallo) al posto dell'emoji,
   che resta solo come fallback. Stessa veste dell'anti-pollo dei single. */
.anti-pollo {
    background: color-mix(in srgb, var(--yellow) 5%, transparent);
    border: 0; border-left: 3px solid var(--yellow); border-radius: 0;
    padding: 22px 26px; margin-bottom: 48px;
    display: flex; align-items: center; gap: 26px;
}
.anti-pollo-mascot {
    height: 96px; width: auto; flex-shrink: 0; align-self: center;
    filter: drop-shadow(0 0 5px var(--yellow-glow)) drop-shadow(0 0 16px var(--yellow-glow));
}
.anti-pollo-icon { font-size: 4rem; flex-shrink: 0; } /* fallback se manca il png */
.anti-pollo-content h3 { font-family: 'Space Mono', monospace; font-size: 1.25rem; color: var(--yellow); margin-bottom: 8px; text-shadow: 0 0 15px var(--yellow-glow); }
.anti-pollo-content p { color: var(--text-secondary); margin-bottom: 0; } /* niente CTA → ultimo elemento */
/* MINI-TERMINALE (identità GZ): accanto a "// Ultime uscite" (una striscia di codice sopra il
   feed). Prompt › + percorsi /sezione + cursore lampeggiante; prompt/cursore ROSA (= il `//`,
   punteggiatura-codice), percorsi bianchi. I percorsi si digitano (typewriter, glitchzone-shared.js).
   (.exits-comment dormiente: il commento "Da dove si comincia" è tolto, pronto a rientrare.) */
.exits-block { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.exits-comment { font-family: 'Space Mono', monospace; font-size: 0.8rem; color: var(--text-muted); }
.exits-terminal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-family: 'Space Mono', monospace; font-size: 0.95rem; }
.term-prompt { color: var(--accent); font-weight: 700; margin-right: -4px; } /* › a 14px dal primo percorso (gap 18 - 4), pari al lato titolo→› */
.term-cmd { color: var(--text-primary); text-decoration: none; font-weight: 600; transition: color 0.2s ease, text-shadow 0.2s ease; }
.term-cmd:hover { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
.term-cursor { color: var(--accent); font-weight: 700; animation: termBlink 1.1s steps(1) infinite; margin-left: -8px; } /* tira il cursore vicino all'ultimo percorso (gap 18px -> ~10px) */
@keyframes termBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* La DIGITAZIONE carattere-per-carattere dei percorsi è in glitchzone-shared.js (typewriter,
   ritmo umano, cursore che trascina, guard reduced-motion). Qui resta solo il cursore lampeggiante. */

/* ===== TECH-ZONE — callout de-box (stile anti-pollo, SENZA mascot), in BLU =====
   Gemello dell'anti-pollo: barra-accento + velo + spigoli vivi, niente box/ombra/lift.
   Blu #3b82f6 = "altro sito" (come about + pop-up dei single; il verde = brand GZ).
   Niente mascot a sinistra (scelta proprietario): solo il piccolo `bars` inline nel titolo
   (come l'anti-pollo tiene il `ban`). Bottone TONDO ghost = regola di coesistenza (azioni). */
.techzone-banner {
    background: color-mix(in srgb, #3b82f6 5%, transparent);
    border: 0; border-left: 3px solid #3b82f6; border-radius: 0;
    padding: 22px 26px; margin-bottom: 48px;
    display: flex; align-items: center; justify-content: space-between; gap: 26px; /* testo sx · bottone dx */
}
.techzone-title {
    font-family: 'Space Mono', monospace; font-size: 1.25rem; font-weight: 700; color: #3b82f6;
    margin-bottom: 8px; text-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}
.techzone-title .icon-svg { vertical-align: -4px; margin-right: 4px; }
.techzone-title .icon-svg svg { width: 22px; height: 22px; }
.techzone-desc { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 0; } /* bottone a dx, non più sotto */
/* Bottone GHOST blu (secondario): contorno + testo blu; all'hover si riempie di blu.
   Resta TONDO (radius-sm) = azione, regola di coesistenza. L'unica CTA forte è la newsletter. */
.techzone-btn {
    display: inline-block; flex-shrink: 0;
    padding: 12px 20px; background: transparent; color: #3b82f6; border: 1px solid #3b82f6; border-radius: var(--radius-sm);
    font-family: 'Space Mono', monospace; font-weight: 700; text-decoration: none; transition: all 0.3s ease; white-space: nowrap;
}
.techzone-btn:hover { background: #3b82f6; color: #fff; }

/* ===== NEWSLETTER — re-skin "card scura neon" (placeholder Brevo → D6; handler in gz-shared.js) =====
   Era un lastrone rosa pieno (vecchio linguaggio). Ora: card SCURA + bordo/glow rosa (neon) +
   titolo rosa; l'unica superficie ACCESA è il BOTTONE pieno rosa → il focus va sulla CTA, non
   sul rettangolo. Resta arrotondata (è un'azione/superficie = regola di coesistenza; radius-lg
   come la hero, era 20px fuori-sistema). */
.newsletter {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, var(--surface) 65%);
    border: 1px solid var(--accent); border-radius: var(--radius-lg);
    padding: 32px; text-align: center; margin-bottom: 48px;
    box-shadow: 0 0 30px rgba(255, 0, 128, 0.15); transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.newsletter:hover { box-shadow: 0 0 45px rgba(255, 0, 128, 0.28); transform: translateY(-2px); }
.newsletter h3 { font-family: 'Space Mono', monospace; font-size: 1.5rem; color: var(--accent); margin-bottom: 12px; text-shadow: 0 0 15px var(--accent-glow); }
.newsletter h3 .icon-svg { vertical-align: -5px; margin-right: 6px; }
.newsletter h3 .icon-svg svg { width: 26px; height: 26px; }
.newsletter p { color: var(--text-secondary); margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto; }
/* flex-wrap: il JS appende .form-msg come 3° flex-item; senza wrap+basis 100% finiva
   SULLA riga di input+button, strozzando il campo e mandando il messaggio a capo su 5
   righe (bug QA F, 1 lug). Ora il messaggio scende su una riga propria a tutta larghezza. */
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 450px; margin: 0 auto; }
/* Input scuro (well recessato sulla card scura) + ring rosa al focus. */
.newsletter-form input { flex: 1; padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; background: var(--background); color: var(--text-primary); transition: all 0.3s ease; }
.newsletter-form input::placeholder { color: var(--text-muted); }
.newsletter-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.25); }
.newsletter-form input:invalid:not(:placeholder-shown) { border-color: #ff4444; box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2); }
/* Bottone = unica superficie ACCESA: pieno rosa, testo scuro (AA 5.5:1) + glow. */
.newsletter-form button {
    background: var(--accent); color: var(--background); border: 2px solid var(--accent); padding: 14px 28px; border-radius: var(--radius-sm);
    font-weight: 700; font-size: 1rem; font-family: 'Space Mono', monospace; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 0 18px rgba(255, 0, 128, 0.35);
}
.newsletter-form button:hover { background: #ff2a93; border-color: #ff2a93; transform: scale(1.05); box-shadow: 0 0 28px rgba(255, 0, 128, 0.5); }
.newsletter-form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* outline solo da tastiera (a11y) */
.newsletter-form button.is-success { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--background) !important; }
.newsletter-form .form-msg { flex-basis: 100%; min-height: 1.2em; margin-top: 10px; font-family: 'Space Mono', monospace; font-size: 0.8rem; color: var(--text-secondary); text-align: center; }
.newsletter-form .form-msg.is-error { color: #ff8a8a; }

/* Link placeholder (data-todo): cursore not-allowed (come lo statico). */
a[data-todo] { cursor: not-allowed; }

/* ===== RESPONSIVE (hero + griglia + banner/newsletter) ===== */
@media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; }
    .hero-sidebar { flex-direction: row; }
    .hero-small { flex: 1; }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hero { gap: 16px; margin-bottom: 32px; }
    .hero-sidebar { flex-direction: column; gap: 10px; }
    .hero-image { height: 200px; }
    .hero-image-content { font-size: 3.5rem; }
    .hero-content { padding: 18px; }
    .hero-title { font-size: 1.15rem; }
    .hero-excerpt { font-size: 0.92rem; }
    .meta { gap: 10px 14px; font-size: 0.75rem; }

    .article-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; margin-bottom: 32px; }
    .section-header { margin-bottom: 16px; }
    .section-title { font-size: 1.05rem; }

    .anti-pollo { padding: 20px 22px; gap: 18px; margin-bottom: 32px; }
    .anti-pollo-mascot { height: 68px; }
    .anti-pollo-icon { font-size: 3rem; }
    .anti-pollo-content h3 { font-size: 1.05rem; }
    .anti-pollo-content p { font-size: 0.92rem; }

    .techzone-banner { padding: 20px 22px; margin-bottom: 32px; flex-direction: column; align-items: flex-start; gap: 16px; }
    .techzone-title { font-size: 1.05rem; }
    .techzone-desc { font-size: 0.92rem; }

    .newsletter { padding: 28px 20px; margin-bottom: 32px; }
    .newsletter h3 { font-size: 1.2rem; }
    .newsletter-form { flex-direction: column; gap: 10px; }
    .newsletter-form button { width: 100%; }

    /* Disabilita le micro-interazioni hover su touch (no-hover). */
    .article-card:hover, .hero-small:hover, .hero-main:hover { transform: none; }
    .article-card:hover .article-image-content,
    .hero-main:hover .hero-image-content { animation: none; transform: none; }
}