/*
 * pages.css — Page-specific layout styles.
 * Depends on: base.css, layout.css, components.css
 * Loaded via head.php extra_css or on specific pages only.
 * Homepage-specific rules live here; other pages add their own.
 */

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
    padding-block: clamp(var(--space-16), 10vw, var(--space-32));
    position:      relative;
    overflow:      hidden;
}

/* Subtle grid background */
.hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background-image:
        linear-gradient(rgba(31, 143, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 143, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events:  none;
}

.hero::after {
    content:         '';
    position:        absolute;
    inset:           0;
    background:      radial-gradient(ellipse 60% 50% at 50% 0%,
                         rgba(31, 143, 255, 0.08) 0%,
                         transparent 70%);
    pointer-events:  none;
}

.hero__inner {
    position:             relative;
    z-index:              var(--z-base);
    display:              grid;
    grid-template-columns:1fr 380px;
    gap:                  var(--space-16);
    align-items:          center;
}

.hero__content {
    display:       flex;
    flex-direction:column;
    gap:           var(--space-6);
}

.hero__heading {
    font-size:    var(--text-6xl);
    font-weight:  var(--font-extrabold);
    line-height:  var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color:        var(--color-text-primary);
}

.hero__sub {
    font-size:   var(--text-lg);
    color:       var(--color-text-secondary);
    max-width:   56ch;
    line-height: var(--leading-relaxed);
}

.hero__actions {
    display:    flex;
    gap:        var(--space-4);
    flex-wrap:  wrap;
    margin-top: var(--space-2);
}

.hero__stats .card {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           0;
}

.hero__stats .stat-block {
    padding:       var(--space-5);
    border-bottom: 1px solid var(--color-border);
    border-right:  1px solid var(--color-border);
}

.hero__stats .stat-block:nth-child(even) {
    border-right: none;
}

.hero__stats .stat-block:nth-last-child(-n+2) {
    border-bottom: none;
}

.hero__stats .stat-block:last-child {
    grid-column: span 2;
    border-right: none;
}

@media (max-width: 960px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__stats {
        order: -1;
    }

    .hero__heading {
        font-size: var(--text-5xl);
    }
}

@media (max-width: 600px) {
    .hero__heading {
        font-size: var(--text-4xl);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
    }
}

/* ── Terminal / code block diagram ──────────────────────────────────────── */

.hero-terminal {
    background:    var(--color-bg-elevated);
    border:        1px solid var(--color-border-mid);
    border-radius: var(--radius-xl);
    overflow:      hidden;
    font-family:   var(--font-mono);
}

.hero-terminal__bar {
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    padding:        var(--space-3) var(--space-5);
    background:     var(--color-bg-overlay);
    border-bottom:  1px solid var(--color-border);
}

.hero-terminal__bar span:not(.hero-terminal__title) {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--color-border-strong);
}

.hero-terminal__bar span:nth-child(1) { background: #ff5f57; }
.hero-terminal__bar span:nth-child(2) { background: #febc2e; }
.hero-terminal__bar span:nth-child(3) { background: #28c840; }

.hero-terminal__title {
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
    margin-left: auto;
    font-family: var(--font-sans);
}

.hero-terminal__body {
    margin:      0;
    padding:     var(--space-6);
    font-size:   var(--text-sm);
    line-height: var(--leading-relaxed);
    color:       var(--color-text-secondary);
    background:  none;
    border:      none;
    border-radius: 0;
}

.hero-terminal__body code {
    background:  none;
    border:      none;
    padding:     0;
    color:       var(--color-text-secondary);
}

/* ── Check list ─────────────────────────────────────────────────────────── */

.check-list {
    list-style: none;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
}

.check-list li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    font-size:   var(--text-sm);
    color:       var(--color-text-secondary);
    line-height: var(--leading-snug);
}

.check-list li i {
    color:      var(--color-success);
    flex-shrink:0;
    margin-top: 0.15em;
}

/* ── Scroll-reveal animation states ─────────────────────────────────────── */

.will-reveal {
    opacity:   0;
    transform: translateY(16px);
    transition:opacity  var(--transition-slow),
               transform var(--transition-slow);
}

.will-reveal.is-revealed {
    opacity:   1;
    transform: translateY(0);
}

/* Stagger children when parent is revealed */
.will-reveal:nth-child(2) { transition-delay: 100ms; }
.will-reveal:nth-child(3) { transition-delay: 200ms; }
.will-reveal:nth-child(4) { transition-delay: 300ms; }