, which fooled the first classifier into calling it an
inline link. It is the primary tap target of the card. */
.hub-list a,
.article .inline-cta,
.related a {
display: inline-block;
min-height: 44px;
padding: 11px 0;
box-sizing: border-box;
}
/* ⚠️ SCOPED to ul.tel-lines, deliberately. Written unscoped as
`.article ul li a[href^="tel:"]`, it silently captured the "Zavolat"
button in .channels — a tel: link that also lives in an .article ul li —
and overrode its display:flex with inline-block, so it rendered
shrink-wrapped at 149px beside three full-width 321px siblings. Every
assertion passed (heights matched, no collision, no overflow); only the
screenshot showed it. Keep list-specific rules bound to their list. */
.article ul.tel-lines li a[href^="tel:"] {
display: inline-block;
min-height: 44px;
padding: 11px 10px;
margin: 0 -10px;
box-sizing: border-box;
}
}
/* --- short-page footer ----------------------------------------------------
The hub is ~767px tall, so on a desktop viewport the footer sat mid-screen
with dead white space beneath it. Pushes the footer to the bottom when the
content is shorter than the viewport; no effect once content exceeds it.
⚠️ Safe to put a `body` rule here ONLY because article.v1.css is loaded
exclusively by pages under /informace/. index.html does not load this sheet,
so the homepage's hero geometry — three documented CTA regressions — is
untouched. If this sheet is ever linked from the homepage, delete this rule
first. ------------------------------------------------------------------ */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body > .footer-bar {
margin-top: auto;
}
/* --- contact channel buttons ---------------------------------------------
2026-08-02 (0.29.0). One number, four ways to use it.
⚠️ Order is deliberate and load-bearing: the plain tel: link is FIRST and
visually primary because it is the only option that works on every device
with no app installed and no data connection. viber:// and tg:// need their
app; on a desktop browser without it they do nothing at all.
⚠️ Each row is a full-width block ≥56px, so the 44px touch-target rule is
satisfied structurally rather than by a coarse-pointer override. -------- */
.channels {
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.channels li {
margin-bottom: 10px;
}
.channels .ch {
display: flex;
align-items: center;
gap: 14px;
min-height: 60px;
padding: 10px 16px;
border: 2px solid #e2e6ea;
border-radius: 12px;
background: #fff;
text-decoration: none;
color: #16202a;
box-sizing: border-box;
}
.channels .ch-call {
border-color: #11457E;
background: #11457E;
color: #fff;
}
.channels .ch-ico {
/* was font-size, for an emoji. Now an : give it an explicit box so it
cannot reflow while the SVG loads, and flex-shrink:0 so a long label can
never squeeze it. The phone row uses the existing white PNG because its
row is dark blue; the other three use brand-coloured SVGs because their
rows are white and a white glyph would be invisible. */
width: 26px;
height: 26px;
flex-shrink: 0;
object-fit: contain;
}
.channels .ch-txt {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.channels .ch-txt strong {
font-size: 19px;
font-weight: 800;
}
.channels .ch-txt span {
font-size: 15px;
color: #5a6570;
}
.channels .ch-call .ch-txt span {
color: #cfe0f5;
}
@media (max-width: 768px) {
.channels .ch {
min-height: 56px;
padding: 8px 14px;
gap: 12px;
}
.channels .ch-txt strong {
font-size: 17px;
}
.channels .ch-txt span {
font-size: 13px;
}
}