/* =========================================================================== CONTENT.CSS -- globalni tablet content raster (768-921 px). Presunuto z audit-fixes SS12 (guttery) + SS27 (about-pages layouty), konsolidace 2026-09-08. Load 10001 (za audit 10000 i responsive 9999) -> tablet guttery vyhravaji nad responsive.css pořadim jako driv z audit. responsive.css mobilni guttery zustavaji (content.css resi jen tablet). =========================================================================== */ /* Globalni obsahovy rastr: 32px gutter + nested reset (z SS12). */ @media (min-width: 768px) and (max-width: 921.98px) { .ast-container { padding-left: 32px; padding-right: 32px; } #main .wp-block-group, #main .wp-block-columns, .wp-block-group__inner-container { padding-left: 32px; padding-right: 32px; } #main .wp-block-group .wp-block-group, #main .wp-block-columns .wp-block-columns, #main .wp-block-group .wp-block-columns { padding-left: 0; padding-right: 0; } } /* =========================================================================== 27. ABOUT PAGES — reusable tablet content patterns Test URLs: - /profil-spolecnosti/ - /profil-spolecnosti/volna-mista/ - /profil-spolecnosti/nadacni-fond-gamin/ Keep the fixes component/structure based: hero columns with H1 + image stay two-column on tablet, and subsidiary company cards use the existing .dcerinne-spolecnosti component class. ========================================================================== */ @media (min-width: 768px) and (max-width: 921.98px) { .entry-content > .wp-block-columns:has(h1):has(.wp-block-image) { flex-wrap: nowrap !important; gap: 32px !important; padding-right: 0 !important; padding-left: 0 !important; } .entry-content > .wp-block-columns:has(h1):has(.wp-block-image) > .wp-block-column, .entry-content > .wp-block-columns:has(h1):has(.wp-block-image):not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: calc(50% - 16px) !important; width: calc(50% - 16px) !important; min-width: 0 !important; } .entry-content > .wp-block-columns:has(h1):has(.wp-block-image) .wp-block-image { width: 100% !important; height: 100% !important; min-height: 282px !important; margin: 0 !important; } .entry-content > .wp-block-columns:has(h1):has(.wp-block-image) .wp-block-image img { display: block !important; width: 100% !important; height: 100% !important; min-height: 282px !important; object-fit: cover !important; border-radius: 24px !important; } /* A6 — `:not(.pocitadla)` je nutné: tento obecný dvousloupcový tablet layout jinak přebíjel `.pocitadla.wp-block-columns` (blok 14 výše), protože má vyšší specificitu i pozdější pořadí. Počítadla pak měla 2 sloupce místo 3 a nulový boční padding (čísla lepila na okraj). */ .entry-content > .wp-block-columns:not(:has(h1)):not(.dcerinne-spolecnosti):not(.pocitadla):has(> .wp-block-column:nth-child(2)) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; padding-right: 0 !important; padding-left: 0 !important; } .entry-content > .wp-block-columns:not(:has(h1)):not(.dcerinne-spolecnosti):not(.pocitadla):has(> .wp-block-column:nth-child(2)) > .wp-block-column, .entry-content > .wp-block-columns:not(:has(h1)):not(.dcerinne-spolecnosti):not(.pocitadla):has(> .wp-block-column:nth-child(2)):not(.is-not-stacked-on-mobile) > .wp-block-column { width: 100% !important; min-width: 0 !important; flex-basis: auto !important; } .entry-content > .wp-block-group.odbornici { padding-right: 0 !important; padding-left: 0 !important; } .entry-content > .wp-block-group.odbornici > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; /* 32px gutter pro obsah Lidé (nadpis, tlačítko „Kontakty", karty) — dřív 0 → obsah lepil na okraj viewportu (Figma 7014:36788 content x=40). */ padding-right: 32px !important; padding-left: 32px !important; } /* Header řádek Lidé (nadpis + „Kontakty") drží na jednom řádku — nadpis flex:1 (auto šířka), button vedle vpravo. Po zúžení gutterem byla .wp-block-column 100 % (Gutenberg stack ≤781) → button se zalomil pod nadpis. */ .entry-content > .wp-block-group.odbornici > .wp-block-group__inner-container > .wp-block-columns { flex-wrap: nowrap !important; align-items: center !important; } .entry-content > .wp-block-group.odbornici > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; } .odbornici-carousel, .odbornici-carousel .owl-stage-outer { width: 100% !important; } .odbornici-carousel .owl-stage { /* -40 kompenzuje 40px levý padding owl-item → první karta lícuje s gutterem obsahu (container má nově 32px padding; 32 −40 +40 = karta na 32). Karty dál přetékají vpravo (peek). */ margin-left: -40px !important; } .entry-content > .wp-block-group:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(3)):not(:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(4))) { padding-right: 0 !important; padding-left: 0 !important; } .entry-content > .wp-block-group:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(3)):not(:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(4))) > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; padding-right: 0 !important; padding-left: 0 !important; } .entry-content > .wp-block-group:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(3)):not(:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(4))) > .wp-block-group__inner-container > .wp-block-columns { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 32px !important; padding-right: 0 !important; padding-left: 0 !important; } .entry-content > .wp-block-group:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(3)):not(:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(4))) > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column, .entry-content > .wp-block-group:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(3)):not(:has(> .wp-block-group__inner-container > h2 + .wp-block-columns > .wp-block-column:nth-child(4))) > .wp-block-group__inner-container > .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { width: 100% !important; min-width: 0 !important; flex-basis: auto !important; } } /* =========================================================================== .sluzby — vertikální rytmus + horizontální gutter (section spacing) --------------------------------------------------------------------------- Dual-kontext: homepage (body.home .sluzby = rozcestník) vs all-pages/servis (.sluzby = sekce kolem .grid-sluzby, bez .wp-block-group__inner-container). Konsolidováno z audit-fixes (§9/§10/1182/1775/1782) + custom.css #14 (mrtvý base) 2026-09-08. Živě ověřeno dev3 (rule-0) homepage+servis × 3 bp: desktop ≥922 : 32/0 (base = sluzby.css:33, mt −24 = custom.css #12) tablet 768–921 : servis 64/16 · homepage 48/16 mobil ≤767 : servis 64/16 · homepage 32/16 content.css @10001 = poslední load; !important zatím zachováno (redukce až po header fázi dle TODO). POZN. Figma-check: homepage TABLET .sluzby nemá explicitní světlé pozadí (jen mobil má bg F7F7F7) — ověřit, zda karty na tabletu nesedí na tmavém hero pruhu (band 482px). =========================================================================== */ @media (min-width: 768px) and (max-width: 921.98px) { .sluzby { padding: 64px 16px !important; } body.home .sluzby { padding: 48px 16px !important; } } @media (max-width: 767.98px) { .sluzby { padding: 64px 16px !important; } body.home .sluzby { padding: 32px 16px !important; background: var(--background-primary, #F7F7F7) !important; } }