/* --- Bibliotekets hero ---------------------------------------------------- */

/* Samme opsætning som på Den Forpligtede Viden — udsagn, vers, betydning,
   kilde — men sat op efter forsidens hero: den smalle guldstreg over udsagnet,
   den store arabiske skrift med sit svage skær, og kilden med sin egen streg
   foran. Baggrunden er uændret; det er kun indholdet, der er skiftet ud. */

.destination-quote-hero--verse .destination-hero-quote {
    padding-block: 2.1rem 2rem;
}

/* Guldstregen øverst til venstre — samme markør som på forsiden. */
.destination-quote-hero--verse .destination-hero-quote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 82px;
    height: 1px;
    background: linear-gradient(90deg, #e7bd70, rgba(231, 189, 112, 0));
}

.destination-quote-hero--verse .destination-hero-quote h1 {
    margin-bottom: .62rem;
    font-size: clamp(1.25rem, 1.65vw, 1.6rem);
    letter-spacing: -.015em;
    line-height: 1.3;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .28);
}

/* Æresformlen står på arabisk midt i en dansk sætning. Den skal have sin egen
   skrift uden at løfte linjen eller bryde læseretningen omkring sig. */
.destination-quote-hero--verse .destination-hero-quote h1 [lang="ar"] {
    font-family: "Uthman Taha Naskh", "Traditional Arabic", serif;
    font-size: .95em;
    unicode-bidi: isolate;
}

.destination-quote-hero--verse .destination-hero-quote blockquote {
    color: #efc477;
    font-size: clamp(2.3rem, 3.25vw, 3.35rem);
    line-height: 1.58;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .38), 0 0 30px rgba(226, 178, 91, .08);
}

.destination-quote-hero--verse .destination-hero-quote figcaption {
    gap: .12rem;
    margin-top: .58rem;
}

.destination-quote-hero--verse .destination-hero-quote figcaption strong {
    color: rgba(255, 255, 255, .92);
    font-size: 1.02rem;
    letter-spacing: -.01em;
}

.destination-quote-hero--verse .destination-hero-quote figcaption span {
    color: rgba(255, 255, 255, .96);
    font-size: clamp(1.3rem, 1.52vw, 1.48rem);
    line-height: 1.48;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

/* Kilden står yderst til højre med sin egen streg foran, som på forsiden. */
.destination-quote-hero--verse .destination-hero-quote cite {
    margin-top: .18rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #e2b666;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .075em;
    direction: ltr;
    unicode-bidi: isolate;
}

.destination-quote-hero--verse .destination-hero-quote cite::before {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 182, 102, .72));
}

@media (max-width: 650px) {
    .destination-quote-hero--verse .destination-hero-quote {
        padding-block: 1.4rem 1.5rem;
    }

    .destination-quote-hero--verse .destination-hero-quote h1 {
        font-size: 1.3rem;
    }

    .destination-quote-hero--verse .destination-hero-quote blockquote {
        font-size: clamp(1.7rem, 7.4vw, 2.2rem);
        line-height: 1.55;
    }

    .destination-quote-hero--verse .destination-hero-quote figcaption strong {
        font-size: .92rem;
    }

    .destination-quote-hero--verse .destination-hero-quote figcaption span {
        font-size: 1.15rem;
    }

    .destination-quote-hero--verse .destination-hero-quote cite {
        font-size: .62rem;
    }
}

/* --- Baggrunden dækker hele bredden ----------------------------------------

   Heroen brugte grundens overlag, som er lavet til en sidetop med teksten i
   venstre side: en vandret gradient, der er 94% mørk yderst til venstre og
   næsten klar til højre. Her står citatet i midten, og så lagde det mørke sig
   hen over den venstre halvdel af billedet — det så ud, som om billedet kun
   dækkede en del af heroen.

   Sløret her er jævnt fra side til side. Det mørkner nedefra, hvor teksten
   står, og har et svagt fald mod kanterne, så det centrerede citat kan læses
   uden at billedet forsvinder nogen steder.
--------------------------------------------------------------------------- */

.destination-quote-hero--verse .destination-overlay {
    background:
        radial-gradient(ellipse 90% 70% at 50% 46%, rgba(4, 18, 14, .32) 0%, rgba(4, 18, 14, .66) 100%),
        linear-gradient(0deg, rgba(4, 18, 14, .88) 0%, rgba(4, 18, 14, .5) 42%, rgba(4, 18, 14, .3) 100%);
}

@media (max-width: 650px) {
    .destination-quote-hero--verse .destination-overlay {
        background: linear-gradient(0deg, rgba(4, 18, 14, .97) 0%, rgba(4, 18, 14, .9) 58%, rgba(4, 18, 14, .35) 100%);
    }
}