/* --- Verset i et bånd på tværs af sidetoppen -------------------------------

   Ruden er den samme som på Start her — grøn gennemsigtighed, sløring bagved
   og en tynd guldkant — men strakt ud på tværs af sidetoppen i stedet for at
   stå som en firkant i siden.

   Båndet går ikke helt ud til kanten. Det toner ud mod begge sider, så det
   ikke ser ud til at blive skåret over af skærmen.

   Båndet ligger kun om selve den arabiske tekst. Udsagnet ovenover og
   betydningen nedenunder bliver, hvor de er, inden for sidens bredde.

   Verset står i tre forskellige elementer, alt efter hvordan sidetoppen er
   bygget:

     .hero-verse blockquote              forsiden
     .destination-hero-quote blockquote  Bibliotek
     .quran-verse-slide blockquote       de fire med slider

   Alle tre står her, så båndet ser ens ud overalt. Arket hentes efter
   sidernes egne, så det afløser deres bredder i stedet for at kæmpe med dem.
--------------------------------------------------------------------------- */

/* Båndets udseende: farven, kanten, sløringen og udtoningen.

   Artiklernes vers står her sammen med sidetoppernes. De skal se ens ud —
   det er det samme bånd — men de fylder ikke det samme: en sidetop bryder ud
   til hele skærmen, et vers midt i en artikel bliver i sin spalte. Derfor er
   udseendet skilt fra bredden, som står i reglen nedenunder. Hvad artiklens
   vers sætter i stedet, står i quran-verse.css. */
.hero-verse blockquote,
.destination-hero-quote blockquote,
.quran-verse-slide blockquote,
.quran-verse blockquote {
    padding-block: clamp(1.3rem, 2.6vw, 2.2rem);
    padding-inline: var(--band-margin);

    /* Kun over og under. Båndet har ingen ender at sætte en kant på — det
       toner ud i stedet. */
    border-block: 1px solid rgba(200, 163, 93, .28);
    background: rgba(5, 17, 13, .62);
    backdrop-filter: blur(16px);

    /* Masken toner hele båndet ud mod siderne: baggrunden, guldstregen og
       sløringen på én gang. Sløringen kan ikke tones på nogen anden måde —
       en gennemsigtig baggrund ville stadig efterlade en skarp kant, hvor
       sløringen holder op.

       Udtoningen løber fra kanten og helt ind til teksten. Længere kan den
       ikke blive, uden at verset falmer med. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--band-margin), #000 calc(100% - var(--band-margin)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--band-margin), #000 calc(100% - var(--band-margin)), transparent 100%);
}

/* Udbrydningen til hele skærmen — kun sidetopperne. */
.hero-verse blockquote,
.destination-hero-quote blockquote,
.quran-verse-slide blockquote {
    /* Afstanden fra båndets kant ind til teksten.

       Ét tal styrer to ting: hvor teksten begynder, og hvor lang udtoningen
       er. De skal være det samme, for masken toner alt væk i sit område —
       også teksten. Er udtoningen længere end margenen, falmer versets
       kanter; er den kortere, står båndet med en synlig ende.

       Værdien er den frie plads ved siden af teksten, dog mindst 13% af
       skærmen, så der er noget at tone ud i på smalle skærme. */
    --band-margin: max(13vw, calc((100vw - var(--hero-verse-measure)) / 2));

    /* Udbrydningen: elementet gøres 100 vw bredt og trækkes tilbage med en
       negativ margen, der svarer til afstanden fra dets egen midte til
       skærmens kant. Alle sidetopper har «overflow: hidden», så den smule
       ekstra bredde, en synlig rullebjælke giver, bliver klippet af. */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* På en smal skærm er der ikke plads til en lang udtoning ved siden af
   teksten. Den bliver kortere, og teksten rykker tilsvarende ind. */
@media (max-width: 650px) {
    .hero-verse blockquote,
    .destination-hero-quote blockquote,
    .quran-verse-slide blockquote {
        --band-margin: 8vw;

        padding-block: 1.1rem;
    }
}

/* --- Citatet og teksten omkring det ----------------------------------------

   Udsagnet ovenover og betydningen nedenunder er venstrestillede. De skal
   begynde dér, hvor verset begynder — ellers ser gruppen ikke centreret ud.

   To af citaterne er sat til «width: max-content», altså bredden af deres
   bredeste barn. Da verset blev 100 vw bredt, blev de strakt ud til hele
   sidens bredde, og den venstrestillede tekst fulgte med ud i venstre side.

   Derfor spærres de til samme bredde, som versets tekst har. Så står
   udsagnet, verset og betydningen på linje, og hele gruppen er centreret.

   Sliderne er ikke med: deres slides har fast bredde og blev ikke berørt.
--------------------------------------------------------------------------- */

:root {
    --hero-verse-measure: 1040px;
}

.hero-verse,
.destination-hero-quote {
    width: min(100%, var(--hero-verse-measure));
    max-width: min(100%, var(--hero-verse-measure));
    margin-inline: auto;
}