/* ================================================================
   HOME.CSS — stili esclusivi della homepage (index.html)
   Richiede brand.css (variabili, reveal, eyebrow, check-list).
================================================================= */

/* ================================================================
   HERO
================================================================= */
body.page-home .hero {
    max-width: none;
    margin: 0;
    padding: 6.5em 1.5em 3.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3em;
}

.hero-inner {
    width: 100%;
    max-width: 1120px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3.5em;
    align-items: center;
}

.hero-copy { text-align: left; }

.brand-row {
    display: flex;
    align-items: center;
    gap: .8em;
    margin-bottom: 1.4em;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 61, 107, .18);
}

body.page-home h1.wordmark {
    font-size: clamp(2.6rem, 5.5vw, 3.6rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 .3em;
    color: var(--brand-700);
}

.comment-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
    color: var(--green-text);
    margin: 0 0 1em;
}

.hero-lead {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--muted);
    max-width: 480px;
    margin: 0;
}

/* ---------------- Terminal signature ---------------- */
.terminal {
    background: linear-gradient(180deg, #111a2c, var(--ink));
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .45);
    overflow: hidden;
    max-width: 440px;
    width: 100%;
    justify-self: end;
    border: 1px solid rgba(255, 255, 255, .06);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: .45em;
    padding: .8em 1em;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #ef4444; }
.dot-amber { background: #f5c451; }
.dot-green { background: #22c55e; }

.terminal-title {
    margin-left: .5em;
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem;
    color: #94a3b8;
}

.terminal-body {
    padding: 1.4em 1.3em 1.6em;
    font-family: 'JetBrains Mono', monospace;
    font-size: .88rem;
    line-height: 1.9;
}

.tline {
    margin: 0;
    color: #cbd5e1;
    white-space: pre-wrap;
    word-break: break-word;
}
html.js .tline {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
}
html.js .tline.shown { opacity: 1; transform: none; }

.t-prompt { color: var(--green); font-weight: 600; margin-right: .5em; }
.t-out { color: #94a3b8; }
.t-ok { color: var(--green); font-weight: 600; }

.t-cursor {
    display: inline-block;
    width: .55em;
    height: 1.1em;
    background: var(--green);
    margin-left: .2em;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
    .t-cursor { animation: none; opacity: .8; }
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------------- Scroll cue ---------------- */
.scroll-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}
.scroll-cue:hover { color: var(--brand-600); }
.scroll-cue svg {
    width: 18px; height: 18px;
    animation: bob 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue svg { animation: none; }
}
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* ================================================================
   SEZIONE CORSI
================================================================= */
#corsi {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2em 1.5em 5em;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.6em;
}

.course-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.8em 1.7em 1.6em;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.course-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-600), var(--green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.course-card:hover,
.course-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(0, 61, 107, .3);
    border-color: rgba(0, 90, 156, .3);
}
.course-card:hover::before,
.course-card:focus-visible::before { transform: scaleX(1); }

.course-icon {
    width: 52px;
    height: 52px;
    padding: 12px;
    margin-bottom: 1.1em;
    color: var(--brand-600);
    background: rgba(0, 90, 156, .08);
    border-radius: 12px;
    transition: transform .25s ease, background .25s ease;
}
.course-icon svg { width: 100%; height: 100%; fill: currentColor; }
.course-card:hover .course-icon {
    background: var(--brand-600);
    color: #fff;
    transform: scale(1.06);
}

.course-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--green-text);
    margin-bottom: .5em;
}

.course-title {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin: 0 0 .5em;
    line-height: 1.3;
}

.course-desc {
    font-size: .96rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 1.4em;
    flex-grow: 1;
}

.course-cta {
    font-family: 'JetBrains Mono', monospace;
    font-size: .9rem;
    font-weight: 600;
    color: var(--brand-600);
}
.course-cta .arrow { display: inline-block; transition: transform .25s ease; }
.course-card:hover .course-cta .arrow { transform: translateX(5px); }

/* ================================================================
   TRUST STRIP
================================================================= */
.trust-strip {
    border-top: 1px solid var(--line);
    padding: 2.4em 1.5em;
}
.trust-strip .check-list {
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

/* ================================================================
   FOOTER (rifinitura leggera, riusa le classi esistenti)
================================================================= */
body.page-home .site-footer { border-top: 1px solid var(--line); }
body.page-home .footer-desc { font-family: 'JetBrains Mono', monospace; font-size: .85rem; }

/* ================================================================
   RESPONSIVE
================================================================= */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5em;
        text-align: center;
    }
    .hero-copy { text-align: center; }
    .brand-row { justify-content: center; }
    .hero-lead { margin: 0 auto; }
    .terminal { justify-self: center; max-width: 460px; }
    .section-heading.centered { margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
    body.page-home .hero { padding: 5em 1.2em 3em; gap: 2.2em; }
    body.page-home h1.wordmark { font-size: 2.3rem; }
    .terminal-body { font-size: .8rem; }
    #corsi { padding: 1.5em 1.2em 3.5em; }
    .course-grid { grid-template-columns: 1fr; }
    .trust-strip .check-list { gap: .6em; }
    .trust-strip .check-list li { font-size: .76rem; padding: .5em .85em; }
}