/* --- Forsidens afsnit om Koranen -------------------------------------------

   Afsnittet lover "udforsk vers, folg forklaringerne". Det holdt ikke:
   billedet la to steder, kassen viste en systembesked om manglende tekst lige
   under den arabiske tekst, de tre maerkater "Koranvers, Lektioner, Emner"
   pegede ingen steder hen, og suraerne blev valgt i et almindeligt
   rullegardin, hvor dansk og arabisk navn stod i en stump tekst.

   Her er billedet flyttet ind bag Basmalaen og sloret, kassen viser versets
   danske gengivelse, maerkaterne er skiftet ud med to tal fra databasen, og
   rullegardinet er erstattet af en liste, hvor nummer, dansk navn og arabisk
   navn star i hver sin spalte.

   Alle regler er bundet til .quran-world. Arket hentes i sidens egen stak,
   altsa for visual-upgrade.css, og med samme specificitet ville den sidste
   vinde. Med afsnittets klasse foran vejer de tungere og gaelder uanset
   raekkefolgen.
--------------------------------------------------------------------------- */

/* Bade her og i visual-upgrade.css staar der en regel for .quran-world.
   De vejer lige meget, og visual-upgrade hentes sidst, saa den vandt - ogsaa
   med sit overflow: hidden, der klippede surah-listen af ved sektionens kant.
   Sektionen baerer to klasser, class="quran-world section", og med dem begge
   i selektoren vejer reglen tungere og gaelder uanset raekkefolgen. */
.quran-world.section {
    /* Billedet er vaek fra afsnittets baggrund - det bor nu et sted. */
    background:
        linear-gradient(90deg, rgba(5, 18, 14, .97) 0%, rgba(5, 18, 14, .86) 42%, rgba(5, 18, 14, .58) 100%),
        #0b1c16;

    /* Surah-listen folder sig ud neden under knappen og skal kunne na uden
       for afsnittet. overflow: hidden klippede den; det blev kun sat for at
       holde pa baggrundsbilledet, og det billede er her ikke laengere.
       z-index lofter afsnittet over det naeste, sa listen ikke havner bagved. */
    position: relative;
    z-index: 2;
    overflow: visible;
}

/* Feltet over overskriften er vaek; billedet er nu i kassen. */
.quran-world .quran-copy::before {
    display: none;
}

/* Overskriften er skruet ned fra 4,65 rem. Afsnittet skal vaere roligt, og
   udsagnet lige under skal kunne hoeres ved siden af den. */
.quran-world .quran-copy h2 {
    /* Ingen spaerre. 'Koranens vidunder' er 17 tegn og blev braekket i to
       ved 12, saa de to ord stod under hinanden. */
    max-width: none;
    margin-block: 1rem .9rem;
    font-size: clamp(2.4rem, 3.4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -.02em;
}

/* Udsagnet. Det staar mellem overskriften og bryteksten og baerer selve
   tanken - derfor samme skrift som overskriften, i guld, men lettere. */
.quran-world .quran-declaration {
    max-width: 22ch;
    margin: 0 0 1.4rem;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1.9vw, 1.75rem);
    line-height: 1.32;
    font-weight: 400;
    color: #e7bd70;
}

.quran-world .quran-copy > p {
    max-width: 46ch;
    line-height: 1.72;
}

/* --- De to tal -------------------------------------------------------------

   I stedet for "Koranvers, Lektioner, Emner", som ikke sagde noget om
   samlingens tilstand, star her hvor mange suraer der er, og hvor mange vers
   der faktisk har en dansk forklaring. Tallene kommer fra databasen, sa de
   folger arbejdet af sig selv.
--------------------------------------------------------------------------- */

.quran-world .quran-figures {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.1rem, 2.6vw, 2rem);
    margin: 1.9rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(200, 163, 93, .22);
}

.quran-world .quran-figures dt {
    font: clamp(1.75rem, 2.4vw, 2.15rem)/1 var(--serif);
    color: #e7bd70;
    font-variant-numeric: tabular-nums;
}

.quran-world .quran-figures dd {
    margin: .35rem 0 0;
    max-width: 14ch;
    font-size: .74rem;
    line-height: 1.35;
    letter-spacing: .04em;
    color: #b6c2bb;
}

/* --- Knappen og vaelgeren -------------------------------------------------- */

.quran-world .quran-actions {
    align-items: stretch;
    flex-wrap: wrap;
    gap: .75rem;
}

.quran-world .quran-open {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    padding: .95rem 1.25rem;
    background: var(--gold);
    color: #0b1712;
    font-weight: 750;
    transition: background-color .22s ease;
}

.quran-world .quran-open span {
    transition: transform .22s cubic-bezier(.2, .72, .2, 1);
}

.quran-world .quran-open:hover,
.quran-world .quran-open:focus-visible {
    background: #f0c97d;
}

.quran-world .quran-open:hover span,
.quran-world .quran-open:focus-visible span {
    transform: translateX(5px);
}

/* --- Surah-vaelgeren -------------------------------------------------------

   Det gamle var et select med 114 linjer, hvor nummer, dansk og arabisk navn
   stod i en stump tekst, og hvor browseren selv bestemte udseendet. Her er
   det en details, sa listen ogsa kan abnes og lukkes uden JavaScript.
   Raekkerne er et gitter med tre spalter, og spalterne er lige brede hele
   vejen ned - det er det, der gor at de danske navne star under hinanden og
   de arabiske under hinanden.
--------------------------------------------------------------------------- */

.quran-world .surah-picker {
    position: relative;
}

.quran-world .surah-picker > summary {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    height: 100%;
    padding: .8rem 1.1rem;
    border: 1px solid rgba(200, 163, 93, .38);
    background: rgba(9, 24, 19, .72);
    color: #eef2ed;
    cursor: pointer;
    list-style: none;
    transition: border-color .22s ease, background-color .22s ease;
}

/* Browserens egen trekant fjernes; vi tegner selv en. */
.quran-world .surah-picker > summary::-webkit-details-marker {
    display: none;
}

.quran-world .surah-picker > summary:hover,
.quran-world .surah-picker > summary:focus-visible,
.quran-world .surah-picker[open] > summary {
    border-color: rgba(200, 163, 93, .8);
    background: rgba(11, 30, 24, .92);
}

.quran-world .surah-picker-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #e7bd70;
}

.quran-world .surah-picker-value {
    margin-left: auto;
    font-size: .84rem;
    color: #b6c2bb;
}

.quran-world .surah-picker-caret {
    font-size: .7rem;
    color: #e7bd70;
    transition: transform .24s cubic-bezier(.2, .72, .2, 1);
}

.quran-world .surah-picker[open] .surah-picker-caret {
    transform: rotate(180deg);
}

/* Selve listen. Den laegger sig oven pa afsnittet i stedet for at skubbe
   teksten ned, og den er sin egen flade - ikke gennemsigtig - sa de arabiske
   navne kan laeses uanset hvad der ligger bagved. */
.quran-world .surah-picker-panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + .5rem);
    left: 0;
    width: min(30rem, calc(100vw - 3rem));
    border: 1px solid rgba(200, 163, 93, .38);
    background: #0a1b16;
    box-shadow: 0 26px 60px rgba(2, 9, 7, .6);
}

.quran-world .surah-picker[open] .surah-picker-panel {
    animation: surah-panel-open .2s cubic-bezier(.2, .72, .2, 1);
}

@keyframes surah-panel-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.quran-world .surah-picker-search {
    padding: .75rem;
    border-bottom: 1px solid rgba(200, 163, 93, .2);
}

.quran-world .surah-picker-search input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid rgba(200, 163, 93, .28);
    background: rgba(4, 14, 11, .8);
    color: #eef2ed;
    font: inherit;
    font-size: .9rem;
}

.quran-world .surah-picker-search input::placeholder {
    color: #7f8d86;
}

.quran-world .surah-picker-search input:focus {
    outline: none;
    border-color: rgba(200, 163, 93, .8);
}

.quran-world .surah-picker-list {
    max-height: min(46vh, 21rem);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    overscroll-behavior: contain;
}

/* Tre faste spalter: nummer, dansk navn, arabisk navn. Fordi bredderne er de
   samme i alle raekker, star navnene lodret under hinanden hele vejen ned. */
.quran-world .surah-picker-list a {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 9.5rem);
    gap: .9rem;
    align-items: baseline;
    padding: .6rem .95rem;
    border-left: 2px solid transparent;
    color: #dfe6e1;
    transition: background-color .16s ease, border-color .16s ease;
}

.quran-world .surah-picker-list li + li a {
    border-top: 1px solid rgba(200, 163, 93, .12);
}

.quran-world .surah-picker-list a:hover,
.quran-world .surah-picker-list a:focus-visible {
    outline: none;
    border-left-color: #e7bd70;
    background: rgba(200, 163, 93, .12);
}

/* Cifrene er lige brede, sa numrene flugter i hojre kant. */
.quran-world .surah-picker-list i {
    font: .78rem var(--serif);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #9aa8a0;
}

.quran-world .surah-picker-list a:hover i,
.quran-world .surah-picker-list a:focus-visible i {
    color: #e7bd70;
}

.quran-world .surah-picker-list strong {
    min-width: 0;
    font-weight: 600;
    font-size: .94rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Det arabiske navn star i sin egen spalte og laeses fra hojre, sa alle
   navnene ender i samme lodrette kant. */
.quran-world .surah-picker-list span {
    font-family: var(--arabic);
    font-size: 1.05rem;
    line-height: 1.4;
    text-align: right;
    color: #cfae72;
    white-space: nowrap;
}

.quran-world .surah-picker-empty {
    margin: 0;
    padding: 1rem;
    font-size: .85rem;
    color: #9aa8a0;
}

/* --- Verskassen ------------------------------------------------------------

   Sloringen kan ikke laegges pa en baggrund direkte - filter ville ogsa slore
   teksten ovenpa. Derfor baerer et lag bag indholdet billedet, og det er det
   lag, der slores.
--------------------------------------------------------------------------- */

.quran-world .verse-experience {
    position: relative;
    display: flex;
    flex-direction: column;

    /* Klipper det slorede lag, sa dets blode kant ikke stikker udenfor.
       Kassens egen skygge ligger uden for elementet og bliver ikke klippet. */
    overflow: hidden;

    /* Fladen er lettet fra 82% til 58%, sa billedet bagved kan ses igennem.
       Morkere end det, og billedet forsvinder; lysere, og den gyldne skrift
       mister sin kontrast. */
    /* Fladen er skruet op fra 58% til 74%. Billedet skal kunne anes bag
       verset, ikke ses. Man laeser teksten forst og opdager dybden bagefter. */
    background: rgba(7, 18, 14, .74);
    transition: box-shadow .3s ease, transform .3s cubic-bezier(.2, .72, .2, 1);
}

.quran-world .verse-experience:hover {
    transform: translateY(-4px);
    box-shadow: 28px 28px 0 rgba(200, 163, 93, .14);
}

.quran-world .verse-experience::before {
    content: "";
    position: absolute;

    /* Laget er storre end kassen. En sloring udtynder kanterne, og uden det
       overskud ville der sta en lys rand hele vejen rundt. */
    inset: -20px;
    z-index: -1;

    /* Udsnittet er skubbet mod hojre, hvor vinduet i billedet star. Ved
       center faldt det uden for kassen. */
    background: url('/images/editorial/quran-study-v1.webp') 78% center / cover no-repeat;
    filter: blur(11px) saturate(.8) brightness(.85);

    /* 80 sekunder pr. omgang. Bevaegelsen skal ikke kunne foelges med oejet -
       den skal kun sikre, at billedet ikke staar helt doedt bag verset. */
    animation: quran-veil-drift 80s ease-in-out infinite;
}

@keyframes quran-veil-drift {
    0%, 100% {
        transform: scale(1.06) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(1.12) translate3d(-1.4%, -1%, 0);
    }
}

.quran-world .verse-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(200, 163, 93, .22);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #c6b190;
}

.quran-world .verse-lead {
    margin: 1.4rem 0 0;
    text-align: center;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #e7bd70;
}

/* Den arabiske skrift skal kunne laeses oven pa et billede, ogsa hvor billedet
   er lyst. */
.quran-world .verse-arabic {
    padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.7;
    text-shadow: 0 2px 24px rgba(3, 12, 9, .85);
}

/* Den anden indledning staar taettere paa gengivelsen end den forste paa
   verset, saa de to par kan skelnes fra hinanden. */
.quran-world .verse-lead-meaning {
    margin-top: .9rem;
}

.quran-world .verse-meaning {
    max-width: 44ch;
    margin: .55rem auto 0;
    text-align: center;
    font-size: .98rem;
    line-height: 1.65;
    color: #dfe6e1;
}

.quran-world .verse-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(200, 163, 93, .22);
    font-weight: 750;
    color: #eef2ed;
}

.quran-world .verse-open b,
.quran-world .verse-open span {
    transition: transform .22s cubic-bezier(.2, .72, .2, 1), color .22s ease;
}

.quran-world .verse-open:hover span,
.quran-world .verse-open:focus-visible span {
    transform: translateX(4px);
    color: #f0c97d;
}

.quran-world .verse-open:hover b,
.quran-world .verse-open:focus-visible b {
    transform: translate(4px, -4px);
    color: #e7bd70;
}

@media (max-width: 1000px) {
    .quran-world .verse-experience::before {
        inset: -16px;
    }

    .quran-world .surah-picker,
    .quran-world .surah-picker-panel {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .quran-world .surah-picker-list a {
        grid-template-columns: 2.2rem minmax(0, 1fr) minmax(0, 7rem);
        gap: .6rem;
    }

    .quran-world .surah-picker-list span {
        font-size: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quran-world .verse-experience,
    .quran-world .verse-experience::before,
    .quran-world .surah-picker-caret,
    .quran-world .quran-open,
    .quran-world .quran-open span,
    .quran-world .verse-open b,
    .quran-world .verse-open span {
        transition: none;
    }

    .quran-world .verse-experience:hover {
        transform: none;
    }

    .quran-world .verse-experience::before {
        animation: none;
        transform: scale(1.06);
    }

    .quran-world .surah-picker[open] .surah-picker-panel {
        animation: none;
    }
}