/* Kunstlokalet.
   Én skærm, der siger én ting og beder om én ting. Et stort foto af lokalet
   fylder venstre side, beskeden står ved siden af, og under dem ligger en
   stribe mindre billeder. Opsætningen er tegnet i Lovable og sat op her.
   Uden billeder står pladerne som flade felter, så siden altid ser hel ud. */

@font-face {
    font-family: 'Newsreader';
    src: url('/font/newsreader.woff2') format('woff2');
    font-weight: 400 600;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/font/inter.woff2') format('woff2');
    font-weight: 400 500;
    font-display: swap;
}

:root {
    /* Varm mørk bund. På papirhvid kom fotoerne til at ligne scanninger,
       der lå oven på siden. Mod det mørke løber de ud i bunden, og hele
       siden læses som et varsel om et lokale, der bliver bygget. */
    --papir: #221d18;
    --blaek: #ede9e1;
    --daemp: #afa89f;
    --streg: #4e4640;
    --accent: #bf7553;
    --accent-tekst: #18130e;
    --plade: #3a332c;
    --plade-lille: #2e2822;

    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
    background: var(--papir);
    color: var(--blaek);
    font-family: var(--sans);
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

p { margin: 0; }

a { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---- Plakaten ------------------------------------------------------------ */

.plade {
    aspect-ratio: 3 / 2;
    background: var(--plade);
    display: block;
    /* height: auto SKAL med. Uden den vinder height-attributten på img'en,
       og aspect-ratio bliver ignoreret. Så bliver fotoet 1538 px højt på en
       telefon, og beskeden havner under folden. */
    height: auto;
    object-fit: cover;
    width: 100%;
}

.besked {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1.25rem;
}

h1 {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 10vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: .95;
    margin: 0;
}

.midt {
    margin-top: 2.5rem;
    max-width: 28rem;
}

.midt .sted {
    color: var(--daemp);
    font-size: 1.05rem;
    margin-top: .6rem;
}

.lead {
    font-family: var(--serif);
    font-size: 1.375rem;
    line-height: 1.25;
}

.linjer {
    color: var(--daemp);
    margin-top: 2rem;
}

.andre {
    color: var(--accent);
    font-size: .875rem;
    margin-top: .75rem;
}

/* Logoet: mærket er vinduespartiet, hvor den ene halvdel står åben. */
.logo {
    align-items: center;
    display: flex;
    gap: .6rem;
    margin-bottom: 2.5rem;
}

.logo svg {
    fill: currentColor;
    height: 1.75rem;
    width: 1.75rem;
}

.logo span {
    font-family: var(--serif);
    font-size: 1.15rem;
}

.bunden { margin-top: 3rem; }

/* Henvisningen skal være til at få øje på, men den må ikke stjæle trykket
   fra formularen, så den står som en streg og ikke som en knap. */
.facebook a {
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    font-size: .95rem;
    text-decoration: none;
}

.facebook a:hover {
    border-bottom-color: var(--blaek);
    color: var(--blaek);
}

.facebook { margin-bottom: 1.25rem; }

.adresse {
    color: var(--daemp);
    font-size: .875rem;
}

.selskab {
    color: var(--daemp);
    font-size: .8rem;
    margin-top: .35rem;
    opacity: .8;
}

/* ---- Kortet -------------------------------------------------------------- */

/* Kortet er hentet hjem som et billede. Så sender den besøgende ikke et kald
   til Google, og der er hverken cookie eller samtykke at holde styr på. */
.kort img {
    display: block;
    height: auto;
    width: 100%;
}

.kort-tekst {
    padding: 2rem 1.25rem 2.5rem;
}

.sted {
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.3;
}

.kort-link {
    margin-top: 1rem;
}

.kort-link a {
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    font-size: .95rem;
    text-decoration: none;
}

.kort-link a:hover {
    border-bottom-color: var(--blaek);
    color: var(--blaek);
}

/* ---- Stribe med de mindre billeder --------------------------------------- */

.stribe {
    background: var(--streg);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, 1fr);
}

.stribe img,
.plade-lille {
    aspect-ratio: 3 / 2;
    background: var(--plade-lille);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* Den tredje plads er kun med, når der er bredde til den. */
.stribe > :nth-child(3) { display: none; }

/* ---- Formen -------------------------------------------------------------- */

.form { margin-top: 1.5rem; }

.form label {
    color: var(--daemp);
    display: block;
    font-size: .875rem;
}

.form input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(237, 233, 225, .3);
    color: var(--blaek);
    font-family: var(--sans);
    font-size: 1rem;
    margin-bottom: 1.25rem;
    padding: .5rem 0;
    transition: border-color .15s ease;
    width: 100%;
}

.form input:focus {
    border-bottom-color: var(--blaek);
    outline: none;
}

.knap {
    background: var(--blaek);
    border: 0;
    color: var(--papir);
    /* Knappen er den lyse plade på den mørke side, og derfor det eneste
       sted øjet lander af sig selv. */
    cursor: pointer;
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .12em;
    margin-top: .5rem;
    padding: .875rem 1.5rem;
    text-transform: uppercase;
    transition: background .15s ease;
    width: 100%;
}

.knap:hover {
    background: var(--accent);
    color: var(--accent-tekst);
}

/* Hvad vi bruger adressen til. Skal stå ved feltet, ikke gemt i en bund. */
.samtykke {
    color: var(--daemp);
    font-size: .8rem;
    line-height: 1.5;
    margin-top: 1.25rem;
    max-width: 30rem;
}

/* Honningkrukken. Skjult for mennesker, synlig for robotter. */
.krukke {
    height: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.fejlbesked {
    color: var(--accent);
    font-size: .875rem;
    margin-bottom: 1.25rem;
}

/* ---- Kvitteringen -------------------------------------------------------- */

/* Når man har skrevet sig op, er der ikke mere at gøre. Siden er derfor bar:
   navnet, en tak, og vejen videre til Facebook. Intet foto, intet kort,
   ingen formular. */
.tak {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 40rem;
    min-height: 100vh;
    padding: 2.5rem 1.25rem;
}

.tak-midt {
    padding: 3rem 0;
}

.tak h1 {
    font-family: var(--serif);
    font-size: clamp(2.75rem, 12vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1;
    margin: 0;
}

.tak-linje {
    font-family: var(--serif);
    font-size: 1.375rem;
    line-height: 1.3;
    margin-top: 1.75rem;
    max-width: 24ch;
}

.tak-videre {
    color: var(--daemp);
    margin-top: 2.5rem;
    max-width: 30ch;
}

.tak-videre a,
.tak-tilbage a {
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.tak-videre a:hover,
.tak-tilbage a:hover {
    border-bottom-color: var(--blaek);
    color: var(--blaek);
}

.tak-tilbage {
    font-size: .875rem;
}

@media (min-width: 60rem) {
    .tak { padding: 3.5rem 3rem; }
    .tak-midt { padding: 4rem 0; }
}

/* ---- Fejlsiden ----------------------------------------------------------- */

.fejl {
    margin: 0 auto;
    max-width: 36rem;
    padding: 6rem 1.25rem;
}

.fejl h1 { font-size: 2rem; }

/* ---- Store skærme -------------------------------------------------------- */

@media (min-width: 60rem) {
    .plakat {
        display: flex;
        min-height: 100vh;
    }

    /* Fotoet fylder den ene side helt ud, uden ramme og uden luft omkring. */
    .plade {
        aspect-ratio: auto;
        height: auto;
        min-height: 100vh;
        width: 58%;
    }

    .besked {
        justify-content: space-between;
        padding: 3.5rem 3rem;
        width: 42%;
    }

    h1 { font-size: clamp(3.25rem, 4.4vw, 4.5rem); }

    .midt { margin-top: 4rem; }

    .lead { font-size: 1.5rem; }

    .adresse { margin-top: 4rem; }

    .knap { width: auto; }

    .stribe { grid-template-columns: repeat(3, 1fr); }

    /* Kortet i den ene side, adressen i den anden, som plakaten ovenfor. */
    .kort {
        align-items: center;
        display: flex;
    }

    .kort a { width: 58%; }

    .kort-tekst {
        padding: 3rem;
        width: 42%;
    }

    .sted { font-size: 1.5rem; }

    .stribe > :nth-child(3) { display: block; }
}