/**
 * mod_jwc_hero - JWC-2026 Hero Section
 * Copyright (C) 2026 Massimo De Luca. All Rights Reserved.
 *
 * Stili del modulo: replicano la palette e le utility del design originale
 * (display-title, window codice, dots, badge profilo) su classi Bootstrap 5.
 */

/* Variabili tema: ereditano i token del template, con fallback. */
.jw-hero {
    --jw-hero-primary: var(--jw-primary, #f1592a);
    --jw-hero-primary-dark: var(--jw-primary-dark, #d8481c);
    --jw-hero-light: var(--jw-primary-light, #fff3ee);
    --jw-hero-card: var(--jw-surface-container-low, #f9f9f9);
    --jw-hero-border: var(--jw-border, #e5e5e5);
    --jw-hero-code-bg: #111213;
    --jw-hero-pre-bg: var(--jw-code-dark-bg, #0c0c0d);
    --jw-hero-pre-fg: #f8f8f2;
}

.jw-hero {
    width: 100%;
    padding: 3.5rem 0;
}
@media (min-width: 992px) {
    .jw-hero {
        padding: 6rem 0;
    }
}

/* Titolo hero: replica .display-title includendo l'highlight. */
.jw-hero-title {
    font-family: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Badge eyebrow: replica .mdl-brand-light + .mdl-brand20. */
.jw-hero-badge {
    background: var(--jw-hero-light);
    color: var(--jw-hero-primary);
    border: 1px solid rgba(241, 89, 42, 0.2);
    border-radius: 9999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

.jw-hero-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--jw-hero-primary);
}

/* Pulsanti: padding e gap Material Symbols coerenti col design. */
.jw-hero-btn {
    min-height: 3.125rem;
    border-radius: 0.375rem;
}

.jw-hero-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

.jw-hero-btn.btn-primary {
    background-color: var(--jw-hero-primary);
    border-color: var(--jw-hero-primary);
}

.jw-hero-btn.btn-primary:hover,
.jw-hero-btn.btn-primary:focus {
    background-color: var(--jw-hero-primary-dark);
    border-color: var(--jw-hero-primary-dark);
}

.jw-hero-btn.btn-outline-secondary {
    color: var(--jw-hero-primary);
    border-color: var(--jw-hero-border);
    background-color: var(--jw-hero-card);
}

.jw-hero-btn.btn-outline-secondary:hover,
.jw-hero-btn.btn-outline-secondary:focus {
    color: var(--jw-hero-primary);
    border-color: var(--jw-hero-primary);
    background-color: var(--jw-hero-light);
}

/* Stelle rating: replica Material Symbols riempiti. */
.jw-hero-rating-star {
    color: #f59e0b;
    font-variation-settings: 'FILL' 1;
    font-size: 1.375rem;
}

/* Window codice: replica i blocchi dark originali. */
.jw-hero-window {
    background: var(--jw-hero-code-bg);
    color: #f8f8f8;
    border-color: #262626 !important;
}

.jw-hero-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: #171717;
    border-bottom: 1px solid #262626;
}

.jw-hero-window-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: #0f0f0f;
    border-top: 1px solid #262626;
    font-size: 0.875rem;
}

/* Dots traffic-light della window. */
.jw-hero-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.jw-hero-dot-red {
    background: rgba(239, 68, 68, 0.8);
}

.jw-hero-dot-amber {
    background: rgba(245, 158, 11, 0.8);
}

.jw-hero-dot-green {
    background: rgba(16, 185, 129, 0.8);
}

.jw-hero-dot-aqua {
    background: #34d399;
}

/* Blocco snippet: replica .mdl-pre. */
.jw-hero-pre {
    margin: 0;
    white-space: pre;
    overflow: auto;
    background: var(--jw-hero-pre-bg);
    color: var(--jw-hero-pre-fg);
    border-radius: 0;
    font: 0.75rem/1.7 'JetBrains Mono', 'Cascadia Code', monospace;
    max-height: 340px;
}

/* Badge profilo. */
.jw-hero-avatar {
    width: 3.5rem;
    height: auto;
    object-fit: cover;
}

.jw-hero-profile .badge {
    background-color: var(--jw-hero-primary);
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* Card highlights: replica .mdl-neutral-card. */
.jw-hero .bg-body-tertiary {
    background-color: var(--jw-hero-card) !important;
}

.jw-hero .card {
    border-color: var(--jw-hero-border);
}

@media (max-width: 991.98px) {
    .jw-hero-title {
        font-size: clamp(2.25rem, 7vw, 3rem);
    }
}