/* Typsnitt från Google Fonts: serif till rubriker, sans-serif till text */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@300;400;600&display=swap');


/* ===== VARIABLER (ljust läge) ===== */
:root {
    /* Färger */
    --bakgrund: #dbe7f3;          /* ljus isblå */
    --bakgrund-2: #b9cde4;        /* lite mörkare blå, används i den animerade gradienten */
    --text: #1a2a4f;              /* mörk navy */
    --accent: #3a7bd5;            /* klarblå accent */
    --kort-bakgrund: rgba(255, 255, 255, 0.5);  /* halvgenomskinliga kort */
    --glas: rgba(255, 255, 255, 0.25);          /* glaseffekt på pluppar */

    /* Avstånd */
    --avstand-liten: 0.5rem;
    --avstand-mellan: 1rem;
    --avstand-stor: 2rem;

    /* Övrigt */
    --radie: 1rem;                /* rundade hörn */
    --tid: 0.4s;                  /* tid för transitions */
    --font-rubrik: 'Cormorant Garamond', serif;
    --font-text: 'Inter', sans-serif;
}


/* ===== DARKMODE =====
   Följer webbläsarens inställning. Bara variablerna byts ut. */
@media (prefers-color-scheme: dark) {
    :root {
        --bakgrund: #0b1226;      /* djup rymdnavy */
        --bakgrund-2: #1c2a52;
        --text: #e8eef8;          /* nästan vit */
        --accent: #6fa8ff;
        --kort-bakgrund: rgba(255, 255, 255, 0.06);
        --glas: rgba(255, 255, 255, 0.12);
    }

    /* Bilder blir lite mörkare i darkmode */
    img {
        filter: brightness(0.8);
    }
}


/* ===== GRUND ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    padding: 0 var(--avstand-stor);
    font-family: var(--font-text);
    color: var(--text);

    /* Animerad bakgrund: en stor gradient som långsamt flyttas */
    background: linear-gradient(135deg, var(--bakgrund), var(--bakgrund-2), var(--bakgrund));
    background-size: 300% 300%;
    animation: bakgrund-flyt 15s ease-in-out infinite;
}

/* Keyframes för bakgrunden (3 steg) */
@keyframes bakgrund-flyt {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Länkar ärver textfärgen och saknar understrykning */
a {
    color: inherit;
    text-decoration: none;
}

/* Bilder blir aldrig bredare än sin behållare */
img {
    max-width: 100%;
    display: block;
}

h1, h2, h3 {
    font-family: var(--font-rubrik);
    font-weight: 400;
}


/* ===== NAVBAR ===== */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--avstand-stor) 0;
}

.logo {
    font-family: var(--font-rubrik);
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Länkarna ligger horisontellt */
.nav-lankar {
    display: flex;
    gap: var(--avstand-stor);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-lankar a {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--tid);
}

.nav-lankar a:hover {
    color: var(--accent);
}

/* Checkboxen syns aldrig, och hamburgaren syns bara i mobilvy */
.meny-toggle,
.hamburgare {
    display: none;
}


/* ===== HERO ===== */
.hero {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-areas:
        "liten   bild  ."
        "rubrik  bild  ingress";
    align-items: end;
    gap: var(--avstand-stor);
    min-height: 80vh;
}

.hero-liten {
    grid-area: liten;
    align-self: start;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Varje span blir en egen rad (istället för <br>) */
.hero-liten span {
    display: block;
}

.hero-rubrik {
    grid-area: rubrik;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.95;
    margin: 0;
}

.hero-ingress {
    grid-area: ingress;
    line-height: 1.6;
}

/* Behållaren för bilden + plupparna */
.hero-bild {
    grid-area: bild;
    position: relative;   /* plupparna placeras relativt denna */
    margin: 0;
    align-self: center;
}

.hero-bild img {
    width: 100%;
    transition: transform 0.8s ease;
}


/* ===== PLUPPAR (hotspots) ===== */
.plupp {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--avstand-liten);
}

/* Placering i procent så de följer med när bilden krymper */
.plupp-1 { top: 18%; left: 46%; }
.plupp-2 { top: 45%; left: 22%; }
.plupp-3 { top: 50%; left: 72%; }

/* Den runda glasknappen */
.plupp-plus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--glas);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 1.4rem;
    transition: transform var(--tid);
}

/* Infotexten är dold tills man hovrar */
.plupp-info {
    padding: var(--avstand-liten) var(--avstand-mellan);
    border-radius: var(--radie);
    background: var(--kort-bakgrund);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--tid);
}

.plupp:hover .plupp-plus,
.plupp:focus .plupp-plus {
    transform: scale(1.2) rotate(90deg);
}

.plupp:hover .plupp-info,
.plupp:focus .plupp-info {
    opacity: 1;
}

/* Zoom: bilden zoomar in mot den plupp man hovrar över */
.hero-bild:has(.plupp-1:hover) img { transform: scale(1.25); /*transform-origin: 46% 18%; */ }
.hero-bild:has(.plupp-2:hover) img { transform: scale(1.25); /*transform-origin: 22% 45%;*/ }
.hero-bild:has(.plupp-3:hover) img { transform: scale(1.25); /*transform-origin: 72% 50%; */ }


/* ===== GALLERI ===== */
.galleri-sektion {
    padding: var(--avstand-stor) 0;
}

.galleri-sektion h2 {
    font-size: 2.5rem;
}

/* Grid: så många kolumner som får plats, minst 15rem breda */
.galleri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--avstand-stor);
}

.kort {
    background: var(--kort-bakgrund);
    border-radius: var(--radie);
    overflow: hidden;
    transition: transform var(--tid);
}

/* Kortet lyfts lite vid hover */
.kort:hover {
    transform: translateY(-0.5rem);
}

/* Flexbox inuti varje kort */
.kort a {
    display: flex;
    flex-direction: column;
    gap: var(--avstand-liten);
    padding-bottom: var(--avstand-mellan);
}

.kort img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.kort h3,
.kort p {
    margin: 0;
    padding: 0 var(--avstand-mellan);
}

.kort h3 {
    font-size: 1.6rem;
}


/* ===== FOOTER ===== */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--avstand-mellan);
    padding: var(--avstand-stor) 0;
    font-size: 0.9rem;
}

.footer address {
    font-style: normal;
}

.sociala {
    display: flex;
    gap: var(--avstand-stor);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sociala a:hover {
    color: var(--accent);
}


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

    body {
        padding: 0 var(--avstand-mellan);
    }

    /* Navbaren får radbrytas så länkarna hamnar under */
    .nav {
        flex-wrap: wrap;
    }

    /* Hamburgaren visas */
    .hamburgare {
        display: block;
        font-size: 1.8rem;
        cursor: pointer;
    }

    /* Länkarna är dolda och vertikala */
    .nav-lankar {
        display: none;
        flex-direction: column;
        gap: var(--avstand-mellan);
        width: 100%;
        padding-top: var(--avstand-mellan);
    }

    /* När checkboxen är ikryssad visas länkarna */
    .meny-toggle:checked ~ .nav-lankar {
        display: flex;
    }

    /* Hero i en kolumn */
    .hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "liten"
            "bild"
            "rubrik"
            "ingress";
        min-height: auto;
    }

    .plupp-plus {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1rem;
    }
}