/**
* Certifikáty a normy — design layer.
*
* The page shell (breadcrumb, leaf headline, lead, content card, teal CTA band,
* feature strip) is the Ekomateriály layer, and the editor-content typography is
* the legal pages' layer: pages/ekomaterialy.css and pages/legal.css are both
* enqueued alongside this file. Only what this page adds lives here, scoped
* under .certifikaty so nothing leaks.
*
* The page has no sticky anchor nav, so .eko-content is a standalone card with
* no .eko-layout grid parent — it needs the grid's top margin restored.
*
* The copy is untouched WPBakery editor content rendered through the loop, so
* the five certification symbols are inline ![]()
s in the editor flow and are
* styled from here rather than re-emitted in PHP.
*/
/* ---- Standalone content card (no .eko-layout wrapper) -------------------- */
.certifikaty .eko-content { margin-top: var(--space-7); }
/* ---- WPBakery wrapper neutralization -------------------------------------
legal.css scopes this reset to .legal-doc (its document card), and this page
wears .legal-doc__body inside .eko-content instead — so the reset does not
reach it and has to be repeated here. js_composer is active and really does
render these wrappers (.vc_row carries negative side margins, .vc_col-sm-12
floats), so without this the editor content breaks out of the card. */
.certifikaty .legal-doc__body .vc_row,
.certifikaty .legal-doc__body .wpb_column,
.certifikaty .legal-doc__body .vc_column-inner,
.certifikaty .legal-doc__body .wpb_wrapper,
.certifikaty .legal-doc__body .wpb_text_column,
.certifikaty .legal-doc__body .wpb_content_element {
margin: 0;
padding: 0;
width: auto;
float: none;
background: none;
box-shadow: none;
}
/* ---- Measure -------------------------------------------------------------
Without the .eko-layout nav the card is the full 1300px .wrap, which would run
the editor copy to ~170 characters a line — out of step with the shell's own
.eko-lead (max-width 880px) sitting directly above it and with the legal card
(max-width 900px) this body copy comes from. Cap the body, not the card: the
card keeps the siblings' full-width shape and its CTA band still spans it. */
.certifikaty .legal-doc__body { max-width: 900px; }
/* ---- Editor body copy ----------------------------------------------------
.legal-doc__body p and .eko-content p have identical specificity (0,2,0), so
the winner would otherwise be decided by enqueue order alone. Pin the copy to
the long-form shell's values (--ink-soft-3 is the long-form body colour) so
the page reads as Systémové dodávky / Výhradné zastúpenie regardless of the
order the two sheets load in. */
.certifikaty .legal-doc__body p {
color: var(--ink-soft-3);
font-size: 15px;
line-height: 1.7;
margin: 0 0 13px;
}
/* ---- The one --------------------------------------------------------
The copy is stored as two [vc_row]s and the second one opens with the ,
so the heading lands as the first child of a .wpb_wrapper. That trips
legal.css's "a document that opens straight with a heading keeps the card top
clean" rule, which strips the top rule and margin — but here the heading is a
mid-card section divider, not the top of the card, and it would jam against
the intro paragraph. Give the rule back. */
.certifikaty .legal-doc__body .wpb_wrapper > h2:first-child {
margin-top: var(--space-7);
padding-top: var(--space-6);
border-top: 1px solid var(--line-soft);
}
/* Match the shell's .eko-h2 rather than the legal card's smaller heading. */
.certifikaty .legal-doc__body h2 { font-size: 21px; }
/* ---- Symbol tiles --------------------------------------------------------
The five certification symbols are wide, mixed-ratio logo strips (450x90,
300x158, 450x131) sitting loose in the editor flow. Give them the .vz-brands
/ .sp-logos treatment: a card-shell tile that contains artwork of any aspect
ratio without ever cropping or stretching it. Safe to key off the paragraph:
every image paragraph in this content holds images only, never body copy.
The tile hugs its symbols (width: fit-content) and sits flush left under its
lead-in line rather than spanning the card: the strips are only ~450px of
artwork, and WP's sizes="…450px" attribute pins the browser to the 450w
srcset candidate, so stretching the tile to the full card width would strand
the logos in dead space (and upscaling them would only blur). */
.certifikaty .legal-doc__body p:has(> img) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--space-4) var(--space-6);
width: fit-content;
max-width: 100%;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-5) var(--space-6);
margin: 0 0 var(--space-4);
}
.certifikaty .legal-doc__body p:has(> img) img {
/* height:auto is load-bearing: the reset only sets img { max-width:100% }, so
WP's printed height attribute would stay a presentational hint, both axes
would be definite and the strips would distort as the tile narrows.
width:auto + max-height then scales every symbol to one optical height. */
width: auto;
height: auto;
max-width: 100%;
max-height: 88px;
object-fit: contain;
}
/* ---- Lead-in lines -------------------------------------------------------
Each bold line introduces the symbol tile directly below it (all of them end
in a colon), so bind it to its tile instead of letting it float mid-gap.
Keyed on the tile below rather than on , because the "bio-based"
paragraph is ordinary body copy that merely contains a — a
strong-based selector would style it as a label by mistake. Note :has() may
not be nested inside :has(), hence the "+ p > img" relative selector. */
.certifikaty .legal-doc__body p:has(+ p > img) { margin-bottom: var(--space-3); }
/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
.certifikaty .eko-content { margin-top: var(--space-5); }
}
@media (max-width: 600px) {
.certifikaty .legal-doc__body p:has(> img) {
gap: var(--space-3);
padding: var(--space-4);
}
.certifikaty .legal-doc__body p:has(> img) img { max-height: 64px; }
.certifikaty .legal-doc__body h2 { font-size: 19px; }
}