/* ===== HERO ===== */
.hero-booking {
    display: flex;
    flex-direction: column;
    background-color: #EDF3F7;
    gap: var(--space-l);
}

.hero-boks-booking {
    width: 100%;
    height: 200px;
    border-radius: 9px;
    background-color: #DEEEFF;
    padding: var(--space-m);
    display: flex;
    flex-direction: column; /* Sørger for at tekst og knap står i en søjle */
    justify-content: center; /* Centrerer lodret */
    align-items: center; /* Centrerer vandret */
    text-align: center; /* Centrerer selve teksten inde i h3 og p */
    border: 1px solid  #1e73d8;
    margin-top:var(--space-m);
}

.hero-text-booking {
    position: relative;
    z-index: 2;
    color: #1E3856;
}

.hero-booking p {
    margin-top: var(--space-xs);
}

.hero-booking h2 {
    font-size: 24px;
    font-weight: 400;

}

/* ===== INFO ===== */
.info-content h4 {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.info-section {
    background-color: #DEEEFF;
}

.info .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}


/* ===== CARD ===== */

.card-info {
    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9px;
    padding: var(--space-m);

    display: flex;
    flex-direction: column;
    position: relative;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}


.card-info2{
    background: #EDF3F7; 
}

.card-info,
.card-info2 {
    padding: var(--space-m);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
}


.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}





.card-info h4{
    margin-top: var(--space-s);
}

.boks p:has(.dot-iconxs),
.card-info2 p:has(.dot-iconxs) {
    display: block;
    position: relative;
    padding-left: 20px;          
    margin-top: 0;           
    margin-bottom: var(--space-xs); 
}
/* ==========================================================================
   11. PRICES SECTION
   ========================================================================== */
.prices {
    background: #EDF3F7;
}


.section.prices .btn {
    margin-bottom: 0;
}


.price-grid {
    margin-top: var(--space-m);
    gap: var(--space-l);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.price-column {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-m);
    gap: var(--space-s);
    position: relative;
}

.price-item {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}



.price-item.emergency .dot-icon-one {
    background: #4fd1c5;
}

.price-item p {
    margin: 0;
}


/* ===== DESKTOP ===== */
@media (min-width: 1024px) {

.hero-booking .container {
        display: flex;
        align-items: stretch; /* Sørger for, at tekst og billede-kasse er lige høje 🎯 */
        gap: var(--space-2xl);
        width: 100%;
    }
    
    .hero-text-booking {
        flex: 1.2;
    }

    .hero-boks-booking {
        flex: 0.6;  
        height: auto; /* 👈 VIGTIGT: Overskriver de 200px fra mobil, så kassen følger teksten */

    }

    .hero-booking p {
        margin-top: var(--space-m);
    }

    /* 🔥 MAIN LAYOUT */
   .info .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    
    column-gap: var(--space-2xl); /* mellem tekst og card ✅ */
    row-gap: var(--space-3xl);      /* mellem øverste og nederste ✅ */
}

    /* 🔥 NEDERSTE CARDS */
    
 .card-grid {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-m); /* samme som mobil */
    }
/* Prices Desktop */
    .prices {
        text-align: center;
    }

    .price-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin: var(--space-m) auto;
    }

    .price-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .price-column:nth-child(1) {
        border-right: 1px solid #1e40af;
    }

    .price-column:nth-child(2) {
        border-right: 1px solid #1e40af;
    }

    .price-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
}