/**
 * Cases — Rub a Lamp
 * Single case template + case-grid styling
 * Tokens hentes fra tokens.css
 * Opdateret: 2026-03-04
 */


/* ============================================================
   SINGLE CASE — LAYOUT
   ============================================================ */

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


/* ============================================================
   STANDARD SEKTIONSAFSTANDE
   Styres med padding-top på hvert element, padding-bottom: 0
   Undtagelse: intro har reduceret top da den starter tæt på header
   ============================================================ */

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

.ral-case__hero {
    margin-top: var(--space-lg);
}

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

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

.ral-case__cta {
    padding-top:    0;
    padding-bottom: 0;
}

.ral-case__nav {
    padding-top:    var(--space-md);
    padding-bottom: var(--space-xl);
}


/* ============================================================
   INTRO-SEKTION
   Layout A: 1sp + 1sp + 2sp (grid: 1fr 1fr 2fr)
   Layout B: 1sp + 2sp + 1sp (grid: 1fr 2fr 1fr)
   Gap: var(--space-xs)
   ============================================================ */

/* Layout A */
.ral-case-intro--a {
    display:               grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap:                   var(--space-xs);
}

/* Layout B */
.ral-case-intro--b {
    display:               grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap:                   var(--space-xs);
}

/* Spalte 1 — blå accent (begge layouts) */
.ral-case-intro__col1 {
    color:       var(--color-primary);
    font-weight: var(--font-semibold);
}

.ral-case-intro__col1 p {
    color:       var(--color-primary);
    font-weight: var(--font-semibold);
    margin:      0 0 0.25em;
}

/* Smal og bred kolonne */
.ral-case-intro__col-narrow p,
.ral-case-intro__col-wide p {
    margin: 0 0 1em;
}

.ral-case-intro__col-narrow p:last-child,
.ral-case-intro__col-wide p:last-child {
    margin-bottom: 0;
}

/* Hvis col-narrow mangler: col-wide forbliver i kolonne 3 */
.ral-case-intro--a:not(:has(.ral-case-intro__col-narrow)) .ral-case-intro__col-wide {
    grid-column: 3;
}


/* ============================================================
   HERO — Featured Image
   Edge-to-edge, ingen sidemargin
   ============================================================ */

.ral-case__hero {
    width:    100%;
    overflow: hidden;
}

.ral-case__hero-img {
    display: block;
    width:   100%;
    height:  auto;
}


/* ============================================================
   UDFORDRING + LØSNING
   Genbruger .ral-4col grid fra typography.css
   Modifier: --black på primær kolonne
   ============================================================ */

/* Sort accent */
.ral-4col__primary--black p {
    color:       var(--color-black);
    font-weight: var(--font-light);
}

.ral-4col__primary--black p strong,
.ral-4col__primary--black p b {
    font-weight: var(--font-bold);
}

/* Blå accent */
.ral-4col__primary--blue p {
    color:       var(--color-primary);
    font-weight: var(--font-semibold);
}


/* ============================================================
   CASE INDHOLD — Fuldbredde billeder
   Edge-to-edge, ingen sidemargin
   ============================================================ */

.ral-case__figure {
    margin:  0;
    padding: 0;
}

.ral-case__img {
    display: block;
    width:   100%;
    height:  auto;
}

/* Mellemrum mellem billeder, tekst og grå sektioner */
.ral-case__figure + .ral-case__figure,
.ral-case__figure + .ral-case__grey-section,
.ral-case__grey-section + .ral-case__figure,
.ral-case__text + .ral-case__figure {
    margin-top: var(--space-lg);
}


/* ============================================================
   CASE INDHOLD — Grå sektion
   ============================================================ */

.ral-case__grey-section {
    background: #f5f5f5;
    padding:    var(--space-sm) 0;
}

.ral-case__grey-section .ral-case__video + .ral-case__video,
.ral-case__grey-section .ral-case__video + .ral-case__text,
.ral-case__grey-section .ral-case__text + .ral-case__video,
.ral-case__grey-section .ral-case__text + .ral-case__text {
    margin-top: var(--space-sm);
}

/* Tekstblok i grå sektion — padding-top nulstilles, margin styrer afstanden */
.ral-case__grey-section .ral-case__text {
    padding-top:    0;
    padding-bottom: 0;
}

/* Tekstblok alene i grå sektion — 100px top og bund, grey-section padding nulstilles */
.ral-case__grey-section:not(:has(.ral-case__video)) {
    padding: 0;
}

.ral-case__grey-section:not(:has(.ral-case__video)) .ral-case__text {
    padding-top:    var(--space-lg);
    padding-bottom: var(--space-lg);
}

.ral-case__grey-section .ral-case__video + .ral-case__text {
    margin-top: var(--space-lg);
}

.ral-case__grey-section .ral-case__text + .ral-case__video {
    margin-top: var(--space-md);
}


/* ============================================================
   CASE INDHOLD — Video
   ============================================================ */

.ral-case__video-player,
.ral-case__video-cover {
    display: block;
    width:   100%;
    height:  auto;
}

.ral-case__video-cover-fallback {
    display:          block;
    width:            100%;
    aspect-ratio:     16 / 9;
    background-color: #ffffff;
}

.ral-case__video-embed {
    position:       relative;
    padding-bottom: 56.25%;
    height:         0;
    overflow:       hidden;
}

.ral-case__video-embed iframe {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
}

/* Lightbox trigger */
.ral-case__video-lightbox {
    position: relative;
    cursor:   pointer;
}

.ral-case__play-btn {
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    background: none !important;
    border:     none;
    cursor:     pointer;
    padding:    0;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.ral-case__play-btn:hover {
    opacity: 1;
}

.ral-case__play-btn circle {
    transition: fill 0.3s ease;
}

.ral-case__video-lightbox:hover .ral-case__play-btn circle {
    fill:    var(--color-primary);
    opacity: 0.8;
}

.ral-case__video-lightbox:hover .ral-case__play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}


/* ============================================================
   CASE INDHOLD — Tekstblok
   Placeret i højre halvdel af siden
   ============================================================ */

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

.ral-case__text .ral-case__inner {
    display:         flex;
    justify-content: flex-end;
}

.ral-case__text .ral-body {
    width:     50%;
    max-width: 622px;
}

/* Sidste tekstblok (credit) — ekstra luft over */
.ral-case__content .ral-case__text:last-child {
    padding-top: var(--space-xl);
}


/* ============================================================
   CTA + CREDIT
   ============================================================ */

.ral-case__cta .ral-case__inner {
    display:         flex;
    justify-content: flex-end;
}

.ral-case__cta-content {
    width:     50%;
    max-width: 622px;
}


/* ============================================================
   PREV / NEXT NAVIGATION
   ============================================================ */

.ral-case__nav-inner {
    display:         flex;
    justify-content: space-between;
    gap:             var(--space-xs);
}

.ral-case__nav-btn {
    flex: 0 1 auto;
}


/* ============================================================
   VIDEO LIGHTBOX — Overlay
   ============================================================ */

.ral-lightbox {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    bottom:          0;
    z-index:         1000;
    background:      rgba(0, 0, 0, 0.9);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.ral-lightbox__close {
    position:    absolute;
    top:         1.5rem;
    right:       1.5rem;
    background:  none;
    border:      none;
    color:       var(--color-white);
    font-size:   2rem;
    cursor:      pointer;
    padding:     0.5rem;
    line-height: 1;
}

.ral-lightbox__video {
    max-width:  90vw;
    max-height: 90vh;
}

.ral-lightbox__embed {
    width:        90vw;
    aspect-ratio: 16 / 9;
    max-height:   90vh;
}

.ral-lightbox__embed iframe {
    width:  100%;
    height: 100%;
}


/* ============================================================
   CASE-GRID — FORSIDE
   ============================================================ */

.ral-cases-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-sm);
    width:                 100%;
}

.ral-cases-grid__item {
    display:         block;
    text-decoration: none;
    color:           var(--color-black);
    transition:      opacity 0.2s ease;
}

.ral-cases-grid__item:hover {
    opacity: 0.85;
}

.ral-cases-grid__thumb {
    overflow:      hidden;
    margin-bottom: 0.75rem;
}

.ral-cases-grid__img {
    display: block;
    width:   100%;
    height:  auto;
}

.ral-cases-grid__info {
    padding: 0;
}

.ral-cases-grid__label {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    margin:                  0;
}


/* ============================================================
   Custom tilføjelser
   ============================================================ */

[type=button]:focus, [type=button]:hover,
[type=submit]:focus, [type=submit]:hover,
button:focus, button:hover {
    background-color: var(--color-primary);
}


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

@media (max-width: 768px) {

    .ral-case-intro--a,
    .ral-case-intro--b {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    auto;
        gap:                   var(--space-xs);
    }

    .ral-case-intro__col1 {
        grid-column: 1;
        grid-row:    1 / 3;
    }

    .ral-case-intro__col-narrow {
        grid-column: 2;
        grid-row:    1;
    }

    .ral-case-intro__col-wide {
        grid-column: 2;
        grid-row:    2;
    }

    /* Hvis col-narrow mangler: col-wide rykker op på række 1 */
    .ral-case-intro--b:not(:has(.ral-case-intro__col-narrow)) .ral-case-intro__col-wide,
    .ral-case-intro--a:not(:has(.ral-case-intro__col-narrow)) .ral-case-intro__col-wide {
        grid-row: 1;
    }

    .ral-case__hero {
        margin-top: var(--space-md);
    }

    .ral-case__challenge,
    .ral-case__content {
        padding-top:    var(--space-md);
        padding-bottom: 0;
    }

    .ral-case__figure + .ral-case__figure,
    .ral-case__figure + .ral-case__grey-section,
    .ral-case__grey-section + .ral-case__figure,
    .ral-case__text + .ral-case__figure {
        margin-top: var(--space-md);
    }

    .ral-case__content .ral-case__text:last-child {
        padding-top: var(--space-md);
    }

    .ral-case__cta {
        padding-top:    0;
        padding-bottom: 0;
    }

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

    .ral-case__cta .ral-case__inner,
    .ral-case__text .ral-case__inner {
        display: block;
    }

    .ral-case__cta-content,
    .ral-case__text .ral-body {
        width:     100%;
        max-width: 100%;
    }

    .ral-cases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--space-xs);
    }

}


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

@media (max-width: 480px) {

    .ral-case-intro--a,
    .ral-case-intro--b {
        grid-template-columns: 1fr;
        gap:                   1em;
    }

    .ral-case-intro__col1,
    .ral-case-intro__col-narrow,
    .ral-case-intro__col-wide {
        grid-column: auto;
        grid-row:    auto;
    }

    /* Nulstil :has()-regler fra tablet */
    .ral-case-intro--a:not(:has(.ral-case-intro__col-narrow)) .ral-case-intro__col-wide,
    .ral-case-intro--b:not(:has(.ral-case-intro__col-narrow)) .ral-case-intro__col-wide {
        grid-row: auto;
    }

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

    .ral-case__hero {
        margin-top: var(--space-sm);
    }

    .ral-case__challenge,
    .ral-case__content,
    .ral-case__text {
        padding-top: var(--space-sm);
    }

    .ral-case__content .ral-case__text:last-child {
        padding-top: var(--space-sm);
    }

    .ral-case__figure + .ral-case__figure,
    .ral-case__figure + .ral-case__grey-section,
    .ral-case__grey-section + .ral-case__figure,
    .ral-case__text + .ral-case__figure {
        margin-top: var(--space-sm);
    }

    .ral-case__grey-section {
        padding: var(--space-xs) 0;
    }

    .ral-case__grey-section .ral-case__video + .ral-case__video,
    .ral-case__grey-section .ral-case__video + .ral-case__text,
    .ral-case__grey-section .ral-case__text + .ral-case__video,
    .ral-case__grey-section .ral-case__text + .ral-case__text {
        margin-top: var(--space-xs);
    }

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

    .ral-case__cta .ral-case__inner,
    .ral-case__text .ral-case__inner {
        display: block;
    }

    .ral-case__cta-content,
    .ral-case__text .ral-body {
        width:     100%;
        max-width: 100%;
    }

    .ral-case__nav-inner {
        gap: 0.75rem;
    }

    .ral-case__nav-btn {
        flex:      1 1 0;
        min-width: 0;
    }

    .ral-case__play-btn svg {
        width:  50px;
        height: 50px;
    }

    .ral-cases-grid {
        grid-template-columns: 1fr;
        gap:                   var(--space-sm);
    }

}