/* ==========================================================================
   Undervisersektionerne
   --------------------------------------------------------------------------
   To kasser efter produktkarrusellen paa forsiden: én til foraeldre (pink,
   grafik til venstre) og én til fagfolk (lilla, grafik til hoejre).

   Farverne er designets oklch-vaerdier. Browsere har understoettet oklch i
   aarevis, men hver farve faar alligevel en hex foerst: en browser der ikke
   kender oklch, springer linjen over og bruger hex'en, i stedet for at staa
   uden farve overhovedet.
   ========================================================================== */

/* PLADSERINGEN.
   Afsnittene skal staa efter produktkarrusellen og foer nyhedsbrevet. Det kan
   ikke goeres i layout-filen: forsidens naboer er widgets, og deres blokke har
   TILFAELDIGT genererede navne i databasen (XXZ222cFDXZ...) — navnet er et
   andet paa prod, saa der er intet at skrive `after=` paa. Magento tegner
   desuden altid layout-blokke foer widget-blokke i samme container.

   Derfor styres raekkefoelgen her, paa de klassenavne der er ens i alle
   miljoeer. Elementer uden `order` beholder kildens raekkefoelge indbyrdes, saa
   det er nok at flytte de to afsnit og nyhedsbrevet bagud:

     forsideindhold, intro, produkter   (order 0, som i kilden)
     de to undervisersektioner          (order 1)
     nyhedsbrevet                       (order 2)

   Prisen er, at kildens raekkefoelge ikke er den viste. Vil man undgaa det,
   skal afsnittene oprettes som widgets i admin med sortering mellem 100 og
   120 — saa bor placeringen i databasen og foelger ikke med en udrulning,
   praecis som naboerne ikke goer. */
.cms-index-index .column.main {
    display: flex;
    flex-direction: column;
}

/* Forsidens raekkefoelge. Elementer uden order beholder kildens raekkefoelge
   indbyrdes; her flyttes de oevrige bagud i den viste orden:

     banneret "Nu med evidens"                 (-1)
     forsideindhold, produktkarrusellen        (order 0, som i kilden)
     kategori-raekken                          (1)
     "Derfor virker Alkalaer"                  (2)
     "Populaere favoritter"                    (3)
     de to undervisersektioner                 (4)
     "Nyheder og inspiration"                  (5)
     nyhedsbrevet                              (6)

   Favoritterne baerer samme klasse som karrusellen (.alk-udvalgte), saa de
   skelnes paa deres eget id. */
/* Banneret skal ligge foerst. CMS-sidens eget indhold har ingen order og
   staar derfor paa 0; et negativt tal er den eneste vaerdi der sikkert
   kommer foer det, uden at alle de andre skal tælles om. */
.cms-index-index .column.main > .alk-helt { order: -1; }
.cms-index-index .column.main > .alk-kategorier { order: 1; }
.cms-index-index .column.main > .alk-underviser { order: 4; }
/* Metode-kassen er OGSAA en .alk-underviser, saa den maa staa EFTER reglen
   ovenfor — ellers vinder order:4 og kassen havner nede blandt de to
   undervisersektioner i stedet for foer favoritterne. */
.cms-index-index .column.main > .alk-underviser--groen { order: 2; }
.cms-index-index .column.main > #alk-favoritter { order: 3; }
.cms-index-index .column.main > .alk-nyheder { order: 5; }
.cms-index-index .column.main > .alk-nyhedsbrev { order: 6; }

/* DE TONEDE BAAND SKAL GAA HELT UD TIL VINDUETS KANT.
   .column.main er smallere end vinduet (siden har en fast indholdsbredde med
   luft i siderne), saa et baand inde i spalten stopper foer kanten. De tre
   baand bryder derfor ud med negative margener: `calc(50% - 50vw)` er praecis
   halvdelen af den luft, der er tilbage paa hver side.

   `width: auto` er noedvendig — med `width: 100%` ville elementet beholde
   spaltens bredde og bare blive skubbet til venstre.

   Indholdet i baandene holder sig stadig paa 1280 px, fordi maalene sidder paa
   deres indre beholder (.alk-nyheder-indre og saa videre). */
.cms-index-index .column.main > #alk-favoritter,
.cms-index-index .column.main > .alk-nyheder,
.cms-index-index .column.main > .alk-nyhedsbrev {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.alk-underviser {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 20px;
    font-family: "Nunito", "Open Sans", sans-serif;
}

.alk-underviser-kasse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-radius: 28px;
}

/* Grafikken staar foerst i opmaerkningen, fordi den er det foerste man ser i
   designets foerste kasse. I den anden skal teksten foerst — der byttes der om
   med order frem for at lave en skabelon mere. */
.alk-underviser .alk-underviser-grafik { order: 2; }
.alk-underviser .alk-underviser-tekst  { order: 1; }

.alk-underviser--grafik-foerst .alk-underviser-grafik { order: 1; }
.alk-underviser--grafik-foerst .alk-underviser-tekst  { order: 2; }

/* --- bogstavfelterne --- */

.alk-underviser-grafik {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 420px;
    padding: 32px;
}

.alk-underviser-bogstav {
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .85);
    font-family: "Fredoka One", "Nunito", sans-serif;
    font-size: 48px;
    line-height: 1;
}

/* Skiftevis en anelse til hver side, saa felterne ikke staar snorlige. */
.alk-underviser-bogstav--0,
.alk-underviser-bogstav--2 { transform: rotate(-2deg); }
.alk-underviser-bogstav--1,
.alk-underviser-bogstav--3 { transform: rotate(2deg); }

/* --- teksten --- */

.alk-underviser-tekst { padding: 48px; }

.alk-underviser-maerkat {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.alk-underviser-tekst h2 {
    margin: 8px 0 0;
    font-family: "Fredoka One", "Nunito", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
}

.alk-underviser-broed {
    max-width: 30em;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.55;
}

.alk-underviser-punkter {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.alk-underviser-punkter li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 14px;
}

.alk-underviser-ikon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.alk-underviser-punkt-tekst strong { display: block; font-weight: 700; }
.alk-underviser-punkt-tekst span   { display: block; margin-top: 2px; }

.alk-underviser-knap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .15s ease;
}

.alk-underviser-knap:hover { filter: brightness(1.08); text-decoration: none; }

/* --- til foraeldre: lys pink ---
   Farverne foelger designets moenster: kassen lys, grafikken en gradient, og
   bogstaverne drejer i kulOer hen over de fire felter (hue 330 og opefter i
   spring paa 18), saa de ikke staar i samme farve. Knappen er butikkens lilla
   handlingsfarve — den er ens paa hele siden.

   Hver farve faar en hex foerst som reserve for browsere uden oklch. */

.alk-underviser--lys .alk-underviser-kasse {
    background: #fbe1ff;
    background: oklch(0.94 0.05 320);
}

.alk-underviser--lys .alk-underviser-grafik {
    background: linear-gradient(150deg, #ffe9ff, #fac8f4);
    background: linear-gradient(150deg, oklch(0.96 0.04 330), oklch(0.89 0.08 330));
}

.alk-underviser--lys .alk-underviser-bogstav--0 { color: #93398e; color: oklch(0.5 0.16 330); }
.alk-underviser--lys .alk-underviser-bogstav--1 { color: #a03273; color: oklch(0.5 0.16 348); }
.alk-underviser--lys .alk-underviser-bogstav--2 { color: #a92e55; color: oklch(0.5 0.16 366); }
.alk-underviser--lys .alk-underviser-bogstav--3 { color: #ac3033; color: oklch(0.5 0.16 384); }

.alk-underviser--lys .alk-underviser-maerkat { color: var(--alk-accent, #e0459b); }
.alk-underviser--lys .alk-underviser-tekst h2 { color: var(--alk-tekst, #2a2135); }
.alk-underviser--lys .alk-underviser-broed,
.alk-underviser--lys .alk-underviser-punkter { color: #4a4159; }
.alk-underviser--lys .alk-underviser-ikon { color: var(--alk-accent, #e0459b); }

.alk-underviser--lys .alk-underviser-knap {
    background: var(--alk-primary, #8b3fd4);
    color: #fff;
}

/* --- metoden: groen ---
   Hero-afsnittets groenne palet fra designet (hue 155). Knappen er lilla som i
   de to andre kasser — det er butikkens handlingsfarve, og den er ogsaa lilla i
   designets eget groenne afsnit. */

.alk-underviser--groen .alk-underviser-kasse {
    background: #bbf5ce;
    background: oklch(0.92 0.08 155);
}

.alk-underviser--groen .alk-underviser-grafik {
    background: linear-gradient(150deg, #defae6, #b1ebc4);
    background: linear-gradient(150deg, oklch(0.96 0.04 155), oklch(0.89 0.08 155));
}

.alk-underviser--groen .alk-underviser-bogstav--0 { color: #007c36; color: oklch(0.5 0.16 155); }
.alk-underviser--groen .alk-underviser-bogstav--1 { color: #007e5a; color: oklch(0.5 0.16 173); }
.alk-underviser--groen .alk-underviser-bogstav--2 { color: #007d79; color: oklch(0.5 0.16 191); }
.alk-underviser--groen .alk-underviser-bogstav--3 { color: #007893; color: oklch(0.5 0.16 209); }

/* Det fjerde felt viser ordet "sol" — de tre lyde sat sammen. Det skal fylde
   mindre end de enkelte bogstaver for at kunne staa i samme felt. */
.alk-underviser--groen .alk-underviser-bogstav--3 { font-size: 34px; }

/* Tekstsiden er hvid, ikke groen. Den groenne gradient staar kun paa
   grafiksiden, saa kassen laeses som groen til venstre og hvid til hoejre. De
   to andre kasser har farve hele vejen; den her skiller sig bevidst ud. */
.alk-underviser--groen .alk-underviser-tekst {
    background: #fff;
}

.alk-underviser--groen .alk-underviser-maerkat { color: #005928; color: oklch(0.4 0.12 155); }
.alk-underviser--groen .alk-underviser-tekst h2 { color: #002d0c; color: oklch(0.25 0.09 155); }
.alk-underviser--groen .alk-underviser-broed,
.alk-underviser--groen .alk-underviser-punkter { color: #00391b; color: oklch(0.3 0.08 155); }
.alk-underviser--groen .alk-underviser-ikon { color: #005928; color: oklch(0.4 0.12 155); }

.alk-underviser--groen .alk-underviser-knap {
    background: var(--alk-primary, #8b3fd4);
    color: #fff;
}

/* --- til fagfolk: fuld lilla --- */

.alk-underviser--moerk .alk-underviser-kasse {
    background: #854ece;
    background: oklch(0.55 0.19 300);
    color: #fff;
}

.alk-underviser--moerk .alk-underviser-grafik {
    background: linear-gradient(150deg, #f1eeff, #d9d2ff);
    background: linear-gradient(150deg, oklch(0.96 0.04 290), oklch(0.89 0.08 290));
}

.alk-underviser--moerk .alk-underviser-bogstav--0 { color: #654db6; color: oklch(0.5 0.16 290); }
.alk-underviser--moerk .alk-underviser-bogstav--1 { color: #7d43a8; color: oklch(0.5 0.16 308); }
.alk-underviser--moerk .alk-underviser-bogstav--2 { color: #8f3a93; color: oklch(0.5 0.16 326); }
.alk-underviser--moerk .alk-underviser-bogstav--3 { color: #9e3379; color: oklch(0.5 0.16 344); }

.alk-underviser--moerk .alk-underviser-maerkat,
.alk-underviser--moerk .alk-underviser-tekst h2,
.alk-underviser--moerk .alk-underviser-broed,
.alk-underviser--moerk .alk-underviser-punkter { color: #fff; }

.alk-underviser--moerk .alk-underviser-broed,
.alk-underviser--moerk .alk-underviser-punkt-tekst span { color: rgba(255, 255, 255, .85); }

.alk-underviser--moerk .alk-underviser-ikon {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.alk-underviser--moerk .alk-underviser-knap {
    background: #fff;
    color: var(--alk-tekst, #2a2135);
}

/* --- smalle skærme --- */

@media (max-width: 767px) {
    .alk-underviser { padding: 20px 16px; }

    .alk-underviser-kasse {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    /* Grafikken oeverst i begge kasser. Paa en telefon laeser man oppefra, og
       et felt med fire bogstaver siger med det samme hvad afsnittet handler om. */
    .alk-underviser .alk-underviser-grafik,
    .alk-underviser--grafik-foerst .alk-underviser-grafik { order: 1; }
    .alk-underviser .alk-underviser-tekst,
    .alk-underviser--grafik-foerst .alk-underviser-tekst  { order: 2; }

    .alk-underviser-grafik { min-height: 220px; padding: 20px; gap: 10px; }
    .alk-underviser-bogstav { font-size: 34px; border-radius: 12px; }
    .alk-underviser-tekst { padding: 28px 24px 32px; }
    .alk-underviser-tekst h2 { font-size: 27px; }
}