/*
 * Profetprofilen.
 *
 * Navnet stod på to linjer: det arabiske navn øverst i stor skrift, og det
 * latinske under. To linjer for ét navn — og på profilsiden fyldte de tilsammen
 * det meste af skærmens højde, før der stod noget om profeten.
 *
 * Nu står de ved siden af hinanden på samme linje. Er der ikke plads i bredden,
 * bryder linjen af sig selv, og så står de som før.
 *
 * Filen ligger for sig selv og indlæses efter prophets.css, så reglerne om
 * skriftstørrelse og afstand kan sættes ned, uden at den anden fil skal røres.
 */

.prophet-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    align-items: baseline;
}

/* Afstanden stod på hvert navn for sig, da de lå over hinanden. På én linje
   er det rækken, der holder afstanden. */
.prophet-name-row > * {
    margin: 0;
}

/* ── Panelet på træet ───────────────────────────────────────────────── */

.prophet-summary-content .prophet-name-row {
    margin: 1.2rem 0 0.9rem;
}

.prophet-summary-content .prophet-name-row .prophet-summary-arabic {
    font-size: clamp(1.9rem, 5vw, 2.8rem);
}

.prophet-summary-content .prophet-name-row h2 {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
}

/* I den smalle tekstboks nede i hjørnet er der kun plads til begge navne,
   hvis de er små. Rækken er den samme; skriften er mindre. */
.prophet-panel .prophet-summary-content .prophet-name-row {
    margin: 0 0 0.35rem;
    gap: 0.2rem 0.6rem;
}

/* Det arabiske navn er det egentlige navn og staar stoerre end omskrivningen.
   1,9 mod 1,4 rem er en forskel paa en tredjedel - nok til at de to laeses som
   navn og udtale og ikke som to sidestillede ord. */
.prophet-panel .prophet-summary-content .prophet-name-row .prophet-summary-arabic {
    font-size: 1.9rem;
}

.prophet-panel .prophet-summary-content .prophet-name-row h2 {
    font-size: 1.4rem;
}

/* ── Profilsiden ────────────────────────────────────────────────────── */

.prophet-profile-hero .prophet-name-row {
    margin: 1.4rem 0 1rem;
    gap: 0.3rem 1.1rem;
}

.prophet-profile-hero .prophet-name-row .profile-arabic {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.prophet-profile-hero .prophet-name-row h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}