/* ==========================================================
   BLOG PREVIEW NA HOMEPAGE
========================================================== */

/* 1) přetečení mimo šířku stránky — "row" má ze Shoptetu záporné
   okraje kompenzující gutter potomků typu .col-*, ale tady žádné
   takové potomky nejsou, takže wrapper přetékal ven.

   Mřížka článků je teď CSS grid místo flex + procentuální šířky —
   s procenty (25/50/100 %) nejde zároveň použít "gap" mezi kartami,
   protože 4×25 % + 3×gap přeteče přes 100 %. Grid s "fr" sloupci
   odečte gap automaticky, takže první i poslední karta lícuje s
   okrajem stránky stejně jako zbytek webu. */
.homepage-blog-wrapper.row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: var(--sh-space-md) !important;
    row-gap: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    /* mezera nad/pod sekcí — stejný vzor jako .sh-delivery-section */
    padding-top: var(--sh-space-section) !important;
    padding-bottom: var(--sh-space-md) !important;
}

@media (max-width: 991px) {
    .homepage-blog-wrapper.row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .homepage-blog-wrapper.row {
        grid-template-columns: 1fr !important;
    }
}

/* 2) nadpis sekce — stejný vzor jako .sh-segmentation-intro__label +
   __title (eyebrow label + nadpis), vlevo zarovnáno. Vlastní text
   vložen přes ::before/::after (stejná technika jako
   .footer-newsletter h2 ve footer.css), protože Shoptet text
   "Nové články" vypisuje přímo do elementu bez podtříd, které by šlo
   cílit zvlášť. Text nadpisu si pak snadno přepíšeš v admin/CSS. */
.homepage-blog-wrapper .homepage-group-title {
    grid-column: 1 / -1;

    display: block;
    width: 100%;
    padding: 0 !important;
    font-size: 0;
    text-align: left;
    margin: 0 0 var(--sh-space-md);
}

.homepage-blog-wrapper .homepage-group-title::before {
    content: "Blog";
    display: block;
    margin: 0 0 var(--sh-space-xs);

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xs);
    font-weight: var(--sh-font-weight-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sh-color-accent);
}

.homepage-blog-wrapper .homepage-group-title::after {
    content: "Přečtěte si lorem ipsum";
    display: block;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* 3) karta — varianta A: obrázek nahoře v normálním toku (žádné
   tmavé překrytí přes text), pod ním titulek/perex/tlačítko, vlevo
   zarovnáno. Stejný vzor jako .sh-segment-card výše na stránce —
   proto doporučená varianta, drží se stávajícího jazyka webu a
   nefightuje s absolutním pozicováním, které Shoptet používá pro
   výchozí "obrázek na pozadí" vzhled.

   Jako grid item nepotřebuje .news-item žádnou šířku/flex-basis —
   o to se stará grid-template-columns na wrapperu. */
.homepage-blog-wrapper .news-item {
    display: block !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.homepage-blog-wrapper .news-item > a {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 0 !important;
    align-items: flex-start;
    text-decoration: none !important;
    color: inherit;
}

.homepage-blog-wrapper .news-item .image {
    position: static !important;
    display: block !important;
    height: auto !important;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
    margin-bottom: var(--sh-space-sm) !important;
}

.homepage-blog-wrapper .news-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform .4s ease;
}

.homepage-blog-wrapper .news-item:hover .image img {
    transform: scale(1.03);
}

.homepage-blog-wrapper .news-item .text {
    position: static !important;
    inset: auto !important;
    background: none !important;
    padding: 0 !important;
    width: 100%;
    overflow: visible !important;
}

.homepage-blog-wrapper .news-item .title {
    display: block !important;
    -webkit-line-clamp: 2;
    margin: 0 0 var(--sh-space-xs) !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading) !important;
    color: var(--sh-color-text) !important;
}

.homepage-blog-wrapper .news-item .description {
    margin: 0 0 var(--sh-space-sm) !important;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text) !important;
}

.homepage-blog-wrapper .news-item .read-article {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-cta);

    transition: var(--sh-transition);
}

.homepage-blog-wrapper .news-item .read-article i {
    margin-left: 4px;
}

.homepage-blog-wrapper .news-item:hover .read-article {
    color: var(--sh-color-cta-hover);
}


/* ==========================================================
   BLOG — STRÁNKA /blog/ (VÝPIS RUBRIK + ČLÁNKŮ)
========================================================== */

/* ---------- intro text pod nadpisem "Blog" ----------
   Shoptet má na téhle stránce vlastní pole na text pod nadpisem
   (stejné jako "Popis kategorie" u kategorií), vyplňuje se v adminu
   u stránky Blog — jde tam vložit i HTML (odkazy do budoucna).
   Stejný styl jako .category-perex v category.css, ať to sedí. */
.sectionDescription {
    max-width: 60%;
    margin: 0 0 var(--sh-space-md);

    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-body);

    color: var(--sh-color-text);
}

.sectionDescription a {
    color: var(--sh-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--sh-transition);
}

.sectionDescription a:hover {
    color: var(--sh-color-accent-hover);
}

@media (max-width: 767px) {
    .sectionDescription {
        max-width: 100%;
    }
}

/* ---------- rubriky (Recenze, Recepty...) ----------
   Stejná vizuální řeč jako .subcategories.with-image u kategorií
   produktů (category.css) — tady ale bez obrázkového pole, jen
   text + šipka, takže žádné .image ke schování. */
.content-inner > ul.subcategories {
    justify-content: flex-start !important;
    margin-left: 0;
    flex-wrap: wrap;
}

.content-inner > ul.subcategories > li {
    padding-left: 0;
    padding-right: var(--sh-space-sm);
}

.content-inner > ul.subcategories li a {
    justify-content: flex-start;
    background: var(--sh-color-surface);
    padding: 22px 18px !important;
    height: auto !important;
    border: 1px solid var(--sh-color-border) !important;
    border-radius: var(--sh-radius-md);
    box-shadow: none;
    transition: var(--sh-transition);
}

.content-inner > ul.subcategories li a:hover {
    background: var(--sh-color-active);
    border-color: var(--sh-color-active) !important;
    color: var(--sh-color-text-inverse);
}

/* stejný styl jako položky hlavního menu (.navigation-in > ul > li > a
   v header.css) — font body, ne headings, a VELKÁ PÍSMENA */
.content-inner > ul.subcategories li a .text {
    width: auto;
    flex: 1;
    font-size: clamp(14px, 0.9vw, 16px);
    font-family: var(--sh-font-family-body);
    font-weight: var(--sh-font-weight-body);
    text-transform: uppercase;
    /* stejný důvod jako u category.css — s overflow:hidden (ellipsis)
       potřebuje diakritika (háčky nad Č/Š/Ž) víc místa než 1.2 */
    line-height: 1.3;
    letter-spacing: 0;

    /* main-14 dává max-height:32px — u větší velikosti písma to
       zbytečně omezovalo výšku, tak pryč. Ale overflow:hidden necháváme
       (spolu s main-14 white-space:nowrap + text-overflow:ellipsis) —
       jinak se .text jako flex:1 položka nesmrskne pod obsah a dlouhý
       název rubriky přeteče přes kartu místo aby se zkrátil na "…" */
    max-height: none !important;
    overflow: hidden !important;
}

@media (max-width: 991px) {
    .content-inner > ul.subcategories {
        display: flex !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: var(--sh-space-sm);
    }

    .content-inner > ul.subcategories > li {
        flex: 0 0 calc(50% - (var(--sh-space-sm) / 2)) !important;
        width: calc(50% - (var(--sh-space-sm) / 2)) !important;
        max-width: calc(50% - (var(--sh-space-sm) / 2)) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .content-inner > ul.subcategories > li > a {
        width: 100% !important;
        height: 100%;
        padding: 16px 14px !important;
    }
}

@media (max-width: 767px) {
    .content-inner > ul.subcategories > li {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- výpis článků ----------
   Shoptet dává #newsWrapper.blog-wrapper stejné .news-item karty jako
   na homepage, ale bez naší úpravy (tmavý overlay přes obrázek,
   nadpis bílý přes fotku). Sjednoceno se vzhledem karet na homepage
   (viz "BLOG PREVIEW NA HOMEPAGE" výše) — obrázek nahoře v normálním
   toku, text pod ním, vlevo zarovnáno. Grid místo Shoptet flexu ze
   stejného důvodu jako u homepage wrapperu (gap + %šířky se perou). */
#newsWrapper.news-wrapper.blog-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--sh-space-md) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--sh-space-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    #newsWrapper.news-wrapper.blog-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    #newsWrapper.news-wrapper.blog-wrapper {
        grid-template-columns: 1fr !important;
    }
}

#newsWrapper.news-wrapper.blog-wrapper .news-item {
    display: block !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item > a {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 0 !important;
    align-items: flex-start;
    text-decoration: none !important;
    color: inherit;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .image {
    position: static !important;
    display: block !important;
    height: auto !important;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
    margin-bottom: var(--sh-space-sm) !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform .4s ease;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item:hover .image img {
    transform: scale(1.03);
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .text {
    position: static !important;
    inset: auto !important;
    background: none !important;
    padding: 0 !important;
    width: 100%;
    overflow: visible !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .title {
    display: block !important;
    -webkit-line-clamp: 2;
    margin: 0 0 var(--sh-space-xs) !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading) !important;
    color: var(--sh-color-text) !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .description {
    margin: 0 0 var(--sh-space-sm) !important;
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text) !important;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .read-article {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-base);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-accent);

    transition: var(--sh-transition);
}

#newsWrapper.news-wrapper.blog-wrapper .news-item .read-article i {
    margin-left: 4px;
}

#newsWrapper.news-wrapper.blog-wrapper .news-item:hover .read-article {
    color: var(--sh-color-accent-hover);
}


/* ==========================================================
   ČLÁNEK — DETAIL
   Vše pod .news-item-detail .text je obsah, který klient vkládá
   přes HTML editor v administraci (viz blog-article-template.html).
   Třídy s prefixem .sh-article__ patří ke komponentám ze šablony
   (tip box, CTA, FAQ, obrázky vedle sebe, autor, zdroje...).
   Prosté h2/h3/p/ul/a/strong/img se stylují přímo, beze třídy,
   protože je klient píše/vkládá jako čistý formátovaný text.
========================================================== */

/* Shoptet dává stránkám s .content.wide pevný max-width:820px (zřejmě
   defaultní "čitatelná" šířka pro CMS obsah) — na detailu článku ho
   nechceme, chceme celou šířku layoutu webu jako zbytek stránek.
   Scoped na body.type-post, aby to neovlivnilo jiné "wide" stránky. */
body.type-post main.content.wide {
    max-width: none !important;
    width: 100%;
}

/* nadpis článku */
.news-item-detail article > header h1 {
    margin: 0 0 var(--sh-space-md);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
    text-align: left;
}

/* stejná rezerva nahoře jako u .pageArticleDetail (pages.css) —
   na tabletu/mobilu je hlavička position:fixed a nadpis by jinak
   sedněl hned na hranu obsahu */
@media (max-width: 991px) {
    .news-item-detail article > header h1 {
        margin-top: var(--sh-space-xs);
    }
}

/* ---------- dvousloupcový layout ----------
   Šablona (viz blog-article-template.html) obaluje obsah do dvou divů:
   .sh-article__col-main (hlavní text, nadpisy, obrázky v textu...)
   a .sh-article__col-side (náhledový obrázek, CTA, autor) — obě jsou
   nezávislé, samostatně rostoucí "koleje" vedle sebe (ne float, kde
   se prvky lepí hned pod sebe bez ohledu na obsah v hlavním sloupci).

   Nativní obrázek článku (article > img, samostatné pole v adminu
   mimo textový editor) se pro tenhle layout nepoužívá — skutečný
   náhledový obrázek je součástí šablony uvnitř .col-side
   (.sh-article__hero), aby šel dát do stejného sloupce jako CTA
   a autor. Pole v adminu proto schováváme, ať omylem nezůstane
   viditelné, když do něj klient něco nahraje. */
.news-item-detail article > img {
    display: none;
}

.sh-article__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-lg);
}

.sh-article__col-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sh-article__col-side {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: var(--sh-space-md);
}

.sh-article__hero {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
}

.sh-article__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
}

/* uvnitř .col-side dělá odstup mezi bloky "gap" na rodiči, takže
   vlastní horní/dolní margin (pro použití mimo boční sloupec) tu
   není potřeba */
.sh-article__col-side > .sh-article__cta,
.sh-article__col-side > .sh-article__author {
    margin: 0;
}

@media (max-width: 991px) {
    .sh-article__col-side {
        flex-basis: 260px;
    }
}

@media (max-width: 767px) {
    .sh-article__row {
        flex-direction: column;
    }

    .sh-article__col-side {
        flex-basis: auto;
        width: 100%;
    }
}

/* ---------- základní typografie vloženého obsahu ---------- */

.news-item-detail .text {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
}

.news-item-detail .text > p {
    margin: 0 0 var(--sh-space-sm);
}

.news-item-detail .text h2 {
    margin: var(--sh-space-lg) 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.news-item-detail .text h3 {
    margin: var(--sh-space-md) 0 var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.news-item-detail .text ul,
.news-item-detail .text ol {
    margin: 0 0 var(--sh-space-sm);
    padding-left: 1.25em;
}

.news-item-detail .text li {
    margin-bottom: var(--sh-space-xs);
}

.news-item-detail .text li::marker {
    color: var(--sh-color-accent);
}

.news-item-detail .text a {
    color: var(--sh-color-accent);
    text-decoration: underline;
    transition: var(--sh-transition);
}

.news-item-detail .text a:hover {
    color: var(--sh-color-accent-hover);
}

.news-item-detail .text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sh-radius-md);
    margin: var(--sh-space-sm) 0;
}

.news-item-detail .text sup {
    color: var(--sh-color-text-muted);
}

/* ---------- úvodní odstavec (zvýrazněný lead) ---------- */

.sh-article__lead {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-lg);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-medium);
    color: var(--sh-color-text);
    margin: 0 0 var(--sh-space-md);
}

/* ---------- obsah článku (kotvy) ---------- */

.sh-article__toc {
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-card);
    margin: 0 0 var(--sh-space-lg);
}

.sh-article__toc-title {
    display: block;
    margin: 0 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sh-color-text);
}

/* varianta nadpisu podbarveného boxu bez uppercase, o něco menší
   než H2 nad ním (ne kotvy "obsah článku", ale samostatný box, např.
   "Výše členství" na stránce Spolku) */
.sh-article__toc-title--plain {
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    text-transform: none;
    letter-spacing: normal;
}

.sh-article__toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .news-item-detail .text ul má padding-left: 1.25em a margin-bottom
   (viz "základní typografie vloženého obsahu") a bije se specificitou
   s .toc/.related ul — tady to explicitně vynulujeme, aby odkazy
   lícovaly vlevo se zbytkem obsahu a seznam neměl zbytečnou mezeru
   dole (o mezeru mezi bloky se stará margin na .toc/.related samotném) */
.news-item-detail .text .sh-article__toc ul,
.news-item-detail .text .sh-article__related ul {
    padding-left: 0;
    margin: 0;
}

.sh-article__toc li {
    margin: 0 0 var(--sh-space-xs);
}

.sh-article__toc li::marker {
    content: none;
}

.sh-article__toc a {
    font-weight: var(--sh-font-weight-medium);
}

/* ---------- tip / zvýrazněný box ---------- */

.sh-article__tip {
    background: var(--sh-color-cool-subtle);
    border-left: 4px solid var(--sh-color-cool);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-sm) var(--sh-space-md);
    margin: var(--sh-space-md) 0;

    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
    text-align: left;
}

.sh-article__tip p:last-child {
    margin-bottom: 0;
}

.sh-article__tip-title {
    display: block;
    margin-bottom: var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text);
}

/* ---------- obrázky vedle sebe ---------- */

.sh-article__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sh-space-sm);
    margin: var(--sh-space-md) 0;
}

.sh-article__images img {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

@media (max-width: 600px) {
    .sh-article__images {
        grid-template-columns: 1fr;
    }
}

/* ---------- citace ---------- */

.news-item-detail .text blockquote {
    margin: var(--sh-space-md) 0;
    padding: 0 0 0 var(--sh-space-md);
    border-left: 4px solid var(--sh-color-cta);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    font-style: normal;
    color: var(--sh-color-text);
}

.news-item-detail .text blockquote p {
    margin: 0;
}

.news-item-detail .text blockquote cite {
    display: block;
    margin-top: var(--sh-space-xs);

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-sm);
    font-style: normal;
    font-weight: var(--sh-font-weight-body);
    color: var(--sh-color-text-muted);
}

/* ---------- CTA banner ---------- */

.sh-article__cta {
    background: var(--sh-color-cta-subtle);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-box);
    margin: var(--sh-space-lg) 0;
    text-align: left;
}

.sh-article__cta-title {
    display: block;
    margin: 0 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-cta-dark);
}

.sh-article__cta p {
    max-width: 480px;
    margin: 0 0 var(--sh-space-sm);
    color: var(--sh-color-text);
}

.sh-article__cta .sh-btn {
    margin-top: var(--sh-space-xs);
}

/* ---------- FAQ (nativní <details>/<summary>, bez JS) ---------- */

/* pojistka: kdyby byl budoucí článek kratší než plovoucí boční sloupec
   (obrázek+CTA+autor), tahle a další "závěrečné" sekce se i tak vždy
   zarovnají na celou šířku, ne vedle zbytku sloupce */
.sh-article__faq,
.sh-article__sources,
.sh-article__related {
    clear: both;
}

/* zpátky na 1 sloupec – 2 sloupce přes CSS grid (grid-auto-flow:
   column) měly nečekaný postranní efekt: položky ve stejném řádku
   mřížky (1↔4, 2↔5, 3↔6) sdílely výšku řádku, takže otevření jedné
   otázky "nafouklo" i buňku sousední otázky ve druhém sloupci, i
   když se ve skutečnosti otevřela jen jedna. Šířka se řeší per
   kontext (blog vs. Spolek/Kontakty/Doprava) – viz níže / pages.css. */
.sh-article__faq {
    margin: 0;
}

/* margin přesunut z .sh-article__faq na nadpis "Časté otázky" před ním,
   ať box s otázkami sedí hned pod nadpisem bez mezery navíc */
h2:has(+ .sh-article__faq) {
    margin: var(--sh-space-md) 0 0;
}

.sh-article__faq-item {
    border-bottom: 1px solid var(--sh-color-border);
    padding: var(--sh-space-s) 0;
}

.sh-article__faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-space-sm);
    cursor: pointer;
    list-style: none;

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.sh-article__faq-item summary::-webkit-details-marker {
    display: none;
}

.sh-article__faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: var(--sh-heading-sm);
    line-height: 1;
    color: var(--sh-color-accent);
    transition: var(--sh-transition);
}

.sh-article__faq-item[open] summary::after {
    content: "–";
}

.sh-article__faq-item p {
    margin: var(--sh-space-sm) 0 0;
    color: var(--sh-color-text);
}

/* ---------- související články ---------- */

.sh-article__related {
    margin: var(--sh-space-lg) 0;
}

/* nadpis teď jede přes sdílený label+title pár (.sh-segmentation-intro__label
   / __title z homepage.css), stejný vzor jako jinde na webu – obojí
   jsou <span> bez vlastního display:block (na homepage title sedí na
   <h2>, který je blokový sám o sobě), tady proto sedly vedle sebe na
   jeden řádek místo pod sebe; vynuceno jen v tomhle kontextu. Ta
   sdílená třída sama nemá margin-bottom (na homepage o to řeší
   rodič), tady ho doplňujeme jen v tomhle kontextu */
.sh-article__related .sh-segmentation-intro__label,
.sh-article__related .sh-segmentation-intro__title {
    display: block;
}

.sh-article__related .sh-segmentation-intro__title {
    margin-bottom: var(--sh-space-md);
}

.sh-article__related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sh-article__related li {
    margin-bottom: var(--sh-space-xs);
}

.sh-article__related li::marker {
    content: none;
}

.sh-article__related a {
    font-weight: var(--sh-font-weight-medium);
}

/* ---------- autor ---------- */

.sh-article__author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sh-space-xs);
    background: var(--sh-color-surface);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-card);
    margin: var(--sh-space-lg) 0;
    text-align: left;
}

.sh-article__author img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: var(--sh-radius-btn);
    object-fit: cover;
    margin: 0 !important;
}

.sh-article__author-name {
    display: block;
    margin-bottom: var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-weight: var(--sh-font-weight-bold);
    color: var(--sh-color-text);
}

.sh-article__author p {
    margin: 0;
    font-size: var(--sh-text-sm);
    color: var(--sh-color-text-muted);
}

/* ---------- zdroje ---------- */

.sh-article__sources {
    margin: var(--sh-space-lg) 0 var(--sh-space-md);

    font-size: var(--sh-text-xs);
    color: var(--sh-color-text-muted);
}

.sh-article__sources ol {
    padding-left: 1.25em;
}

/* ---------- tlačítko na další článek (footer) ---------- */

/* main-14 dává i sem obecnou třídu .text-center{text-align:center} */
.news-item-detail .next-prev {
    text-align: left;
}

.news-item-detail .next-prev .btn {
    background: var(--sh-color-cta) !important;
    color: var(--sh-color-text-inverse) !important;
    border-radius: var(--sh-radius-btn) !important;
    border: none !important;
    padding: 14px 28px;
    transition: var(--sh-transition);
}

.news-item-detail .next-prev .btn:hover {
    background: var(--sh-color-cta-hover) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}