/* ==========================================================
   /assets/ui/ljh-hero.css
   LJH Hero – Information Placket
   Version 2.1 – SINGLE SOURCE
========================================================== */

/* ----------------------------------------------------------
   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;
}

/* ----------------------------------------------------------
   BACKGROUND (EGEN – PÅVERKAR INTE SIDAN)
---------------------------------------------------------- */

.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 CONTAINER
---------------------------------------------------------- */

.ljh-hero-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: center;
}

/* ----------------------------------------------------------
   HERO GLASS CARD
---------------------------------------------------------- */

.ljh-hero-glass {
    max-width: 1600px;
    width: 100%;
    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);
}


.ljh-hero-card {
    width: 100%;
    max-width: 1100px;

    padding: 3.8rem 4.2rem;
    border-radius: 28px;
    text-align: center;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.14),
        rgba(255,255,255,0.06)
    );

    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    border: 1px solid rgba(255,255,255,0.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 18px 38px 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;
}

.ljh-hero-text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #cfd9ea;
    max-width: 880px;
    margin: 0 auto;
}

/* ----------------------------------------------------------
   CTA
---------------------------------------------------------- */
.ljh-hero-btn {
    margin-left: auto;
    margin-right: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 2.8rem;
    padding: 14px 42px;

    border-radius: 22px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;

    color: #eef6ff;
    text-decoration: none;

    background: linear-gradient(
        to bottom,
        #4f8cff,
        #2f6fd0
    );

    border: 1px solid rgba(255,255,255,0.35);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 14px 34px rgba(20,60,140,0.55);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

.ljh-hero-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        0 18px 40px rgba(20,60,140,0.65);
}

.ljh-hero-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

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

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