/* ==========================================================
   /assets/ui/ljh-hero.css
   LJH Hero – Information Plaque
   Version 2.2 – CLEAN 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;
}


/* ----------------------------------------------------------
   HERO BACKGROUND (ISOLATED)
---------------------------------------------------------- */

.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);
}


/* ----------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------- */

.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 BUTTON ROW)
---------------------------------------------------------- */
.world-start .ljh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;                  /* ← upp från 14px, mer luft mellan knappar */
    align-items: center;
    justify-content: center;    /* ← centrerar knapparna horisontellt */
}

.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;         /* ← upp från 1.05rem */
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.75);
    text-align: center;
    margin-top: 1.8rem;         /* ← spacing upp mot knapparna */
}


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

@media (max-width:768px){

.ljh-hero{
padding:100px 16px;
}

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

}