.platform-hero {
    position: relative;
    min-height: var(--hero-height);
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: #0a2a21;
}

.platform-hero::before,
.platform-hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.platform-hero::before {
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(2, 18, 13, .1) 58%, rgba(2, 14, 10, .38) 100%),
        linear-gradient(90deg, rgba(222, 180, 100, .035), transparent 27% 73%, rgba(222, 180, 100, .025));
}

.platform-hero::after {
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 7%, rgba(232, 190, 111, .38) 50%, transparent 93%);
}

.hero-photo,
.hero-shade,
.hero-atmosphere {
    position: absolute;
    inset: 0;
}

.hero-photo {
    z-index: 0;
    background: url("/images/home-library-hero-v1.png") 59% 48% / cover no-repeat;
    transform: scale(1.01);
    filter: saturate(.9) contrast(1.04);
    will-change: transform;
}

.hero-shade {
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 52%, rgba(7, 35, 26, .08) 0 20%, rgba(6, 29, 22, .34) 62%, rgba(4, 23, 17, .66) 100%),
        linear-gradient(90deg, rgba(5, 31, 23, .89) 0%, rgba(5, 31, 23, .68) 37%, rgba(5, 27, 20, .26) 66%, rgba(4, 22, 16, .18) 100%),
        linear-gradient(0deg, rgba(3, 22, 16, .62), transparent 46%);
}

[data-theme="dark"] .hero-photo {
    filter: brightness(.77) saturate(.83) contrast(1.06);
}

[data-theme="dark"] .hero-shade {
    background:
        radial-gradient(ellipse at 50% 52%, rgba(3, 25, 18, .12) 0 20%, rgba(3, 23, 17, .42) 62%, rgba(2, 16, 12, .72) 100%),
        linear-gradient(90deg, rgba(3, 24, 18, .93) 0%, rgba(3, 24, 18, .72) 38%, rgba(3, 21, 16, .34) 68%, rgba(2, 17, 13, .24) 100%),
        linear-gradient(0deg, rgba(2, 17, 13, .7), transparent 48%);
}

.hero-atmosphere {
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.hero-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(42vw, 560px);
    aspect-ratio: 1;
    border: 1px solid rgba(230, 187, 107, .09);
    transform: translate(-50%, -50%) rotate(45deg);
}

.hero-orbit::before,
.hero-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(230, 187, 107, .07);
}

.hero-orbit::before {
    inset: 12%;
}

.hero-orbit::after {
    inset: 29%;
    transform: rotate(45deg);
}

.hero-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(78vw, 1120px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 183, 104, .11) 22%, rgba(226, 183, 104, .2) 50%, rgba(226, 183, 104, .11) 78%, transparent);
    transform: translate(-50%, -50%);
}

.hero-axis::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    aspect-ratio: 1;
    border: 1px solid rgba(230, 187, 107, .26);
    background: rgba(7, 34, 26, .65);
    transform: translate(-50%, -50%) rotate(45deg);
}

.hero-platform-content {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 2rem), 1200px);
    padding-block: clamp(5rem, 9vh, 7rem);
}

.hero-copy {
    width: 100%;

    /* Boksen var spærret til 980 px inde i beholderens 1200 og havde ingen
       auto-margen. Så lagde den sig op i venstre side, og alt i sidetoppen
       stod 110 px for langt til venstre — også selv om indholdet inde i
       boksen var centreret.

       Spærringen løftes, så boksen fylder beholderen. Verset har sin egen
       bredde i hero-verse-band.css, og med den fulde beholder at centrere i
       står udsagn, vers og betydning nu på samme lodrette linje. */
    max-width: none;
    margin-inline: auto;
}

.hero-verse {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding-block: 2.1rem 2rem;
    color: #fff;
    text-align: center;
}

.hero-verse::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 82px;
    height: 1px;
    background: linear-gradient(90deg, #e7bd70, rgba(231, 189, 112, 0));
}

.hero-copy .hero-declaration {
    max-width: none;
    margin: 0 0 .62rem;
    color: #fff;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1.65vw, 1.6rem);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.3;
    text-align: left;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .28);
}

.hero-verse blockquote {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    color: #efc477;
    font: 400 clamp(2.3rem, 3.25vw, 3.35rem) / 1.58 "Uthman Taha Naskh", "Traditional Arabic", serif;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: center;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .38), 0 0 30px rgba(226, 178, 91, .08);
}

.hero-verse figcaption {
    width: 100%;
    max-width: 100%;
    margin: .58rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .12rem;
    color: #fff;
    line-height: 1.55;
}

.hero-translation {
    text-align: left;
}

.hero-translation strong,
.hero-translation span {
    display: block;
}

.hero-translation strong {
    color: rgba(255, 255, 255, .92);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.hero-translation span {
    margin-top: .12rem;
    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);
}

.hero-verse cite {
    align-self: flex-end;
    margin-top: .18rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #e2b666;
    font-size: .64rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .075em;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}

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

.quick-dock {
    position: relative;
    z-index: 4;
}

@media (max-width: 980px) {
    .platform-hero {
        min-height: var(--hero-height);
    }

    .hero-orbit {
        width: min(58vw, 500px);
    }
}

@media (max-width: 700px) {
    .platform-hero {
        min-height: auto;
        place-items: end stretch;
        padding-top: 260px;
    }

    .platform-hero::before {
        background: linear-gradient(0deg, rgba(3, 24, 18, .22), transparent 55%);
    }

    .hero-photo {
        background-position: 66% center;
    }

    .hero-shade,
    [data-theme="dark"] .hero-shade {
        background: linear-gradient(0deg, rgba(4, 25, 19, .995) 0%, rgba(4, 25, 19, .96) 58%, rgba(4, 25, 19, .2) 100%);
    }

    .hero-orbit {
        top: 54%;
        width: 360px;
        opacity: .72;
    }

    .hero-axis {
        top: 54%;
        width: 92%;
    }

    .hero-platform-content {
        width: calc(100vw - 2rem) !important;
        min-width: 0;
        max-width: calc(100vw - 2rem) !important;
        margin-inline: auto !important;
        padding-block: 2.5rem 3.8rem;
    }

    .hero-verse {
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        min-width: 0;
        padding-block: 1.55rem 1.2rem;
    }

    .hero-verse::before {
        width: 64px;
    }

    .hero-copy .hero-declaration {
        margin-bottom: .55rem;
        font-size: 1.3rem;
    }

    .hero-verse blockquote {
        width: 100%;
        font-size: clamp(1.42rem, 6vw, 2.05rem);
        line-height: 1.55;
        text-align: center;
    }

    .hero-verse blockquote span {
        width: 100%;
        max-width: 100%;
        display: block;
        direction: rtl;
        unicode-bidi: isolate;
        text-align: center;
    }

    .hero-verse figcaption {
        margin-top: .48rem;
    }

    .hero-translation strong {
        font-size: .94rem;
    }

    .hero-translation span {
        margin-top: .16rem;
        font-size: 1.16rem;
        line-height: 1.55;
    }

    .hero-verse cite {
        width: auto;
        align-self: auto;
        display: block;
        margin-top: .25rem;
        font-size: .57rem;
        text-align: right;
    }

    .hero-verse cite::before {
        display: none;
    }
}

@media (max-width: 390px) {
    .platform-hero {
        padding-top: 235px;
    }

    .hero-platform-content {
        width: calc(100vw - 1.7rem) !important;
        max-width: calc(100vw - 1.7rem) !important;
    }

    .hero-verse {
        width: calc(100vw - 1.7rem);
        max-width: calc(100vw - 1.7rem);
    }

    .hero-verse blockquote {
        font-size: 1.62rem;
    }

    .hero-translation span {
        font-size: 1.08rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-photo,
    .hero-verse {
        animation: none !important;
        transform: none !important;
    }
}

/* --- Genvejsrækken ---------------------------------------------------------

   Titlen «Gå direkte til» og alle seks genveje står på samme række.

   Det er trangt, og regnestykket er værd at kende, før noget ændres. Af
   beholderens 1200 px tager titlen omkring 117. De resterende 1083 deles af
   seks: 180 px pr. genvej. Derfra går 26 px luft, 9 px mellemrum og 14 px til
   tallet — tilbage er omkring 132 px til navnet.

   «Profetudtalelser» fylder omkring 112 px ved den skriftstørrelse, der er sat
   her. Der er altså cirka 20 px at give af. Større skrift, mere luft eller et
   ekstra element i hver genvej brækker navnene.

   Pilen «↗» er derfor taget ud på den brede opsætning. Den er i forvejen
   skjult på små skærme, og den er det eneste, der kunne undværes.
--------------------------------------------------------------------------- */

@media (min-width: 1001px) {
    .quick-dock > .container {
        grid-template-columns: auto repeat(6, 1fr);
    }

    .dock-title {
        padding: 1.15rem 1rem 1.15rem 0;
    }

    .quick-dock a {
        padding: .95rem .8rem;
        gap: .55rem;
    }

    .quick-dock a > b {
        display: none;
    }

    .quick-dock a > span {
        font-size: .82rem;
        line-height: 1.35;
    }

    .quick-dock small {
        font-size: .7rem;
        line-height: 1.4;
    }
}

/* --- Sidetoppens højde -----------------------------------------------------

   Sidetoppen fyldte hele skærmen, så genvejene lå lige under kanten og først
   kom til syne, når man rullede. Nu slutter den før skærmen gør: der er
   trukket plads fra til den faste header og til genvejsrækkens ene række.
--------------------------------------------------------------------------- */

.platform-hero {
    min-height: var(--hero-height);
}

@media (max-width: 980px) {
    .platform-hero {
        min-height: var(--hero-height);
    }
}