/* ===========================================================================
   Profetudtalelserne
   ---------------------------------------------------------------------------
   Listen stod før som to spalter: en bred og en, der var en tredjedel af
   skærmens bredde. I hvert felt stod hele den importerede tekst — indledningen,
   den arabiske ordlyd, den danske gengivelse, kilden og hele
   overleveringsleddet — i ét citat. Arabisk skrift kan ikke orddeles, så
   linjerne brød midt i ordene i den smalle spalte, og et felt kunne fylde tre
   skærmhøjder, mens naboen fyldte en fjerdedel. Siden var 28.897 pixel høj.

   Nu får hver udtalelse sin egen række i hele bredden, og rækken viser tre
   ting: ordlyden, betydningen og kilden. Resten står på udtalelsens egen side.

   Emnerækken over listen står i sit eget ark, topic-filter.css: den er den
   samme her og på lektionerne.

     1  Overskriften over listen
     2  Udtalelsen på listen
     3  Udtalelsens egen side
     4  Den arabiske skrift
     5  Smalle skærme
   =========================================================================== */


/* --- 1 · Overskriften over listen ------------------------------------------ */

.hadith-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.hadith-heading h2 {
    margin: .35rem 0 0;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.hadith-heading p {
    max-width: 62ch;
    margin: .7rem 0 0;
    color: var(--muted);
}


/* --- 2 · Udtalelsen på listen ---------------------------------------------- */

.hadith-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.hadith-card {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: var(--surface);
    transition: background-color .2s ease;
}

.hadith-card:hover { background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }

.hadith-card h3 {
    margin: 0;
    font-size: clamp(1.15rem, 1.7vw, 1.42rem);
    line-height: 1.25;
}

.hadith-card h3 a { display: block; }
.hadith-card h3 a:hover { color: var(--gold); }

/* Betydningen står med «Hvilket betyder» som en lille overskrift foran. Ordene
   er forfatterens egne; kun graden er ny, så øjet kan springe direkte til
   gengivelsen. */
.hadith-card-meaning {
    margin: 0;
    color: var(--ink);
    line-height: 1.7;
}

.hadith-card-meaning b {
    display: block;
    margin-bottom: .35rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hadith-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.1rem;
    margin: 1.3rem 0 0;
    font-size: .82rem;
}

.hadith-card-foot span { color: var(--muted); }

.hadith-card-foot i {
    padding: .2rem .55rem;
    border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    color: var(--gold);
    font-style: normal;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* --- 3 · Udtalelsens egen side --------------------------------------------- */

/* Siden er delt i to: Profetens ord og forfatterens forklaring. De stod før
   med den samme skrift i den samme spalte, og der var ikke noget at se
   forskellen på. Nu bærer udtalelsen en ramme og forklaringen ingen, så det
   kan ses uden at læse. */
.hadith-part > h2 {
    margin: 0 0 1.2rem;
    color: var(--gold);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hadith-part--statement {
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
    background: color-mix(in srgb, var(--green) 6%, transparent);
}

.hadith-part--explanation {
    margin-top: 2.6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.hadith-part--explanation > h2 { color: var(--muted); }

/* Forklaringen er flere afsnit i træk uden citat imellem. Den almindelige
   afstand mellem afsnit er sat til tekst med luft omkring sig og er for lille
   her: afsnittene løb sammen til én blok. */
.hadith-part--explanation .reading > * + * { margin-top: 1.55rem; }

.hadith-reading > .source,
.hadith-reading > h2:not([id]) { margin-top: 2.6rem; }

/* Emnet under titlen fører tilbage til de øvrige udtalelser om det samme. */
.hadith-topic-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .45rem .85rem;
    border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
    color: var(--gold);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hadith-topic-link:hover { border-color: var(--gold); }


/* --- 4 · Den arabiske skrift ------------------------------------------------ */

/* Profetens ord står i grønt.

   Grønt er sidens egen farve til det, der er selve kilden — den samme
   var(--green), som resten af sitet bruger. Den danske gengivelse og
   forklaringen står i den almindelige tekstfarve, og øjet kan derfor se
   forskel på Profetens ord og alt det, der er skrevet om dem, uden at læse
   et eneste ord.

   Farven er sat her og ikke i reading.css: dér gælder reglen alt importeret
   materiale på hele sitet, og det er kun profetudtalelsernes arabiske ordlyd,
   der skal skifte farve. */
body[data-page^="hadiths"] .reading-arabic,
.hadith-card-arabic {
    color: var(--green);
}

.hadith-card-arabic {
    margin: 1.4rem 0;
    font-family: var(--arabic);
    font-size: clamp(1.28rem, 2.4vw, 1.65rem);
    line-height: 2.1;
    direction: rtl;
    text-align: right;

    /* Arabisk kan ikke orddeles, og en linje, der ikke kan brydes, skubber
       spalten ud. Ordlyden på listen er et smugkig — går den over tre linjer,
       står resten på udtalelsens egen side. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}


/* --- 5 · Smalle skærme ------------------------------------------------------ */

@media (max-width: 760px) {
    .hadith-heading {
        display: block;
    }

    .hadith-heading .text-link {
        margin-top: 1.2rem;
    }

    .hadith-card-arabic {
        font-size: 1.2rem;
        line-height: 1.95;
    }
}