/**
 * Front — Rub a Lamp
 * Forside styling
 * Opdateret: 2026-03-04
 */


/* ============================================================
   INNER WRAPPER
   ============================================================ */

.ral-front__inner {
    max-width: 1440px;
    margin:    0 auto;
    padding:   0 var(--space-side);
}


/* ============================================================
   HERO
   Fuldbredde, gradient overlay, headline + logo
   ============================================================ */

.ral-front__hero {
    width:               100%;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    aspect-ratio:        32 / 15;
    max-height:          740px;
    min-height:          unset;
    display:             flex;
    align-items:         center;
}

.ral-front__hero-inner {
    width:           100%;
    max-width:       1440px;
    margin:          0 auto;
    padding:         var(--space-lg) var(--space-side);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-xs);
}

.ral-front__hero-headline {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               var(--text-hero);
    font-variation-settings: var(--font-variation);
    line-height:             var(--leading-hero);
    color:                   var(--color-white);
    margin:                  0;
    max-width:               400px;
}

.ral-front__hero-logo {
    width:           50%;
    display:         flex;
    justify-content: center;
    flex-shrink:     0;
}

.ral-front__hero-logo-img {
    display:    block;
    width:      auto;
    height:     18vw;
    max-height: 360px;
    min-height: 180px;
}


/* ============================================================
   INTRO
   ============================================================ */

.ral-front__intro {
    padding-top:    var(--space-lg);
    padding-bottom: var(--space-lg);
}


/* ============================================================
   CASES GRID
   ============================================================ */

.ral-front__cases {
    padding-bottom: var(--space-md);
}


/* ============================================================
   RESPONSIVE — TABLET (768px)
   ============================================================ */

@media (max-width: 768px) {

    .ral-front__hero-headline {
        max-width: 55%;
    }

    .ral-front__hero-logo-img {
        height: 15vw;
    }

}


/* ============================================================
   RESPONSIVE — MOBIL (480px)
   ============================================================ */

@media (max-width: 480px) {

    .ral-front__hero {
        min-height: unset;
    }

    .ral-front__hero-inner {
        flex-direction: row;
        align-items:    center;
        padding-top:    var(--space-md);
        padding-bottom: var(--space-md);
    }

    .ral-front__hero-headline {
        max-width: 50%;
        font-size: 1rem;
        line-height: 1.3;
    }

    .ral-front__hero-logo {
        width:           50%;
        display:         flex;
        justify-content: center;
    }

    .ral-front__hero-logo-img {
        height:     25vw;
        max-height: unset;
        min-height: unset;
    }

    .ral-front__intro {
        padding-top:    var(--space-sm);
        padding-bottom: var(--space-sm);
    }

}