/* Hero Variants — NIS2 Portugal
 * Additive classes to override the default .hero / .page-hero background.
 * All variants share the same structural defaults below.
 */

/* ── Shared structural overrides ───────────────────────────────────────── */
.hero-variant-primary,
.hero-variant-tools,
.hero-variant-templates,
.hero-variant-legal,
.hero-variant-resources {
    color: #fff;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -40px 80px rgba(0,0,0,0.2);
}

/* ── Primary — dark blue + subtle grid (homepage, Sobre NIS2) ───────────── */
.hero-variant-primary {
    background-color: #0F172A;
    background-image:
        radial-gradient(circle at 75% 20%, rgba(56,189,248,0.12) 0%, transparent 45%),
        radial-gradient(circle at 20% 80%, rgba(99,102,241,0.10) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M0 0v40M40 0v40M0 0h40M0 40h40' stroke='%23fff' stroke-width='.4' opacity='.08'/%3E%3C/svg%3E");
    background-size: cover, cover, 40px 40px;
}

/* ── Tools — blue-to-teal + sonar rings (calculadoras, quiz, dashboard…) ── */
.hero-variant-tools {
    background-color: #0C1A2E;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(34,211,238,0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(96,165,250,0.15) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='10' fill='none' stroke='%2322d3ee' stroke-width='.5' opacity='.07'/%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%2322d3ee' stroke-width='.4' opacity='.05'/%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='%2222d3ee' stroke-width='.3' opacity='.04'/%3E%3C/svg%3E");
    background-size: cover, cover, 60px 60px;
}

/* ── Templates — dark navy + diagonal lines (document texture) ─────────── */
.hero-variant-templates {
    background-color: #0F1B2D;
    background-image:
        radial-gradient(circle at 60% 10%, rgba(251,191,36,0.10) 0%, transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(99,102,241,0.10) 0%, transparent 35%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cline x1='0' y1='20' x2='20' y2='0' stroke='%23fff' stroke-width='.5' opacity='.07'/%3E%3C/svg%3E");
    background-size: cover, cover, 20px 20px;
}

/* ── Legal — formal dark slate + column lines (transposição, artigo 21…) ── */
.hero-variant-legal {
    background-color: #111827;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(148,163,184,0.08) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cline x1='20' y1='0' x2='20' y2='80' stroke='%23fff' stroke-width='.4' opacity='.06'/%3E%3Cline x1='60' y1='0' x2='60' y2='80' stroke='%23fff' stroke-width='.4' opacity='.06'/%3E%3Cline x1='0' y1='20' x2='80' y2='20' stroke='%23fff' stroke-width='.2' opacity='.04'/%3E%3Cline x1='0' y1='60' x2='80' y2='60' stroke='%23fff' stroke-width='.2' opacity='.04'/%3E%3C/svg%3E");
    background-size: cover, 80px 80px;
}

/* ── Resources — dark blue + green accent + dots grid (FAQ, Recursos…) ──── */
.hero-variant-resources {
    background-color: #0D1F16;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(52,211,153,0.14) 0%, transparent 40%),
        radial-gradient(circle at 15% 75%, rgba(96,165,250,0.10) 0%, transparent 35%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%2334d399' opacity='.08'/%3E%3C/svg%3E");
    background-size: cover, cover, 24px 24px;
}

/* ── Text colour overrides (ensure legibility on all variants) ─────────── */
.hero-variant-primary h2,
.hero-variant-tools h2,
.hero-variant-templates h2,
.hero-variant-legal h2,
.hero-variant-resources h2,
.hero-variant-primary .hero-subtitle,
.hero-variant-tools .hero-subtitle,
.hero-variant-templates .hero-subtitle,
.hero-variant-legal .hero-subtitle,
.hero-variant-resources .hero-subtitle,
.hero-variant-primary .page-hero-subtitle,
.hero-variant-tools .page-hero-subtitle,
.hero-variant-templates .page-hero-subtitle,
.hero-variant-legal .page-hero-subtitle,
.hero-variant-resources .page-hero-subtitle {
    color: #fff;
}