/* ==========================================================================
Kytky od potoka - Svatby
"Inspirace & editorialy" (F7, home.php/archive.php/single.php) - per-page
glue. Vetsina layoutu je 1:1 z designu (pages.css - .page-hero, .post-grid,
.post-card...; components.css - .cta-band pres home.css, .pullquote...),
tady jen tri veci:
1) obalka clanku (design pocital s CSS placeholderem `.photo`, ktery ma
inline styl primo v HTML - tady misto toho realny ![]()
, viz .article-cover),
2) doladeni Gutenberg blokoveho obsahu uvnitr `.article-content`
(the_content() - WP dodava vlastni blokove CSS, tady jen ladime rozestupy
a barvy do designu, nic nenahrazujeme),
3) vzhled strankovani (`.blog-pagination`, vzor `.woocommerce-pagination` z wp.css).
Nacita se JEN na vypisu/detailu clanku, AZ ZA pages.css (na detailu i za
home.css kvuli .cta-band) - viz inc/enqueue.php.
========================================================================== */
/* --- 1) Obalka clanku (single.php) ---
V navrhu je to inline styl primo na `.photo` placeholderu
(design/svatby/inspirace-editorial.html): `aspect-ratio:16/9;
border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)`. Realny
![]()
uvnitr `.photo` uz resi `wp.css` (`.photo > img` - absolutni cover). */
.article-cover {
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
/* --- 2) Blokovy obsah clanku (the_content(), .article-content) ---
`.article-body` (pages.css) uz dava zakladni velikost pisma a odsazeni
odstavcu - tady doladujeme vse ostatni, co bloky prinaseji (nadpisy,
odkazy, seznamy, obrazky/galerie, citace, oddelovac). Vsechny selektory
scoped pod `.article-content`, aby specificitou spolehlive prebily
vychozi blokove CSS jadra (`wp-block-library-inline-css`) bez !important -
poradi v na tom nezalezi. */
/* Rozestupy mezi bloky - prvni blok bez horniho odsazeni (posledni bez
dolniho uz resi `.article-body > :last-child` v pages.css). */
.article-content > * {
margin-block: var(--space-md);
}
.article-content > *:first-child {
margin-top: 0;
}
/* Nadpisy uvnitr obsahu - rodina/barva uz z base.css (h1-h4), tady jen
vetsi odstup od predchoziho bloku. */
.article-content h2,
.article-content h3,
.article-content h4 {
margin-top: var(--space-xl);
margin-bottom: var(--space-sm);
}
/* Velikost nadpisu - base.css definuje jen rodinu/barvu (h1-h4), ne
font-size, takze bez tohohle by nadpisy braly vychozi velikost prohlizece
a byly MENSI nez odstavec (zmereno na realnem obsahu: h3 19,66px vs.
16,8px odstavce - sekce clanku pak vypadaly plose). Nadpis s blokovym
presetem velikosti (`has-large-font-size`/`has-medium-font-size`) ma z
`global-styles-inline-css` (jadro WP) !important, takze si autorskou
velikost prebije i pres tohle pravidlo - to je zamer, ne kolize. */
.article-content h2 { font-size: var(--step-3); }
.article-content h3 { font-size: var(--step-2); }
.article-content h4 { font-size: var(--step-1); }
/* Odkazy v textu - base.css ma `a{color:var(--c-primary);text-decoration:none}`,
v beznem textu clanku chceme podtrzeny odkaz v teplejsim odstinu.
`:not(.wp-block-button__link)` - tlacitkovy blok (core/button) je taky
`` uvnitr `.article-content`, ale ma vlastni vzhled z components.css,
podtrzeni by mu ho rozbilo. */
.article-content a:not(.wp-block-button__link) {
color: var(--c-accent-deep);
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* Seznamy - base.css ma `ul,ol{margin:0;padding:0}` (kvuli nav/footer),
uvnitr clanku potrebujeme cita odsazeni a viditelne odrazky/cisla zpet.
`:not([class*="gallery"])` - stara galerie v1 (`core/gallery` pred v2)
uklada dlazdice jako ``; bez vyjimky by
dostala odrazky i odsazeni, ktere v navrhu nema. */
.article-content ul:not([class*="gallery"]),
.article-content ol:not([class*="gallery"]) {
padding-left: 1.4em;
list-style: revert;
}
.article-content li + li {
margin-top: 0.35rem;
}
/* Obrazky (core/image) - vlastni odsazeni (vetsi nez ostatni bloky) a
zaoblene rohy stejne jako zbytek designu. */
.article-content figure.wp-block-image {
margin-block: var(--space-lg);
}
.article-content .wp-block-image img {
width: 100%;
height: auto;
border-radius: var(--radius);
}
/* Popisky fotek (figcaption) - u jednotlivych obrazku i galerii. */
.article-content .wp-block-image figcaption,
.article-content .wp-block-gallery figcaption {
font-size: 0.85rem;
color: var(--c-muted);
text-align: center;
margin-top: 0.6rem;
}
/* Galerie (core/gallery v2, `has-nested-images`) - mezera mezi dlazdicemi;
zaobleni jednotlivych fotek uz resi pravidlo `.wp-block-image img` vyse
(kazda fotka v galerii je zaroven `.wp-block-image`). */
.article-content .wp-block-gallery {
--wp--style--unstable-gallery-gap: 0.6rem;
}
/* Citace (core/quote) - zlaty prouzek v designove palete misto vychoziho
cerneho borderu z jadra. */
.article-content .wp-block-quote {
border-inline-start: 2px solid var(--c-gold);
padding-inline-start: var(--space-md);
margin-block: var(--space-lg);
font-family: var(--font-heading);
font-size: var(--step-2);
color: var(--c-primary-ink);
}
.article-content .wp-block-quote cite {
display: block;
margin-top: var(--space-sm);
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--c-muted);
font-style: normal;
}
/* Oddelovac (core/separator) - tenka zlata/border linka misto vychoziho
. */
.article-content .wp-block-separator {
border: 0;
border-top: 1px solid var(--c-border);
margin-block: var(--space-lg);
}
/* Zarovnani na stred - jedine, ktere se v realnem obsahu pouziva. */
.article-content .aligncenter {
margin-inline: auto;
}
/* `.alignwide`/`.alignfull` se v realnem obsahu dnes nevyskytuji (tema nema
`theme.json` ani `add_theme_support('align-wide')`), ale kdyby je nekdo v
editoru pouzil, nesmi rozbit uzky sloupec `.wrap--narrow` - bezpecna pojistka. */
.article-content .alignwide,
.article-content .alignfull {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
/* --- 3) Strankovani vypisu (home.php/archive.php, the_posts_pagination()) ---
Vzor `.woocommerce-pagination` z wp.css - stejne dlazdice, stejny hover,
stejna "current" vyplen, jen jina trida (WP tag pouziva `.page-numbers`,
ne `.woocommerce-pagination`). */
.blog-pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
margin-top: var(--space-xl);
}
.blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
padding: 0.5rem 0.8rem;
border-radius: var(--radius-pill);
color: var(--c-text);
font-family: var(--font-body);
font-size: 0.9rem;
background: transparent;
text-decoration: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.blog-pagination a.page-numbers:hover {
background: var(--c-plum-wash);
color: var(--c-primary-ink);
}
.blog-pagination .page-numbers.current {
background: var(--c-primary);
color: #fff;
}
.blog-pagination .page-numbers.dots {
background: none;
}
/* `.screen-reader-text` (vypisuje ho napr. `the_posts_pagination()` i
`the_posts_navigation()` na search.php) - presunuto (F7 bugfix) do
assets/css/wp.css jako obecne pravidlo, protoze WP jadro tenhle skryty
text pouziva sitewide, ne jen tady (bez presunu byl na /?s=... viditelny -
vzor presunu: checkout.css -> calendar.css z F5). */