/* =====================================================
   ROOT / FARVER / GLOBALE VARIABLER
   Her defineres farver og responsive størrelser.
   Variabler gør det nemt at ændre farver og spacing ét sted.
===================================================== */

:root {
    --beige: #ece5db;
    --green: #303322;
    --white: #ffffff;
    --black: #000000;

    /* Responsive mellemrum og tekststørrelser */
    --side-space: clamp(20px, 4vw, 92px);
    --section-space: clamp(45px, 7vw, 92px);
    --h1-size: clamp(26px, 5vw, 65px);
    --h2-size: clamp(28px, 5vw, 70px);
    --body-size: clamp(14px, 1.8vw, 25px);
}


/* =====================================================
   GLOBAL RESET
   Gælder hele hjemmesiden.
   Fjerner browserens standard margin/padding.
===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Gør scrolling blød ved anker-links */
html {
    scroll-behavior: smooth;
}

/* Forhindrer horisontal scroll og sikrer minimumsbredde */
html,
body {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden;
}

/* Grundstil for hele siden */
body {
    background: var(--beige);
    color: var(--green);
    font-family: Futura, sans-serif;
}

/* Gør billeder responsive */
img,
video {
    max-width: 100%;
    display: block;
}

/* Wrapper omkring hele hjemmesiden */
.page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--beige);
    overflow: hidden;
}


/* =====================================================
   SIDE 1 — HERO / FORSIDE
===================================================== */

/* Hele hero-sektionen */
.hero {
    position: relative;
    min-height: clamp(520px, 85svh, 926px);
    color: var(--beige);
    overflow: hidden;
}

/* Forsidebilledet fylder hele hero-sektionen */
.hero-img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

/* Mørkt overlay ovenpå hero-billedet */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.10),
            rgba(0, 0, 0, 0.38)
    );
    pointer-events: none;
}

/* Header med logo */
.header {
    position: absolute;
    top: clamp(18px, 3vw, 27px);
    left: clamp(20px, 3vw, 36px);
    z-index: 2;
}

/* Logoets størrelse */
.logo {
    width: clamp(130px, 17vw, 242px);
}

/* Tekstboks ovenpå hero-billedet */
.hero-text {
    position: absolute;
    left: clamp(24px, 3vw, 35px);
    bottom: clamp(40px, 5vw, 80px);
    z-index: 2;
    max-width: calc(100% - 48px);
}

/* Hero hovedoverskrift */
.hero-text h1 {
    font-size: clamp(26px, 5vw, 60px);
    line-height: 1.12;
    letter-spacing: clamp(1px, 0.25vw, 3px);
    font-weight: 500;
}

/* Fremhæver “54 UNITS” */
.hero-text h1 span {
    display: block;
    font-size: var(--h1-size);
    font-weight: 800;
}

/* Link til waiting list */
.hero-link {
    position: absolute;
    right: clamp(20px, 3vw, 38px);
    bottom: clamp(24px, 3vw, 31px);
    z-index: 2;
    color: var(--beige);
    font-size: clamp(11px, 1.5vw, 20px);
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}

/* Dekorativ streg under linket */
.hero-link span {
    display: block;
    width: clamp(130px, 18vw, 245px);
    height: 4px;
    margin-top: 7px;
    background: var(--beige);
}


/* =====================================================
   SIDE 2 — INTRO
===================================================== */

/* Intro-layout med tekst til venstre og billede til højre */
.intro {
    display: grid;
    grid-template-columns: minmax(280px, 406px) minmax(0, 1fr);
    min-height: clamp(650px, 70vw, 810px);
}

/* Venstre tekstkolonne */
.intro-text {
    padding: clamp(35px, 4vw, 38px) var(--side-space);
}

/* Intro-overskrift */
.intro-text h2 {
    font-size: var(--h2-size);
    line-height: 0.98;
    letter-spacing: clamp(2px, 0.3vw, 3.5px);
    font-weight: 900;
    margin-bottom: clamp(35px, 4vw, 52px);
}

/* Teksten “FROM WASTE MATERIAL” */
.intro-text > p {
    font-size: clamp(20px, 3vw, 40px);
    line-height: 1.05;
    letter-spacing: clamp(1px, 0.2vw, 2px);
    font-weight: 500;
    margin-bottom: 0;
}

/* Campusadresse */
.campus {
    font-size: clamp(22px, 2.8vw, 35px);
    line-height: 1.35;
    letter-spacing: clamp(0.8px, 0.2vw, 1.75px);
    margin-top: clamp(100px, 14vw, 220px);
}

/* Campusnavn */
.campus strong {
    display: block;
    font-weight: 900;
}

/* Adresse under campusnavn */
.campus span {
    display: block;
    font-size: clamp(18px, 2.3vw, 30px);
    letter-spacing: 0.45px;
    margin-top: 4px;
}

/* Container omkring intro-billedet */
.intro-image-wrap {
    overflow: hidden;
}

/* Intro-billedet fylder hele sin container */
.intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =====================================================
   SIDE 3 — BUILT BY NATURE
===================================================== */

/* Tekstsektionen */
.nature {
    text-align: center;
    padding: var(--section-space) clamp(24px, 8vw, 110px);
    color: var(--green);
}

/* Overskrift */
.nature h2 {
    font-size: clamp(28px, 5vw, 60px);
    letter-spacing: clamp(1.5px, 0.3vw, 3px);
    font-weight: 900;
    margin-bottom: clamp(30px, 4vw, 48px);
}

/* Tekstafsnit */
.nature p {
    max-width: 1220px;
    margin: 0 auto 24px;
    font-size: var(--body-size);
    line-height: 1.35;
    letter-spacing: 0.3px;
}


/* =====================================================
   SIDE 4 — SMART LIVING
===================================================== */

/* Smart Living-layout med to kolonner */
.smart-living {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100svh;
    background: var(--beige);
}

/* Venstre billedfelt */
.interior-box {
    height: 100svh;
    min-height: 650px;
    overflow: hidden;
}

/* Interiørbilledet */
.interior-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Højre side med tekst og ikoner */
.features {
    min-height: 100svh;
    padding: clamp(45px, 6vh, 80px) clamp(55px, 6vw, 105px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Smart Living overskrift */
.features h2 {
    text-align: center;
    font-size: clamp(40px, 4vw, 68px);
    line-height: 0.95;
    letter-spacing: clamp(2px, 0.35vw, 5px);
    font-weight: 900;
    margin: 0 0 clamp(45px, 6vh, 70px);
}

/* Liste med boligfunktioner */
.features ul {
    list-style: none;
    font-size: clamp(28px, 2.9vw, 44px);
    line-height: 1.35;
    letter-spacing: clamp(1.2px, 0.22vw, 2.5px);
    margin: 0 0 clamp(45px, 6vh, 70px);
    max-width: 680px;
}

/* Afstand mellem listepunkter */
.features li {
    margin-bottom: clamp(10px, 1.3vh, 18px);
}

/* Fjerner ekstra afstand efter sidste listepunkt */
.features li:last-child {
    margin-bottom: 0;
}

/* Prik foran hvert listepunkt */
.features li::before {
    content: "";
    display: inline-block;
    width: clamp(9px, 0.9vw, 13px);
    height: clamp(9px, 0.9vw, 13px);
    background: var(--green);
    border-radius: 50%;
    margin-right: clamp(14px, 1.5vw, 22px);
    transform: translateY(-5px);
}

/* Ikon-grid */
.icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(210px, 1fr));
    gap: clamp(28px, 4vw, 50px) clamp(50px, 6vw, 90px);
    align-items: center;
    max-width: 780px;
    color: var(--black);
}

/* Hvert ikon-element */
.icon-item {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.7vw, 24px);
    min-width: 0;
}

/* Ikonbilleder */
.icons img {
    width: clamp(44px, 3vw, 58px);
    height: clamp(44px, 3vw, 58px);
    object-fit: contain;
    flex-shrink: 0;
}

/* Tekst ved ikoner */
.icons p {
    font-size: clamp(13px, 1.1vw, 17px);
    line-height: 1.25;
    letter-spacing: 1px;
    margin: 0;
}


/* =====================================================
   SIDE 5 — COMMUNITY
===================================================== */

/* Community-sektionen med billede som baggrund */
.community {
    position: relative;
    height: clamp(480px, 80svh, 972px);
    color: var(--beige);
    overflow: hidden;
}

/* Community-billedet fylder hele sektionen */
.community img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mørkt overlay ovenpå billedet for bedre læsbarhed */
.community::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.45)
    );
}

/* Tekst ovenpå community-billedet */
.community-text {
    position: absolute;
    left: clamp(24px, 4vw, 45px);
    right: clamp(24px, 4vw, 45px);
    bottom: clamp(45px, 6vw, 78px);
    z-index: 2;
    max-width: 940px;
}

/* Community-overskrift */
.community-text h2 {
    font-size: clamp(28px, 5vw, 60px);
    letter-spacing: clamp(1.5px, 0.3vw, 3px);
    font-weight: 900;
    margin-bottom: 18px;
}

/* Community-brødtekst */
.community-text p {
    color: var(--white);
    font-size: var(--body-size);
    line-height: 1.2;
    letter-spacing: clamp(0.5px, 0.15vw, 1.25px);
}


/* =====================================================
   SIDE 6 — WAITING LIST
===================================================== */

/* Hele waiting list-sektionen */
.waiting {
    min-height: clamp(680px, 80vw, 910px);
    padding: clamp(0px, 3vw, 33px) 0 0;
}

/* Grid-layout med formular til venstre og billede til højre */
.waiting-content {
    display: grid;
    grid-template-columns: minmax(320px, 641px) minmax(0, 1fr);
    align-items: start;
}

/* Venstre side med overskrift, tekst og formular */
.form-side {
    padding-left: var(--side-space);
    padding-right: clamp(24px, 3vw, 40px);
    padding-top: 15px;
}

/* Waiting list-overskrift */
.form-side h2 {
    font-size: clamp(28px, 5vw, 60px);
    line-height: 1.03;
    letter-spacing: clamp(1.5px, 0.3vw, 3px);
    font-weight: 900;
    margin-bottom: clamp(28px, 5vw, 52px);
}

/* Tekst over formularen */
.form-side > p {
    max-width: 507px;
    font-size: var(--body-size);
    line-height: 1.1;
    letter-spacing: clamp(0.5px, 0.15vw, 1.5px);
    margin-bottom: clamp(35px, 6vw, 76px);
}

/* Formularens bredde */
form {
    width: 100%;
    max-width: 519px;
}

/* Inputfelter */
input {
    width: 100%;
    height: clamp(62px, 7vw, 95px);
    background: transparent;
    border: 2px solid var(--black);
    margin-bottom: 17px;
    padding: 0 21px;
    font: inherit;
    font-size: clamp(16px, 2vw, 25px);
    letter-spacing: 1.25px;
    color: var(--black);
    outline: none;
}

/* Placeholder-tekst i inputfelter */
input::placeholder {
    color: var(--black);
    opacity: 1;
}

/* Formular-knap */
button {
    width: 100%;
    height: clamp(62px, 7vw, 91px);
    background: var(--green);
    color: var(--beige);
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: clamp(16px, 2vw, 25px);
    letter-spacing: 1.25px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover-effekt på knappen */
button:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

/* Besked under formularen */
.form-message {
    margin-top: 18px;
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--green);
}

/* Højre billedcontainer */
.aerial-wrap {
    width: 100%;
    height: clamp(320px, 65vw, 877px);
    overflow: hidden;
    border-top-left-radius: clamp(160px, 30vw, 420px);
    border-bottom-left-radius: clamp(160px, 30vw, 420px);
}

/* Billedet i højre side */
.aerial-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


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

/* Footer-layout */
.footer {
    position: relative;
    min-height: 91px;
    padding: 30px clamp(24px, 3vw, 35px) 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Container til LinkedIn, X og mail */
.footer-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Links omkring ikoner */
.footer-icons a {
    color: var(--black);
    font-size: clamp(20px, 2vw, 28px);
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover-effekt på footer-ikoner */
.footer-icons a:hover {
    transform: translateY(-2px);
    opacity: 0.65;
}

/* Footerens adresse tekst */
.footertext {
    text-align: right;
    margin: 0;
    font-size: clamp(12px, 1.5vw, 18px);
    line-height: 1.25;
    letter-spacing: 0.9px;
    color: var(--black);
}


/* =====================================================
   BACK TO TOP ARROW
===================================================== */

/* Fast pil nederst til højre */
.back-to-top {
    position: fixed;
    right: clamp(20px, 3vw, 40px);
    bottom: clamp(20px, 3vw, 40px);
    width: clamp(46px, 4vw, 58px);
    height: clamp(46px, 4vw, 58px);
    border-radius: 50%;
    background: var(--green);
    color: var(--beige);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2vw, 24px);
    text-decoration: none;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover-effekt på pilen */
.back-to-top:hover {
    transform: translateY(-4px);
    opacity: 0.85;
}


/* =====================================================
   RESPONSIVE — TABLET
   Gælder skærme under 1200px.
===================================================== */

@media (max-width: 1200px) {

    /* Intro får lidt smallere tekstkolonne på tablet */
    .intro {
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    }

    /* Waiting list får justeret venstre kolonne */
    .waiting-content {
        grid-template-columns: minmax(300px, 500px) minmax(0, 1fr);
    }
}


/* =====================================================
   RESPONSIVE — BRED SKÆRM MED LAV HØJDE
   Bruges fx til ekstern monitor/laptop med lav viewport-højde.
===================================================== */

@media (min-width: 901px) and (max-height: 950px) {

    /* Smart living fylder stadig hele skærmhøjden */
    .smart-living {
        min-height: 100svh;
    }

    /* Interiørbilledet får minimumshøjde */
    .interior-box {
        height: 100svh;
        min-height: 720px;
    }

    /* Højre side komprimeres lidt i højden */
    .features {
        min-height: 100svh;
        padding-top: 35px;
        padding-bottom: 35px;
        justify-content: center;
    }

    /* Mindre Smart Living overskrift på lav skærm */
    .features h2 {
        font-size: clamp(38px, 3.7vw, 58px);
        margin-bottom: clamp(35px, 5vh, 55px);
    }

    /* Mindre liste på lav skærm */
    .features ul {
        font-size: clamp(26px, 2.5vw, 38px);
        line-height: 1.28;
        margin-bottom: clamp(35px, 5vh, 55px);
    }

    /* Mindre afstand mellem listepunkter */
    .features li {
        margin-bottom: 8px;
    }

    .features li:last-child {
        margin-bottom: 0;
    }

    /* Ikoner får tættere spacing */
    .icons {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
        gap: 26px 55px;
    }
}


/* =====================================================
   RESPONSIVE — MOBIL / SMÅ TABLETS
   Gælder skærme under 900px.
===================================================== */

@media (max-width: 900px) {

    /* Hero bliver lavere på mobil */
    .hero {
        min-height: 620px;
    }

    /* Hero-teksten rykkes og får mere luft */
    .hero-text {
        bottom: 100px;
        left: 24px;
        right: 24px;
    }

    /* Intro og waiting list går fra kolonner til én kolonne */
    .intro,
    .waiting-content {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    /* Mindre side-padding på mobil */
    .intro-text,
    .features,
    .form-side {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Intro-billedet får fast mobilhøjde */
    .intro-image-wrap {
        height: clamp(320px, 70vw, 440px);
    }

    /* Campus-adressen får mindre afstand på mobil */
    .campus {
        margin-top: clamp(50px, 12vw, 100px);
    }

    /* Smart living bliver én kolonne */
    .smart-living {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    /* Interiørbilledet får mobilhøjde */
    .interior-box {
        height: 560px;
        min-height: unset;
    }

    /* Smart living tekst starter fra toppen på mobil */
    .features {
        min-height: unset;
        padding-top: 45px;
        padding-bottom: 45px;
        justify-content: flex-start;
    }

    /* Mindre overskrift på mobil */
    .features h2 {
        font-size: 38px;
        margin-bottom: 45px;
    }

    /* Mindre liste på mobil */
    .features ul {
        font-size: 25px;
        line-height: 1.55;
        margin-bottom: 45px;
    }

    /* Mindre afstand mellem listepunkter */
    .features li {
        margin-bottom: 10px;
    }

    .features li:last-child {
        margin-bottom: 0;
    }

    /* Ikoner vises i to kolonner på mobil */
    .icons {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        max-width: 100%;
    }

    /* Community-sektionen får lavere højde på mobil */
    .community {
        height: 620px;
    }

    /* Waiting list får naturlig højde på mobil */
    .waiting {
        min-height: unset;
        padding: 0;
    }

    /* Formularen får luft på mobil */
    .form-side {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Formularen må fylde hele bredden */
    form {
        max-width: 100%;
    }

    /* Waiting list billedet får mobilhøjde og runding */
    .aerial-wrap {
        height: 420px;
        border-top-left-radius: 210px;
        border-bottom-left-radius: 210px;
    }

    /* Footer bliver lodret på mobil */
    .footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    /* Footer-tekst venstrestilles på mobil */
    .footertext {
        text-align: left;
    }
}


/* =====================================================
   RESPONSIVE — LILLE MOBIL
   Gælder skærme under 480px.
===================================================== */

@media (max-width: 480px) {

    /* Hero bliver endnu lavere på små mobiler */
    .hero {
        min-height: 520px;
    }

    /* Hero-teksten placeres lidt højere */
    .hero-text {
        bottom: 80px;
    }

    /* Hero-link må ikke gå ud over skærmen */
    .hero-link {
        max-width: calc(100% - 40px);
    }

    /* Intro-billedet får fast lille mobilhøjde */
    .intro-image-wrap {
        height: 320px;
    }

    /* Campus får mindre afstand */
    .campus {
        margin-top: 50px;
    }

    /* Interiørbilledet bliver lavere */
    .interior-box {
        height: 400px;
        min-height: unset;
    }

    /* Mindre Smart Living overskrift */
    .features h2 {
        font-size: 28px;
        margin-bottom: 32px;
    }

    /* Mindre liste */
    .features ul {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 35px;
    }

    /* Mindre afstand mellem listepunkter */
    .features li {
        margin-bottom: 8px;
    }

    .features li:last-child {
        margin-bottom: 0;
    }

    /* Ikoner vises i én kolonne på små mobiler */
    .icons {
        grid-template-columns: 1fr;
    }

    /* Community-sektionen bliver lavere */
    .community {
        height: 480px;
    }

    /* Waiting list billedet bliver lavere og rundingen mindre */
    .aerial-wrap {
        height: 320px;
        border-top-left-radius: 160px;
        border-bottom-left-radius: 160px;
    }

    /* Pil-op knappen gøres mindre på små mobiler */
    .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}