/* ==========================================================
   /ui/css/public/ljh-hero.css
   LJH – Hero Section
   ----------------------------------------------------------
   Ansvar:
   - Hero wrapper med isolation och bakgrund
   - Glass container med backdrop-filter
   - Typografi (titel, lead)
   - CTA-knappar och hero-actions
   - Hero note
   ----------------------------------------------------------
   Version: 2.2
   Används av: /start_site/hero.php
   Laddas via: head_loader.php (publika sidan)
========================================================== */


/* ==========================================================
   SAFETY & ISOLATION
========================================================== */

.ljh-hero,
.ljh-hero * { box-sizing: border-box; }

.ljh-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 120px 16px;
    display: flex;
    justify-content: center;
}


/* ==========================================================
   HERO BACKGROUND
========================================================== */

.ljh-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        to bottom,
        rgba(18,28,44,0.96),
        rgba(12,18,28,0.96)
    );
}


/* ==========================================================
   HERO GLASS CONTAINER
========================================================== */

.ljh-hero-glass {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1600px;
    text-align: center;
    padding: 3.6rem 4rem;
    border-radius: 26px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.07)
    );
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        0 26px 60px rgba(0,0,0,0.45);
}


/* ==========================================================
   TYPOGRAFI
========================================================== */

.ljh-hero-title {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #eef4ff;
    margin-bottom: 1.8rem;
}

.ljh-hero-lead {
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    line-height: 1.55;
    color: #dfe8f6;
    max-width: 860px;
    margin: 0 auto 2.4rem;
}


/* ==========================================================
   HERO ACTIONS – CTA-knappar
========================================================== */

.world-start .ljh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.world-start .ljh-hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 8px;
    color: #cfe6ff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
}

.world-start .ljh-hero-link:hover { color: #ffffff; }


/* ==========================================================
   HERO NOTE
========================================================== */

.ljh-hero-note {
    font-size: 1.2rem;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.75);
    text-align: center;
    margin-top: 1.8rem;
}


/* ==========================================================
   RESPONSIV
========================================================== */

@media (max-width: 768px) {
    .ljh-hero { padding: 100px 16px; }

    .ljh-hero-glass {
        padding: 2.6rem 2.2rem;
        border-radius: 22px;
    }
}