* {                             /* alle elementer */
    margin: 0;                  /* nulstiller browser-defaults - fx h1 og p har ellers margin */
    padding: 0;                 /* nulstiller browser-defaults */
    box-sizing: border-box;     /* ændrer box-modellen, så width inkluderer padding og border --> gør layout forudsigelige. Konsekvens = man skal selv definere al spacing
                                men gør jeg også*/
}



/* ==========================================
   THEME VARIABLES
========================================== */

:root {

    /* backgrounds */
    --bg-color: #F5EFE6;

    --section-color: #BDCCB0;

    /* text */
    --text-color: #000000;

    /* cards */
    --card-color: #F8F6F2;

    /* buttons */
    --primary-color: #C9895B;

    /* header/footer */
    --header-footer-color: #AFC3A2;
}


/* ==========================================
   DARK MODE
========================================== */

[data-theme="dark"] {

    /* backgrounds */
    --bg-color: #2B2B26;;

    --section-color: #40473A;

    /* text */
    --text-color: #F5F1E8;

    /* cards */
    --card-color: rgba(112, 112, 112, 0.63);

    /* buttons */
    --primary-color: #D9965B;

    /* header/footer */
    --header-footer-color: #AFC3A2;
}


/* footer tekst forbliver sort i dark mode */

[data-theme="dark"] .footer {

    color: black;
}

/* så teksten (dagene) nederst på index forbliver sort i den grå boks */

[data-theme="dark"] .index-opening-day {

    color: black;
}


body,
section,
div,
header,
footer,
a,
button {

    transition:
            background-color 0.3s ease,
            color 0.3s ease;
}

/* Dark mode - de sorte outline cta kan ikke ses på den mørke baggrund i dark mode så her ændre
 de farve når man går i dark mode*/
[data-theme="dark"] .btn-outline-dark {

    border: 2px solid white;

    color: white;

    background-color: transparent;
}

[data-theme="dark"] .btn-outline-dark:hover {

    background-color: white;

    color: black;
}

/* FREMHÆVET EVENT TEKST på arrangementer siden forbliver sort i dark mode */
[data-theme="dark"] .badge {

    color: #000;

}

/* tekst på cards på arrangementer siden forbliver sort */
[data-theme="dark"] .event-card h3,
[data-theme="dark"] .event-card p,
[data-theme="dark"] .event-card a,
[data-theme="dark"] .event-card i {

    color: black;
}

















body{
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Manrope', sans-serif;
}

html {
    scroll-behavior: smooth;
}

main p {

    font-family: 'Manrope', sans-serif;

    font-size: clamp(16px, 1.2vw, 18px);

    font-weight: 400;

    line-height: 1.6;
}




h1 {

    font-family: 'DM Serif Display', serif;

    font-size: clamp(42px, 5vw, 64px);

    font-weight: 700;

    line-height: 1.1;
}



h2 {

    font-family: 'DM Serif Display', serif;

    font-size: clamp(34px, 4vw, 48px);

    font-weight: 700;

    line-height: 1.1;
}



h3 {

    font-family: 'DM Serif Display', serif;

    font-size: clamp(24px, 3vw, 32px);

    font-weight: 600;

    line-height: 1.2;
}





/* ==========================================
   GLOBAL BUTTONS
========================================== */

.btn {

    /* jeg gør knappen fleksibel */
    display: inline-flex;

    /* jeg centrerer indholdet */
    justify-content: center;

    align-items: center;

    /* responsiv padding */
    padding:
            clamp(16px, 1.5vw, 18px)
            clamp(32px, 3vw, 45px);

    /* jeg gør knappen rund */
    border-radius: 999px;

    /* jeg fjerner underline */
    text-decoration: none;

    /* font */
    font-family: 'Manrope', sans-serif;

    /* responsiv fontstørrelse */
    font-size: clamp(16px, 1.5vw, 20px);

    font-weight: 600;

    /* bedre vertical alignment */
    line-height: 1;

    /* smooth hover animation */
    transition:
            background-color 0.3s ease,
            color 0.3s ease,
            transform 0.3s ease;

    cursor: pointer;
}


/* ==========================================
   GLOBAL HOVER
========================================== */

.btn:hover {

    /* lille løft ved hover */
    transform: translateY(-3px);
}


/* ==========================================
   PRIMARY BUTTON
========================================== */

.btn-primary {

    background-color: var(--primary-color);

    color: black;
}

.btn-primary:hover {

    background-color: #c88552;
}




/* ==========================================
   LIGHT OUTLINE BUTTON
========================================== */

.btn-outline-light {

    border: 2px solid white;

    background-color: transparent;

    color: white;
}

.btn-outline-light:hover {

    background-color: white;

    color: black;
}


/* ==========================================
   DARK OUTLINE BUTTON
========================================== */

.btn-outline-dark {

    border: 2px solid black;

    background-color: transparent;

    color: black;
}

.btn-outline-dark:hover {

    background-color: black;

    color: white;
}















































/* ==========================================
   HEADER
========================================== */

.header {

    /* header baggrund */
    background-color: var(--header-footer-color);

    /* responsiv højde */
    min-height: clamp(80px, 10vw, 110px);

    /* logo og navigation på samme række */
    display: flex;

    justify-content: space-between;

    align-items: center;

    /* responsiv luft i siderne */
    padding:
            0
            clamp(20px, 5vw, 40px);

    position: relative;
}

/* ==========================================
   LOGO
========================================== */

.logo img {

    /* responsiv logo størrelse */
    height: clamp(45px, 6vw, 70px);

    width: auto;

    display: block;
}

/* ==========================================
   NAV LINKS
========================================== */

.nav-links {

    /* links på række */
    display: flex;

    /* responsiv afstand */
    gap: clamp(20px, 3vw, 50px);

    list-style: none;

    margin: 0;

    padding: 0;
}


.nav-links a {

    position: relative;

    text-decoration: none;

    color: #000;

    font-size: clamp(16px, 1.3vw, 20px);

    font-weight: 500;

    transition:
            color 0.3s ease,
            opacity 0.3s ease;
}

/* HOVER */

.nav-links a:hover {
    color: #C9895B;
}

/* AKTIV SIDE */

.nav-links a.active {
    color: #000000;
}

/* STREG UNDER AKTIV SIDE */

.nav-links a.active::after {

    /* jeg opretter et tomt pseudo-element. Uden content ville pseudo-elementet ikke eksistere
    så ::after ville ikke blive vist */
    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 100%;

    height: clamp(2px, 0.3vw, 3px);

    background-color: #C9895B;

    border-radius: 999px;
}

/* dark/light mode */
#theme-toggle{

    width:35px;
    height:35px;

    border-radius:50%;

    background: #2B2B26;
    border: 2px solid #c9895b;

    font-size:18px;
    cursor:pointer;

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

    transition:0.3s;
}

#theme-toggle:hover{
    transform:scale(1.05);
}

/* så dark/light mode er til højre/rigtigt placeret */
.nav{
    display:flex;
    align-items:center;
    gap:30px;
}

#theme-toggle{
    margin-left:20px;
    flex-shrink:0;
}





/* ==========================================
   BURGER MENU
========================================== */

/* jeg skjuler checkboxen */
#menu-toggle {

    display: none;
}


/* burger ikon */

.burger {

    display: none;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;
}


/* de tre streger */

.burger span {

    width: 30px;

    height: 3px;

    background-color: black;

    border-radius: 999px;

    transition: 0.3s;
}











































/* ==========================================
   INDEX PAGE
========================================== */
/* ==========================================
   HERO
========================================== */

.index-hero {

    position: relative;

    width: 100%;

    min-height: 85vh;

    overflow: visible;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* VIDEO */

.index-hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;
}


/* OVERLAY - så teksten bliver læsbar */

.index-hero-overlay {

    position: absolute;

    inset: 0;                  /* fylder hele hero automatisk */

background-color: rgba(0,0,0,0.35);   /* sort overlay med 35% opacity */

    z-index: 1;         /* så den ligger ovenpå video, da video er 0 */
}


/* TERRACOTTA LINE */

.index-hero::after {

    content: "";

    position: absolute;         /* linjen ligger ovenpå hero */

    left: 0;
    bottom: 0;              /* placeret præcist nederst */

    width: 100%;

    height: clamp(6px, 1vw, 12px);

    background-color: #C9895B;

    z-index: 3;         /* over overlay og video men under CTA */
}


/* CONTENT */

.index-hero-content {

    position: relative;         /* content ligger over overlay. z.index virker korrekt */

    z-index: 2;

    width: min(90%, 1100px);           /* betyder brug det mindste af:
                                        - 90% af skærmen --> mobil → ca 90%
                                        - 1100px --> desktop → stopper ved 1100px */

    text-align: center;     /* hero-content centreres */

    color: white;

    padding-inline: 20px;           /* gør ar teksten aldrig rammer kanten på mobil og bedre breathing room */

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* H1 */

.index-hero-content h1 {

    color: white;

    margin-bottom: 20px;
}


/* TEXT */

.index-hero-content p {

    width: min(100%, 900px);

    color: white;

    line-height: 1.5;

    font-size: clamp(18px, 2vw, 24px);
}


/* BUTTONS */

.index-hero-buttons {

    position: absolute;

    left: 50%;
    bottom: -22px;

    transform: translateX(-50%);

    display: flex;

    gap: clamp(15px, 3vw, 60px);

    z-index: 5;

    flex-wrap: nowrap;

    justify-content: center;
}




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

.index-intro-section {

    padding: 0 clamp(20px, 6vw, 100px) 0;
    margin-bottom: clamp(100px, 10vw, 200px);
    margin-top: clamp(100px, 10vw, 200px);
}

.index-intro-section p {

    max-width: 1100px;

    margin-bottom: 30px;
}

.index-intro-section h2 {

    max-width: 1100px;

    margin-bottom: 20px;
}








/* ==========================================
   FEATURED EVENT
========================================== */

.index-featured-event-section {

    display: flex;          /* lægger content og image ved siden af hinanden */

    align-items: center;        /* centrerer content og billede vertikalt */

    gap: clamp(40px, 6vw, 80px);

    padding: clamp(60px, 8vw, 80px)
    clamp(20px, 6vw, 100px);

    margin-top: clamp(100px, 12vw, 200px);


    background-color: var(--section-color);
}


/* content */

.index-featured-event-content {

    flex: 1;        /* content tager fleksibel plads - elementet må fylde den plads der er tilgængelig inde i flex-containeren. */

    max-width: 550px;
}

.index-featured-event-content h2 {

    margin-bottom: clamp(15px, 2vw, 20px);
}

.index-featured-event-content h3 {

    margin-bottom: clamp(15px, 2vw, 20px);
}

.index-featured-event-content p {

    margin-bottom: clamp(25px, 4vw, 40px);
}


/* list */

.index-featured-event-list {

    list-style: none;

    padding: 0;

    margin-bottom: clamp(30px, 5vw, 50px);
}

.index-featured-event-list li {

    margin-bottom: clamp(10px, 2vw, 15px);
}


/* buttons */

.index-featured-event-buttons {

    display: flex;

    gap: clamp(15px, 3vw, 30px);

    flex-wrap: wrap;
}


/* image */

.index-featured-event-image {

    flex: 1;

    display: flex;

    justify-content: center;
}

.index-featured-event-image img {

    width: 100%;

    max-width: 700px;

    border-radius: 20px;

    display: block;
}



/* ==========================================
   STORY SECTION - unik minigolf og hyggelig cafe
========================================== */

.index-story-section {

    padding: clamp(100px, 12vw, 200px)
    clamp(20px, 6vw, 100px);
    /* hvad det gør:
    Desktop:
    200px top/bottom
    100px sider

    Mobil:
    100px top/bottom
    20px sider*/
}


/* wrapper */

.index-story-wrapper {

    display: flex;

    align-items: center;

    gap: clamp(40px, 6vw, 80px);
}


/* content */

.index-story-content {

    flex: 1;

    max-width: 600px;
}

.index-story-content p {

    margin-bottom: clamp(20px, 3vw, 30px);
}


/* buttons */

.index-story-buttons {

    display: flex;

    flex-direction: column;

    gap: clamp(20px, 3vw, 30px);

    margin-top: clamp(40px, 5vw, 60px);

    align-items: flex-start;
}


/* images */

.index-story-images {

    display: flex;

    margin: 0;
}

.index-story-images img {

    width: clamp(220px, 28vw, 330px);

    aspect-ratio: 330 / 520;        /* lader browseren selv regne højden ud korrekt */

    object-fit: cover;

    display: block;
}


/* de to næste afsnit er så billederne ser sådan ud:
    ╭─────────┬─────────╮
    │         │         │
    │   Per   │ Pernille│
    │         │         │
    ╰─────────┴─────────╯
 så ikke alle hjørne er buet på de to billeder*/
.index-story-images img:first-child {

    border-top-left-radius: clamp(12px, 2vw, 20px);

    border-bottom-left-radius: clamp(12px, 2vw, 20px);
}


.index-story-images img:last-child {

    border-top-right-radius: clamp(12px, 2vw, 20px);

    border-bottom-right-radius: clamp(12px, 2vw, 20px);
}





/* ==========================================
   GALLERY
========================================== */

.index-gallery-section {

    padding:
            0
            clamp(20px, 6vw, 100px)
            clamp(100px, 12vw, 200px);
}


/* text */

.index-gallery-section p {

    /* jeg giver responsiv luft under teksten */
    margin-bottom: clamp(20px, 3vw, 30px);

    /* jeg begrænser læsebredden hvilket forhindrer ekstremt lange tekstlinjer og dårlig readability på store skærme */
    max-width: 1000px;
}


/* slider */

.index-gallery-slider {

    /* jeg gør slideren til reference for absolute buttons */
    position: relative;

    /* jeg centrerer billedet */
    display: flex;

    justify-content: center;

    align-items: center;

    /* jeg giver responsiv luft under slideren */
    margin-bottom: clamp(25px, 4vw, 40px);
}


/* image */

.index-gallery-slider img {

    /* billedet fylder hele bredden */
    width: 100%;

    /* men stopper ved 1200px */
    max-width: 1200px;

    /* jeg holder proportionerne responsive
     Så browseren:
    -regner selv højden ud
    -holder proportionerne korrekte
    -bliver responsiv automatisk*/
    aspect-ratio: 16 / 9;

    /* jeg beskærer billedet pænt */
    object-fit: cover;

    /* afrundede hjørner */
    border-radius: 20px;

    /* fjerner inline spacing */
    display: block;
}


/* buttons */

.index-gallery-slider button {

    /* jeg placerer knapperne ovenpå slideren */
    position: absolute;

    /* responsiv størrelse */
    width: clamp(45px, 6vw, 70px);

    height: clamp(45px, 6vw, 70px);

    /* jeg gør knapperne runde */
    border-radius: 50%;

    /* jeg fjerner standard border */
    border: none;

    /* baggrundsfarve */
    background-color: var(--section-color);

    /* cursor bliver til hånd */
    cursor: pointer;

    /* responsiv ikon størrelse */
    font-size: clamp(1.2rem, 3vw, 2rem);

    /* smooth hover */
    transition: transform 0.3s ease;
}


.index-gallery-prev {
    left: clamp(10px, 2vw, 20px);
}

.index-gallery-next {
    right: clamp(10px, 2vw, 20px);
}


/* hover */

.index-gallery-slider button:hover {

    /* lille hover animation */
    transform: scale(1.05);
}





/* ==========================================
   COURSE MAP
========================================== */

.index-course-map-section {

    padding:
            0
            clamp(20px, 6vw, 100px)
            clamp(100px, 12vw, 200px);
}

.index-course-map-section h2 {
    margin-bottom: clamp(15px, 2vw, 20px);
}

.index-course-map {

    margin: 0;
}

.index-course-map img {

    /* billedet fylder hele containeren */
    width: 100%;

    /* billedet bliver responsivt */
    max-width: 1600px;

    /* jeg holder proportionerne korrekte på billedet */
    height: auto;

    /* fjerner inline whitespace
    UDEN display:block
    ┌───────────┐
    │ billede   │
    └───────────┘
    ____________ ← lille gap til tekst
    MED display:block
    ┌───────────┐
    │ billede   │
    └───────────┘
    ingen ekstra luft.*/
    display: block;

    /* centrerer billedet */
    margin: 0 auto;
}



/* ==========================================
   GAMES
========================================== */

.index-games-section {

    padding:
            clamp(100px, 12vw, 200px)
            clamp(20px, 6vw, 100px);

    /* baggrundsfarve */
    background-color: var(--section-color);

    /* jeg giver responsiv afstand til sektionen under */
    margin-bottom: clamp(100px, 12vw, 200px);
}


/* top */

.index-games-top {

    /* jeg placerer content og billede ved siden af hinanden */
    display: flex;

    /* jeg aligner dem i toppen */
    align-items: flex-start;

    /* responsiv afstand mellem dem */
    gap: clamp(40px, 6vw, 100px);
}


/* content */

.index-games-content {

    flex: 1;
}

.index-games-content h2 {

    /* luft under h2 */
    margin-bottom: clamp(15px, 2vw, 20px);
}

.index-games-content h3 {

    /* luft under h3 */
    margin-bottom: clamp(20px, 3vw, 30px);
}

.index-games-content p {

    /* luft mellem paragraphs */
    margin-bottom: clamp(10px, 2vw, 15px);

    /* jeg begrænser læsebredden */
    max-width: 700px;
}


/* image */

.index-games-image img {

    /* billedet fylder containeren */
    width: 100%;

    /* men stopper ved 650px */
    max-width: 650px;

    /* afrundede hjørner */
    border-radius: 15px;

    /* fjerner inline whitespace */
    display: block;
}


/* icons */

.index-games-icons {

    /* jeg centrerer billedet */
    text-align: center;

    /* responsiv luft over */
    margin-top: clamp(50px, 8vw, 80px);

    margin-bottom: 0;
}

.index-games-icons img {

    /* billedet fylder størstedelen af containeren men aldrig over 1300px */
    width: min(100%, 1300px);

    /* jeg centrerer billedet */
    margin: 0 auto;

    /* fjerner inline whitespace */
    display: block;
}





/* ==========================================
   WHY SECTION
========================================== */

.index-why-section {

    /* Top:      0
    Sider:    20-100px
    Bund:     100-200px */
    padding:
            0
            clamp(20px, 6vw, 100px)
            clamp(100px, 12vw, 200px);

    /* jeg placerer content og billede ved siden af hinanden */
    display: flex;

    align-items: center;

    gap: clamp(40px, 6vw, 100px);
}


/* ==========================================
   CONTENT
========================================== */

.index-why-content {

    /* content fylder fleksibelt */
    flex: 1;

    /* jeg begrænser læsebredden */
    max-width: 700px;
}

.index-why-content h2 {

    /* luft under overskrift */
    margin-bottom: clamp(20px, 3vw, 30px);
}

.index-why-content p {

    /* luft mellem paragraphs */
    margin-bottom: clamp(15px, 4vw, 40px);
}

.index-why-content strong {

    font-weight: 700;
}


/* ==========================================
   IMAGE
========================================== */

.index-why-image img {

    /* billedet fylder containeren */
    width: 100%;

    /* men stopper ved designets størrelse */
    max-width: 520px;

    border-radius: 15px;

    display: block;
}



/* ==========================================
   REVIEWS
========================================== */

.index-reviews-section {

    /* grøn baggrund */
    background-color: var(--section-color);

    /* responsiv spacing */
    padding:
            clamp(80px, 10vw, 100px)
            clamp(20px, 6vw, 100px);

    margin-bottom: clamp(100px, 12vw, 200px);
}


/* ==========================================
   HEADING
========================================== */

.index-reviews-section h2 {

    margin-bottom: clamp(20px, 3vw, 30px);
}


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

.index-reviews-intro {

    /* jeg begrænser læsebredden */
    max-width: 700px;

    /* luft ned til anmeldelser */
    margin-bottom: clamp(40px, 8vw, 80px);
}


/* ==========================================
   GALLERY
========================================== */

.index-reviews-gallery {

    /* billeder ved siden af hinanden */
    display: flex;

    gap: clamp(20px, 5vw, 120px);

    margin-bottom: clamp(40px, 8vw, 80px);
}

.index-reviews-gallery img {

    /* billederne deler pladsen */
    flex: 1;

    width: 70%;

    margin: 0 auto;     /* centrere billeder */

    border-radius: 20px;

    display: block;

    /* let skygge */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}





/* ==========================================
   OPENING HOURS
========================================== */

.index-opening-section {

    padding:
            0
            clamp(20px, 6vw, 100px)
            clamp(100px, 12vw, 200px);
    /* map og content ved siden af hinanden */
    display: flex;

    align-items: center;

    gap: clamp(40px, 6vw, 80px);
}


/* ==========================================
   MAP
========================================== */

.index-opening-map {

    flex: 1;

    width: 100%;
}

.index-opening-map iframe {

    /* kortet fylder hele containeren */
    width: 100%;

    /* responsiv højde */
    height: clamp(350px, 60vw, 620px);

    border: none;

    border-radius: 15px;

    display: block;
}


/* ==========================================
   CONTENT
========================================== */

.index-opening-content {

    flex: 1;
}

.index-opening-text {

    font-size: clamp(18px, 2vw, 20px);

    margin-bottom: clamp(25px, 4vw, 40px);
}


/* ==========================================
   OPENING HOURS ROWS
========================================== */

.index-opening-hours {

    /* jeg gør containeren til flex */
    display: flex;

    /* jeg placerer rækkerne under hinanden */
    flex-direction: column;

    /* responsiv afstand mellem rækkerne */
    gap: clamp(12px, 2vw, 16px);

    /* responsiv luft under opening hours */
    margin-bottom: clamp(20px, 3vw, 30px);
}


/* row */

.index-opening-row {

    display: flex;

    overflow: hidden;

    border-radius: 15px;
}


/* day */

.index-opening-day {

    flex: 1;

    background-color: #D9D9D9;

    padding: clamp(18px, 2vw, 22px);

    text-align: center;

    font-size: clamp(16px, 2vw, 22px);
}


/* time */

.index-opening-time {

    flex: 1;

    background-color: var(--section-color);

    padding: clamp(18px, 2vw, 22px);

    text-align: center;

    font-size: clamp(16px, 2vw, 22px);
}


/* ==========================================
   NOTE
========================================== */

.index-opening-note {

    /* jeg gør noten lidt mindre end normal brødtekst */
    font-size: clamp(15px, 1.2vw, 17px);
}






































/* ==========================================
   SUNSET NIGHTS SIDE
========================================== */

.sunset-section-label {

    /* terracotta label */
    color: #C9895B;

    /* store bogstaver */
    text-transform: uppercase;

    font-weight: 700;

    /* lidt tracking gør labels mere elegante */
    letter-spacing: 1px;

    /* responsiv luft under */
    margin-bottom: clamp(12px, 2vw, 20px);
}



/* ==========================================
   HERO
========================================== */

.sunset-hero {

    /* parent til overlay/content */
    position: relative;

    /* responsiv hero højde */
    min-height: min(90vh, 700px);

    /* baggrundsbillede */
    background-image: url("kampagne-billeder/kampagnehero.jpg");

    background-size: cover;

    background-position: center;

    /* jeg centrerer content vertikalt */
    display: flex;

    align-items: center;

    padding:
            clamp(20px, 6vw, 100px)
            clamp(20px, 12vw, 200px);
}


/* mørkt overlay */

.sunset-hero-overlay {

    position: absolute;

    inset: 0;       /* overlay fylder hele hero */

    background-color: rgba(0,0,0,0.35);

    z-index: 1;
}


/* hero content */

.sunset-hero-content {

    /* content over overlay */
    position: relative;

    z-index: 2;

    /* begrænser tekstbredden */
    max-width: 650px;

    color: white;
}


/* hero tekst */

.sunset-hero-content h1 {

    color: white;

    margin-bottom: clamp(15px, 2vw, 20px);
}

/* stor introtekst */

.sunset-hero-lead {

    font-size: clamp(22px, 3vw, 35px);

    line-height: 1.3;

    margin-bottom: clamp(25px, 4vw, 50px);

    color: white;

    font-weight: 500;
}

/* hero brødtekst */

.sunset-hero-text {

    max-width: 500px;

    margin-bottom: clamp(25px, 4vw, 40px);

    color: white;
}


/* hero buttons */

.sunset-hero-buttons {

    display: flex;

    gap: clamp(12px, 2vw, 20px);

    flex-wrap: wrap;
}



/* ==========================================
   ABOUT SECTION
========================================== */

.sunset-about-section {

    /* responsiv spacing */
    padding:
            clamp(100px, 12vw, 200px)
            clamp(20px, 6vw, 100px);

    /* tekst og billede ved siden af hinanden */
    display: flex;

    align-items: center;

    /* responsiv afstand mellem content og billede */
    gap: clamp(40px, 6vw, 100px);
}


/* tekst */

.sunset-about-content {

    flex: 1;

    min-width: 0;
}

.sunset-about-content p {

    /* jeg begrænser læsebredden */
    max-width: 650px;

    /* centrere ud for ikon */
    margin: 0;
}

.sunset-about-content > p {
    /* så tekststykkerne har luft mellem sig */
    margin-bottom: clamp(25px, 4vw, 40px);
}


/* info line */

.sunset-about-info {

    /* ikon og tekst på samme række */
    display: flex;

    align-items: center;

    /* responsiv afstand */
    gap: clamp(10px, 2vw, 15px);

    /* responsiv luft under */
    margin-bottom: clamp(30px, 5vw, 50px);

    flex-wrap: wrap;
}

.sunset-about-info i {

    /* responsiv ikon størrelse */
    font-size: clamp(20px, 3vw, 28px);

}


/* billede */

.sunset-about-image {

    flex: 1;
    min-width: 0;
}

.sunset-about-image img {

    /* billedet fylder containeren */
    width: 100%;

    /* responsiv afrunding */
    border-radius: clamp(12px, 2vw, 20px);

    /* fjerner inline whitespace */
    display: block;
}



/* ==========================================
   OPLEVELSER
========================================== */

.sunset-experiences-section {

    /* responsiv spacing */
    padding:
            0
            clamp(20px, 6vw, 100px)
            clamp(100px, 12vw, 200px);
}


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

.sunset-experience-grid {

    /* responsivt grid */
    display: grid;

    /* automatisk responsive grid:
   - hvert card må minimum være 180px bredt
   - cards vokser fleksibelt og fylder resten af pladsen
   - browseren bestemmer automatisk hvor mange cards
     der kan være på hver række */
    grid-template-columns:
    repeat(auto-fit, minmax(190px, 1fr));

    /* responsiv afstand */
    gap: clamp(20px, 3vw, 30px);

    margin-top: clamp(40px, 5vw, 60px);
}


/* ==========================================
   CARDS
========================================== */

.sunset-experience-card {

    /* lys baggrund */
    background-color: var(--card-color);

    /* responsiv afrunding */
    border-radius: clamp(14px, 2vw, 20px);

    overflow: hidden;

    /* jeg laver card layout */
    display: flex;

    flex-direction: column;

    height: 100%;

}


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

.sunset-experience-card-content {

    /* responsiv padding */
    padding:
            clamp(25px, 4vw, 35px)
            clamp(15px, 2vw, 20px)
            clamp(25px, 4vw, 30px);

    text-align: center;

    /* content fylder resten af card */
    flex: 1;

    /* fleksibelt layout */
    display: flex;

    flex-direction: column;

    /* elementerne fordeles i højden */
    justify-content: space-between;

    align-items: center;

    /* responsiv afstand mellem elementer */
    gap: clamp(15px, 2vw, 20px);

    min-height: 320px;

}


/* ==========================================
   ICONS
========================================== */

.sunset-experience-card-content i {

    /* responsiv ikon størrelse */
    font-size: clamp(28px, 4vw, 42px);

    color: #000;
}


/* ==========================================
   TITLES
========================================== */

.sunset-experience-card-content h3 {

    line-height: 1.1;
}


/* ==========================================
   TEXT
========================================== */

.sunset-experience-card-content p {

    line-height: 1.5;

    /* bedre læsebredde */
    max-width: 22ch;
}


/* ==========================================
   IMAGES
========================================== */

.sunset-experience-card img {

    width: 100%;

    /* responsiv billedhøjde */
    height: clamp(140px, 18vw, 180px);

    object-fit: cover;

    display: block;
}


/* ==========================================
   WHY SECTION
========================================== */

.sunset-why-section {

    /* responsiv spacing */
    padding:
            0
            clamp(20px, 6vw, 100px)
            clamp(100px, 12vw, 200px);
}

/* ==========================================
   SECTION HEADER
========================================== */

.sunset-section-header {

    /* responsiv luft under overskriften */
    margin-bottom: clamp(5px, 2vw, 15px);
}

/* ==========================================
   TEXT CONTAINER
========================================== */

.sunset-why-text {

    /* jeg begrænser læsebredden */
    max-width: 900px;
}

/* ==========================================
   PARAGRAPHS
========================================== */

.sunset-why-text p {

    margin-bottom: clamp(20px, 3vw, 30px);

    line-height: 1.7;
}






/* ==========================================
   GALLERY
========================================== */

.sunset-gallery-section {

    /* grøn baggrund */
    background-color: var(--section-color);

    /* responsiv spacing rundt om sektionen */
    padding:
            clamp(60px, 8vw, 100px)
            clamp(20px, 6vw, 100px);

    /* jeg centrerer tekst og knap */
    text-align: center;
}

/* ==========================================
   SECTION HEADER
========================================== */

.sunset-section-header {

    /* luft under overskriften */
    margin-bottom: clamp(20px, 3vw, 30px);
}


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

.sunset-gallery-grid {

    /* jeg begrænser hvor bredt galleriet må blive */
    max-width: 1200px;

    /* jeg centrerer gridet
       og giver responsiv luft under */
    margin:
            0
            auto
            clamp(40px, 6vw, 80px);

    /* jeg bruger CSS Grid layout */
    display: grid;

    /* editorial layout:
       - første kolonne bliver stor
       - de to andre bliver mindre */
    grid-template-columns: 2fr 1fr 1fr;

    /* responsiv rækkehøjde */
    grid-template-rows:
        clamp(180px, 22vw, 240px)
        clamp(140px, 16vw, 180px);

    /* responsiv afstand mellem billeder */
    gap: clamp(8px, 1vw, 12px);
}


/* ==========================================
   IMAGES
========================================== */

.sunset-gallery-grid img {

    /* billederne fylder grid-cellen */
    width: 100%;

    height: 100%;

    /* billeder beskæres pænt */
    object-fit: cover;

    /* responsiv afrunding */
    border-radius: clamp(10px, 1.5vw, 12px);

    /* fjerner whitespace under billeder */
    display: block;
}





/* ==========================================
   PRAKTISK INFORMATION
========================================== */

.sunset-practical-section {

    /* responsiv spacing */
    padding:
            clamp(100px, 12vw, 200px)
            clamp(20px, 6vw, 100px);

    /* jeg placerer content og billede ved siden af hinanden */
    display: flex;

    justify-content: space-between;

    /* jeg aligner elementerne i toppen */
    align-items: flex-start;

    /* responsiv afstand mellem kolonner */
    gap: clamp(40px, 6vw, 80px);
}


/* ==========================================
   LEFT CONTENT
========================================== */

.sunset-practical-content {

    /* content får mere plads end billedet */
    flex: 1.5;
}


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

.sunset-practical-grid {

    /* jeg placerer cards på række */
    display: flex;

    /* responsiv afstand mellem cards */
    gap: clamp(25px, 4vw, 60px);

    /* cards må gerne wrappe */
    flex-wrap: wrap;
}


/* ==========================================
   CARDS
========================================== */

.sunset-practical-card {

    /* card bredde */
    flex: 1 1 100px;

    /* jeg stacker indholdet */
    display: flex;

    flex-direction: column;

    gap: clamp(10px, 1.5vw, 16px);

    /* begrænser card bredde */
    max-width: 150px;
}


/* ==========================================
   PRAKTISK INFORMATION - ICONS
========================================== */

.sunset-practical-card i {

    /* responsiv ikon størrelse */
    font-size: clamp(30px, 4vw, 42px);
}




/* ==========================================
   TEXT
========================================== */

.sunset-practical-card p {

    line-height: 1.6;

    max-width: 22ch;
}


/* ==========================================
   IMAGE
========================================== */

.sunset-practical-image {

    /* fleksibel billedbredde */
    flex: 0 1 clamp(280px, 40vw, 520px);
}

/* ==========================================
   IMAGE
========================================== */

.sunset-practical-image img {

    width: 100%;

    /* responsiv afrunding */
    border-radius: clamp(12px, 2vw, 20px);

    display: block;
}




/* ==========================================
   CTA SECTION
========================================== */

.sunset-cta-section {

    /* responsiv spacing */
    padding:
            clamp(70px, 8vw, 120px)
            clamp(20px, 6vw, 100px);

    /* responsiv afstand til footer */
    margin-bottom: clamp(100px, 12vw, 200px);

    /* background billede */
    background-image:
            url("kampagne-billeder/fade.jpg");

    background-size: cover;

    background-position: center;

    /* jeg centrerer content */
    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;
}

/* ==========================================
   TITLE
========================================== */

.sunset-cta-content h2 {

    color: white;

    /* responsiv afstand til knappen */
    margin-bottom: clamp(25px, 4vw, 50px);
}





















































/*ARRANGEMENTER SIDE*/

.hero{

    height:90vh;

    background-image:url('arrangementer-billeder/arrangementerheropic.jpg');
    background-size:cover;
    background-position:center;

    position:relative;

    display:flex;
    align-items:center;

    padding:0 80px;
}

.overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.35);
}

.hero-content{

    position:relative;
    z-index:2;

    max-width:700px;

    color:white;
}

.eyebrow{

    font-size:12px;
    letter-spacing:2px;

    margin-bottom:18px;
}

.hero h1{

    margin-bottom:28px;
}

.hero p{

    max-width:450px;
    font-size:24px;

    margin-bottom:36px;


}






/* INTRO TEKST - SEKTION */

.intro{

    padding:120px 20px;
}

.intro-container{

    max-width:1010px;

    margin:auto;

    text-align:center;
}

.intro p{

    font-family:'Manrope', sans-serif;

    font-size:18px;

    margin-bottom:24px;

    letter-spacing:0.5px;

    line-height:2.5;
}
/* SÆT DEN HERUNDER */

.intro .secondary-btn{

    margin-top:40px;
}

/*FREMHÆVET EVENT SUNSET NIGHT - SEKTION */

.featured-event{

    background-color: var(--section-color);

    margin:0px;

    padding:70px;

    border-radius:0px; /*sat helt ud til siderne = 0*/

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}


/*LILLE BOKS - FREMHÆVET EVENT */

.badge{

    display:inline-block;

    background:white;

    padding:10px 18px;

    border-radius:10px;

    font-size:12px;

    margin-bottom:24px;
}


/*SUNSET NIGHT TITEL*/

.featured-text h2{

    font-size:50px;
    font-weight:50;

    margin-bottom:24px;
}



.event-info{

    margin:36px 0;
}



.info-item{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;
}



/*SUNSET NIGHT BILLEDE (FREMHÆVET EVENT)*/

.featured-image img{

    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:15px;
}

.events{

    padding:160px 40px; /*AFSTAND MELLEM EVENTS*/
}



/*ALLE VORES ARRANGEMENTER OVERSKRIFT*/

.section-title{

    text-align:center;

    margin-bottom:80px;
}

.section-title h2{
}

.section-title h2::after{

    content:"";

    display:block;

    width:100px;

    height:2px;

    background:#9C9C8B;

    margin:24px auto;
}

/* SLIDER WRAPPER */

.slider-wrapper4{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 70px;
}



/* EVENT GRID */


.event-grid{
    display:flex;
    gap:32px;
    overflow-x:auto;
    scroll-behavior:smooth;
}

.event-grid::-webkit-scrollbar{
    display:none;
}

.event-grid{
    overflow-y:hidden;
}

/* PIL KNAPPER */

.slider-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 42px;
    cursor: pointer;
    z-index: 10;
    color: black;
}

.left{
    left: 10px;
}

.right{
    right: 10px;
}



/* CARDS */

.event-card{
    width: 230px;
    flex-shrink: 0;
    background: #f5efe6;
    border: 1px solid black;
    border-radius: 10px;
    overflow: hidden;
}



/* BILLEDER */

.event-card img{
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}



/* INDHOLD */

.card-content{
    padding: 13px;
}



/* BADGE */

.event-badge{
    display: inline-block;
    padding: 6px 12px;
    background: #E7E8DA;
    border-radius: 5px;
    font-size: 10px;
    letter-spacing: 1px;
    color: #6E735F;
    margin-bottom: 14px;
}



/* TITEL */

.card-content h3{
    font-size: 22px;
    line-height: 1.2;
    margin: 12px 0;
}



/* BRØDTEKST */

.card-content p{
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}



/* INFO */

.event-meta{
    margin-bottom: 16px;
}

.event-meta p{
    font-size: 13px;
    margin-bottom: 6px;
    color: #4F4F4F;
}

.event-meta i{
    font-size: 12px;
    margin-right: 6px;
}



/* KNAP */

.card-content a{
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #d3cdc3;
    border-radius: 999px;
    text-decoration: none;
    color: #4a4a4a;
    font-size: 12px;
}

/*LILLE GALLERI MED 3 BILLEDER*/

.gallery{

    padding:120px 40px;
}

.gallery-top img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:15px;
}

.gallery-bottom{

    display:grid;

    grid-template-columns:0.8fr 1.2fr;

    gap:24px;

    margin-top:24px;
}

.gallery-bottom img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:15px;
}

/*KLAR TIL NÆSTE OPLEVELSE - SEKTION*/
/* CTA */


.cta-section{

    padding:20px 40px;
}

.cta-content{

    padding:40px;
}

.cta-content h3{

    font-size:50px; /*KLAR TIL NÆSTE OPLEVELSE TITEL*/

    line-height:0.95;

    margin-bottom:24px;
}

.cta-buttons{

    display:flex;

    gap:18px;

    margin-top:36px;

    margin-bottom: 100px;
}



/* ==========================
   TABLET
========================== */

@media (max-width: 1024px){

    .featured-event{
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px;
    }

    .featured-text{
        text-align: center;
    }

    .featured-image img{
        height: 400px;
    }

    .gallery-bottom{
        grid-template-columns: 1fr;
    }

    .cta-buttons{
        justify-content: center;
    }

}




/* ==========================
   MOBIL
========================== */

@media (max-width: 768px){

    .hero{
        padding: 0 20px;
        height: 70vh;
    }

    .hero h1{
        font-size: 3rem;
    }

    .hero p{
        font-size: 1rem;
        max-width: 100%;
    }

    .intro{
        padding: 80px 20px;
    }

    .intro p{
        font-size: 16px;
        line-height: 1.8;
    }

    .featured-event{
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 30px;
    }

    .featured-text h2{
        font-size: 38px;
    }

    .featured-image img{
        height: 280px;
    }

    .events{
        padding: 100px 20px;
    }

    .slider-wrapper4{
        padding: 0;
    }

    .slider-btn{
        display: none;
    }

    .event-card{
        width: 260px;
    }

    .gallery{
        padding: 80px 20px;
    }

    .gallery-top img{
        height: 300px;
    }

    .gallery-bottom{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-bottom img{
        height: 220px;
    }

    .cta-content{
        padding: 20px;
        text-align: center;
    }

    .cta-content h3{
        font-size: 36px;
    }

    .cta-buttons{
        flex-direction: column;
        gap: 12px;
    }

}






























/* ==========================================
   FOOTER
========================================== */

.footer {

    /* footer baggrund */
    background-color: var(--header-footer-color);

    /* responsiv spacing */
    padding:
            clamp(60px, 8vw, 100px)
            clamp(20px, 6vw, 100px);
}

.footer a,
.footer p {

    /* responsiv footer tekst */
    font-size: clamp(16px, 1.4vw, 19px);
}


/* ==========================================
   TOP DEL
========================================== */

.footer-top {

    /* kolonner ved siden af hinanden */
    display: flex;

    /* responsiv afstand */
    gap: clamp(40px, 6vw, 100px);

    /* responsiv luft ned til footer-bottom */
    margin-bottom: clamp(60px, 8vw, 120px);
}

.footer-column {

    flex: 1;

    min-width: 0;       /* forhindrer flex overflow og lange ord der ødelægger layout */
}

.footer-column h3 {

    /* luft under overskrift */
    margin-bottom: clamp(20px, 3vw, 35px);
}


/* ==========================================
   ÅBNINGSTIDER
========================================== */

.footer-hours {

    display: flex;

    flex-direction: column;

    gap: clamp(12px, 2vw, 20px);
}


/* jeg laver én samlet række */

.footer-row {

    /* dag og tid på samme række */
    display: flex;
}



/* jeg styler venstre halvdel */

.footer-day {

    flex: 2;

    background-color: #D7DEC9;

    padding:
            clamp(14px, 2vw, 18px)
            clamp(18px, 3vw, 25px);

    border-radius: 12px 0 0 12px;
}


/* jeg styler højre halvdel */

.footer-time {

    flex: 1;

    background-color: #D9D9D9;

    padding: 18px 25px;

    text-align: center;

    border-radius: 0 12px 12px 0;

}

.footer-note {

    margin-top: 35px;

}


/* ==========================================
   FIND OS
========================================== */

.footer-contact-item {

    display: flex;

    align-items: center;

    gap: clamp(15px, 2vw, 20px);

    margin-bottom: clamp(20px, 4vw, 35px);
}

.footer-contact-item i {

    /* jeg gør ikonerne store ligesom designet */
    font-size: 2rem;

    width: 40px;

}

.footer-contact-item p {

    line-height: 1.5;

}

.footer-contact-item a {

    /* jeg gør teksten sort */
    color: black;

    /* jeg fjerner understregning */
    text-decoration: none;
}

.footer-contact-item a:hover {

    color: #C9895B;
}

.social-icons a {

    width: clamp(45px, 6vw, 60px);

    height: clamp(45px, 6vw, 60px);
}


/* ==========================================
   KNAP
========================================== */

.footer-btn {

    display: inline-block;

    margin-top: 20px;

    padding: 15px 35px;

    background-color: #C9895B;

    color: black;

    text-decoration: none;

    border-radius: 999px;

    font-family: 'Manrope', sans-serif;

    font-weight: 600;

    transition: 0.3s;

}

.footer-btn:hover {

    transform: translateY(-3px);

}


/* ==========================================
   LINKS
========================================== */

.footer-links {

    list-style: none;

    padding: 0;

}

.footer-links li {

    /* responsiv afstand mellem links */
    margin-bottom: clamp(12px, 2vw, 18px);

}

.footer-links a {

    color: black;

    text-decoration: none;

}


/* ==========================================
   SOCIALE MEDIER
========================================== */

.social-icons {

    /* jeg placerer ikonerne på række */
    display: flex;

    /* responsiv afstand mellem ikonerne */
    gap: clamp(12px, 2vw, 20px);

    /* responsiv luft over ikonerne */
    margin-top: clamp(25px, 4vw, 40px);

    /* ikonerne må wrappe hvis der ikke er plads */
    flex-wrap: wrap;
}

.social-icons a {

    /* responsiv størrelse */
    width: clamp(45px, 6vw, 60px);

    height: clamp(45px, 6vw, 60px);

    /* cirkel */
    border-radius: 50%;

    /* border */
    border: 3px solid black;

    /* jeg centrerer ikonet */
    display: flex;

    justify-content: center;

    align-items: center;

    /* ikonfarve */
    color: black;

    text-decoration: none;

    /* responsiv ikon størrelse */
    font-size: clamp(20px, 3vw, 28px);

    /* smooth animation */
    transition:
            transform 0.3s ease,
            background-color 0.3s ease,
            color 0.3s ease;
}

.social-icons a:hover {

    /* lille løft */
    transform: translateY(-3px);

    /* hover baggrund */
    background-color: #C9895B;

    color: black;
}


/* ==========================================
   BUND
========================================== */

.footer-bottom {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: clamp(10px, 2vw, 25px);

    flex-wrap: wrap;

    border-top: 1px solid rgba(0,0,0,0.15);

    padding-top: clamp(20px, 4vw, 35px);

    font-size: clamp(14px, 1vw, 15px);
}

















/* Arrangementer */
/* RESPONSIVE */

@media(max-width:1100px){

    .event-grid{

        grid-template-columns:repeat(2,1fr);
    }

    .featured-event{

        grid-template-columns:1fr;
    }

    .hero h1,
    .section-title h2,
    .cta-content h2{

        font-size:60px;
    }

}

@media(max-width:700px){

    .hero{

        padding:0 30px;
    }

    .hero h1,
    .section-title h2,
    .cta-content h2,
    .featured-text h2{

        font-size:44px;
    }

    .event-grid{

        grid-template-columns:1fr;
    }

    .featured-event,
    .cta-content{

        padding:40px 30px;
    }

}





/* ==========================================
   HEADER - MOBILE NAVIGATION
========================================== */

@media (max-width: 950px) {

    /* jeg viser burgeren */
    .burger {

        display: flex;

        z-index: 1001;
    }

    /* mobilmenu */
    .nav-links {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background-color: #AFC3A2;

        flex-direction: column;

        align-items: center;

        padding: 40px 20px;

        gap: 30px;

        display: none;

        z-index: 1000;
    }

    /* når burgeren trykkes */
    #menu-toggle:checked ~ .nav-links {

        display: flex;
    }


    /* dark/light mode knap kommer frem i burger menu */
    #theme-toggle{
        display:none;
    }

    #menu-toggle:checked ~ #theme-toggle{
        display:flex;
        position:absolute;
        top:30px;
        right:47%;
    }
}






/* ==========================================
   INDEX
========================================== */
/* ==========================================
   MOBILE HERO
========================================== */

@media (max-width: 768px) {

    .index-hero {

        min-height: 70vh;
    }
}

/* TABLET */
@media (max-width: 1024px) {

    .index-hero {

        min-height: 75vh;
    }

    .index-hero-video {

        object-position: center center;
    }

}


/* MOBIL */
@media (max-width: 768px) {

    .index-hero {

        min-height: 60vh;
    }

    .index-hero-video {

        object-position: 60% center;
    }

}


/* ==========================================
   FEATURED EVENT RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .index-featured-event-section {

        flex-direction: column;

        align-items: flex-start;
    }

    .index-featured-event-content {

        max-width: 100%;
    }

    .index-featured-event-image {

        width: 100%;
    }

    .index-featured-event-image img {

        max-width: 100%;
    }
}

/* ==========================================
   STORY RESPONSIVE
========================================== */

@media (max-width: 1100px) {

    .index-story-wrapper {

        flex-direction: column;
    }

    .index-story-content {

        max-width: 100%;
    }

    .index-story-images {

        width: 100%;

        justify-content: center;
    }
}

@media (max-width: 768px) {

    .index-story-images img {

        width: 60%;
    }

    justify-content: center;
}

/* ==========================================
   GALLERY RESPONSIVE
========================================== */

@media (max-width: 768px) {

    .index-gallery-slider button {

        /* jeg flytter knapperne ind på billedet */
        width: 50px;

        height: 50px;
    }

    .index-gallery-prev {

        left: 15px;
    }

    .index-gallery-next {

        right: 15px;
    }
}

/* ==========================================
   GAMES RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .index-games-top {

        /* jeg placerer elementerne under hinanden */
        flex-direction: column;
    }

    .index-games-image img {

        /* billedet fylder hele bredden */
        max-width: 100%;
    }
}


/* ==========================================
   OPENING RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .index-opening-section {

        /* content og map stacker */
        flex-direction: column;
    }

    .index-opening-map iframe {

        min-height: 450px;
    }
}


/* ==========================================
   WHY RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .index-why-section {

        /* jeg placerer elementerne under hinanden */
        flex-direction: column;
    }

    .index-why-content {

        max-width: 100%;
    }
}


/* ==========================================
   REVIEWS RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .index-reviews-gallery {

        /* billederne stacker */
        flex-direction: column;
    }
}






/* ==========================================
   KAMPAGNE SIDE - SUNSET NIGHT
========================================== */
/* ==========================================
   HERO
========================================== */
/* TABLET */
@media (max-width: 1024px) {

    .sunset-hero {

        padding:
                clamp(30px, 5vw, 60px)
                clamp(40px, 6vw, 80px);

        background-position: 60% center;
    }

}


/* MOBIL */
@media (max-width: 768px) {

    .sunset-hero {

        min-height: 70vh;

        padding:
                clamp(20px, 4vw, 40px)
                clamp(20px, 5vw, 30px);

        background-position: 70% center;
    }

    .sunset-hero-content {

        max-width: 100%;
    }

}


/* ==========================================
   ABOUT RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .sunset-about-section {

        /* elementerne stacker */
        flex-direction: column;
    }

    .sunset-about-content,
    .sunset-about-image {

        width: 100%;
    }
}

/* ==========================================
   OPLEVELSER - CARDS
========================================== */

@media (max-width: 768px) {

    .sunset-experience-card img {
        height: clamp(200px, 55vw, 280px);
    }

}


/* ==========================================
   TABLET GALLERY
========================================== */

@media (max-width: 900px) {

    .sunset-gallery-grid {

        /* jeg laver 2 lige store kolonner */
        grid-template-columns: 1fr 1fr;

        /* alle billeder får samme responsive højde */
        grid-template-rows:
            repeat(3, clamp(180px, 28vw, 240px));
    }
}


/* ==========================================
   MOBILE GALLERY
========================================== */

@media (max-width: 600px) {

    .sunset-gallery-grid {

        /* billederne stacker i 1 kolonne */
        grid-template-columns: 1fr;

        /* automatisk responsive højde */
        grid-template-rows:
            repeat(6, clamp(220px, 55vw, 320px));
    }
}

/* ==========================================
   TABLET PRAKTISK INFORMATION
========================================== */

@media (max-width: 800px) {

    .sunset-practical-section {

        /* jeg stacker content og billede */
        flex-direction: column;
    }

    .sunset-practical-image {

        /* billedet fylder hele bredden */
        width: 100%;
    }
}

@media (max-width: 600px) {

    .sunset-practical-grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 30px 20px;
    }

    .sunset-practical-card {

        max-width: none;
    }

}





/* ==========================================
   FOOTER RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .footer-top {

        /* kolonnerne stacker */
        flex-direction: column;
    }

    .footer-column {

        width: 100%;
    }
}