/* ============================================================================
   Astrozin — fragmenty navyše k styles.css.

   Načítava sa na /astrozin/ a /astrozin/<slug>/ a na obsahových stránkach webu,
   ktoré chcú tú istú typografiu textu (/o-nas/, /podmienky/, /ochrana-sukromia/,
   /ako-vznikaju-horoskopy/, /osobny-horoskop/). Všetko spoločné so zvyškom webu
   (hlavička, hero, tlačidlá, odber, pätička, .prose, .signs__head, .pitch)
   ostáva v styles.css a tu sa neopakuje — magazín má vyzerať ako zvyšok webu,
   nie ako druhý web. Preto sú aj hodnoty nižšie postavené na tých istých
   tokenoch z :root.

   Poradie: layout → hero → mriežka článkov → detail článku → procesný pás →
   responzivita.
   ========================================================================== */

/* ── Layout ──────────────────────────────────────────────────────────────────
   Obsahový stĺpec. styles.css ho dáva menovite vypísaným blokom; nové bloky
   Astrozinu ho preto potrebujú dostať tu, s tou istou šírkou a gutterom. */

.zine,
.article {
    width: min(calc(100% - 2 * var(--gutter)), var(--max-width));
    margin-inline: auto;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* Výpis magazínu: rovnaký pás s fotkou ako rozcestník, len s menším titulkom —
   Astrozin je podstránka, nie druhá titulná stránka. */
.hero--zine h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: -0.035em;
}

/* Detail článku. Predvolene pás bez fotky: spoločná hero-scope.webp patrí
   horoskopom, nie článku o inej téme. Gradient ostáva, aby pás nebol plochý —
   preto sa vypína iba obrázková vrstva. Výšku pásu (`.hero__inner`) si
   `.hero--article` nevlastní — necháva ju na spoločnom pravidle v styles.css,
   aby bol hero rovnako vysoký na blogu aj pri horoskopoch, s fotkou aj bez nej. */
.hero--article {
    --hero-image: none;
    background-color: var(--bg-hero);
}

.hero--article h1 {
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    letter-spacing: -0.03em;
}

/* Titulok článku je vetou, nie jedným slovom ako meno znamenia — potrebuje
   širší riadok než 34rem, ktoré stačia hero textu inde. */
.hero--article .hero__text {
    max-width: 46rem;
}

.hero--article .lead {
    max-width: 54ch;
    margin-bottom: 1.25rem;
}

/* ── Mriežka článkov ─────────────────────────────────────────────────────────
   Rovnaká myšlienka aj rovnaké zlomy ako mriežka znamení na rozcestníku
   (.sign-grid): karta je celá jeden odkaz, takže je cieľ veľký aj na dotyk. */

.zine {
    padding: clamp(2rem, 5vw, 3.25rem) 0 0;
    margin-bottom: clamp(2rem, 5vw, 3rem);

}

.zine-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zine-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.zine-card:hover {
    border-color: var(--warm);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.zine-card__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--line);
    object-fit: cover;
}

/* Článok bez náhľadu nedostane prázdne miesto ani vymyslený obrázok, ale
   plochu v farbách webu — mriežka tak ostane zarovnaná. */
.zine-card__media--empty {
    display: block;
    background: linear-gradient(150deg, var(--brand-soft), var(--surface-soft));
}

.zine-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem 1.15rem 1.15rem;
}

.zine-card__date {
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.zine-card__title {
    margin-bottom: 0.5rem;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2;
}

.zine-card__text {
    margin-bottom: 0.9rem;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.zine-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 600;
}

.zine-card:hover .zine-card__more {
    text-decoration: underline;
}

/* Prázdny magazín. Nie je to chybový stav, len ho treba pomenovať. */
.zine-empty {
    margin: 0;
    padding: 2rem 1rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--muted);
    text-align: center;
}

.zine-empty a {
    color: var(--brand);
}

/* ── Detail článku ───────────────────────────────────────────────────────── */

.article {
    padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem);
}

/* Odkaz späť je pod textom hero, aby sa titulok začínal hore ako inde na webe. */
.article__back {
    margin: 0;
    font-size: 0.9rem;
}

.article__back a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.article__back a:hover {
    text-decoration: underline;
}

/* Telo článku. `prose` (styles.css) dáva šírku riadku a farbu textu; tu
   pribúda len to, čo krátky výklad znamenia nepotreboval. */
.article__body {
    font-size: 1.05rem;
}

.article__body h2 {
    margin: 2.25rem 0 0.75rem;
    color: var(--ink);
    font-size: clamp(1.4rem, 2.8vw, 1.85rem);
}

.article__body h3 {
    margin: 1.75rem 0 0.6rem;
    color: var(--ink);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

.article__body p {
    margin: 0 0 1.15rem;
}

.article__body ul,
.article__body ol {
    margin: 0 0 1.15rem;
    padding-left: 1.35rem;
}

.article__body li {
    margin-bottom: 0.4rem;
}

.article__body blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.1rem;
    border-left: 3px solid var(--warm);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.1rem;
}

/* Odkazy v texte musia byť rozoznateľné aj bez farby — text článku je jediné
   miesto na webe, kde je odkaz uprostred vety. Interné aj externé vyzerajú
   rovnako; kam vedú, rozhodol builder, nie táto vrstva. */
.article__body a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.article__body a:hover {
    color: var(--brand-deep);
}

.article__body hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.article__body code {
    padding: 0.1em 0.35em;
    border-radius: 0.35rem;
    background: var(--surface-soft);
    font-size: 0.9em;
}

/* Obrázok v tele. Vystúpi na plnú šírku stĺpca — .prose drží text na 62ch,
   fotka nemá dôvod byť užšia. */
.article__figure {
    width: 100%;
    max-width: min(100%, 46rem);
    margin: clamp(1.5rem, 4vw, 2.25rem) 0;
}

.article__figure img {
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.article__figure figcaption {
    margin-top: 0.6rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* ── Aspekty (podsekcia `audit`) ─────────────────────────────────────────────
   Doklad k výkladu, nie text na čítanie zhora nadol. Preto je zbalený a otvára
   sa malým tlačidlom — <details> to zvládne bez JavaScriptu, takže obsah ostáva
   dostupný aj keď skript zlyhá, a vyhľadávač ho vidí. */

.aspects {
    margin: -0.35rem 0 1.6rem;
}

/* `list-style: none` aj -webkit- pravidlo: bez oboch ostane vedľa tlačidla
   trojuholník markera. */
.aspects__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.aspects__toggle::-webkit-details-marker {
    display: none;
}

.aspects__toggle:hover {
    border-color: var(--warm);
    color: var(--ink);
}

/* Znamienko stavu je na konci tlačidla, aby sa neplietlo s ikonou vpredu. */
.aspects__toggle::after {
    content: "+";
    margin-left: 0.15rem;
    font-size: 1rem;
    line-height: 1;
}

.aspects[open] .aspects__toggle::after {
    content: "−";
}

/* Tabuľka aspektov je široká; rolovanie ostáva vnútri tohto bloku, aby
   nerolovala celá stránka. */
.aspects__body {
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow-x: auto;
}

.aspects__note {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.aspects__body table {
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* Ponuka osobného horoskopu bez pravého stĺpca s kartami: bez neho by textu
   ostal 22rem stĺpec z dvojstĺpcového .pitch. */
.pitch--solo {
    grid-template-columns: minmax(0, 1fr);
}

.pitch--solo .pitch__claim {
    max-width: 46ch;
}

/* ── Procesný pás ────────────────────────────────────────────────────────────
   Postupnosť krokov, ktorou niečo na tomto webe vzniká. Markup kreslí makro
   `strip()` v _flow.html.

   Bol inline v <head> stránky /ako-vznikaju-horoskopy/, kým bol blokom jedinej
   stránky. Odkedy ho používa aj /osobny-horoskop/, patrí sem: obe stránky
   blog.css aj tak načítavajú kvôli .article__body a dve kópie 90 riadkov CSS
   by sa pri prvej zmene vzhľadu rozišli.

   Pás stojí vedľa .article__body, nie v ňom: prose drží riadok na 62ch, čo je
   pre päť krokov vedľa seba priúzke. Vlastnú šírku má preto o niečo väčšiu než
   text, ale menšiu než celý článok — inak by sa schéma od textu, ku ktorému
   patrí, opticky odtrhla. */

.flow {
    width: min(100%, 52rem);
    margin: 2rem 0 2.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.flow__step {
    position: relative;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.flow__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.7rem;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

.flow__title {
    margin: 0 0 0.3rem;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.flow__text {
    margin: 0;
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.5;
}

/* Šípka medzi krokmi. Je dekoratívna — poradie nesie <ol> — takže je to
   pseudoprvok a nie ďalší kus markupu. Na mobile mieri nadol, od šírky, kde sa
   kroky zoradia do riadka, doprava. */
.flow__step + .flow__step::before {
    content: "";
    position: absolute;
    top: -0.62rem;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--line-strong);
    border-bottom: 2px solid var(--line-strong);
    transform: translateX(-50%) rotate(45deg);
}

@media (min-width: 46rem) {
    .flow {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 1.4rem;
    }

    .flow__step + .flow__step::before {
        top: 2.35rem;
        left: -1rem;
        transform: rotate(-45deg);
    }
}

/* Zhrnutie procesu jednou vetou — to isté, čo pás nad ním, ale v podobe, ktorú
   si človek zapamätá a vie odcitovať. */
.flow-summary {
    width: min(100%, 52rem);
    margin: 0 0 2.5rem;
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-weight: 600;
    line-height: 1.6;
}

/* Pás vložený značkou [[flow:…]] stojí priamo v tele článku (.article__body),
   kde by typografia odsekov a zoznamov (.article__body p / ol) svojou vyššou
   špecificitou prepísala jeho vlastné okraje a odsadenie. Tu sa len opakuje
   to, čo pás deklaruje vyššie, so špecificitou, ktorá v tele obstojí. */
.article__body .flow {
    margin: 2rem 0 2.5rem;
    padding: 0;
}

.article__body .flow__title {
    margin: 0 0 0.3rem;
}

.article__body .flow__text {
    margin: 0;
}

.article__body p.flow-summary {
    margin: 0 0 2.5rem;
}

/* ── Responzivita ────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
    .zine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article__body {
        font-size: 1rem;
    }
}