/*
 * Site theme — global stylesheet.
 *
 * Loaded on every page via wp_enqueue_style( 'site-global', ... )
 * in theme/inc/60-enqueue.php. Page-specific modules in /pages/*.css
 * depend on this handle so the cascade is: global → component →
 * page-specific.
 *
 * Contents:
 *   1. Page-level fluid scaling tokens (--scale, --read-scale, --gutter)
 *   2. Color + font tokens, reset, typography
 *   3. Nav (desktop + mobile overlay)
 *   4. Page header (sub-pages)
 *   5. Section head (with filter chips — used on archive + home)
 *   6. Project card (.card) — shared between home/projects/archives
 *   7. Team grid (.team-grid) — shared between /about and /contact
 *   8. Read-link pill (CTA used in .section-head)
 *   9. Footer
 *  10. Universal image-fill rule for <img> in image slots
 *  11. Mobile (≤768px) shared overrides for the above
 *  12. WP image-handling overrides (.has-image + [style*="background-image"])
 *  13. Font Awesome icon sizing
 *  14. Polylang lang-switcher pill (<a>-based)
 *  15. Filter chips on <a> (archive filters)
 *  16. Spacing parity .page-header + .section-head
 *  17. Nav height consistency
 *  18. Mobile gutter override
 *  19. .card[hidden] / .ncard[hidden] (filter.js hide trick)
 */


/* ════════════════════════════════════════════════════════════════════
   1. ─── Page-level fluid scaling tokens ─── shared across every page.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --scale: 0.9;
  --scale: calc(100vw / 1600px);
  --read-scale: 0.9;
  --read-scale: calc(0.9 + (var(--scale) - 0.9) * 0.4);
  --gutter: calc(100vw * 80 / 1440);
}
@media (max-width: 768px) {
  :root { --scale: 1; --read-scale: 1; --gutter: 9px; }
}


/* ════════════════════════════════════════════════════════════════════
   2. ─── Shared design system
   ════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #0a0a0a;
  --bg-2: #131313;
  --ink: #f4f1ec;
  --ink-dim: #a09c93;
  --ink-mute: #6a655c;
  --rule: #232120;
  --rule-2: #34312e;
  --accent: oklch(0.66 0.22 305);
  --font: 'Onest', ui-sans-serif, system-ui, sans-serif;

  /* ─── Layout & scaling tokens ─────────────────────────────
     Pages override these in their own :root to tighten or
     fluid-scale the layout.

     --gutter      Horizontal page padding (nav, footer, sections).
     --scale       Display scale: big headings, hero h1, brand wordmark,
                   gutter, column widths. Pages typically set this fluid
                   (calc(100vw / 1600px) → 0.9 @1440 → grows with viewport).
     --read-scale  Reading scale: body text, kv-rows, labels, card meta,
                   team names, nav links, footer text. Grows more slowly
                   than --scale so text stays comfortable on wide screens.
     Defaults below match the original "1.0 / 56px" look so legacy pages
     are unaffected. */
  --gutter: 56px;
  --scale: 1;
  --read-scale: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { font-size: calc(15px * var(--read-scale)); line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--bg); }

/* ─── Univerzální styl hyperlinku v body textech ──────────────────
   Linky uvnitř hlavních textových těl: detail aktuality, detail
   projektu (synopse — logline neobsahuje HTML), About body content
   (.motto-prose — hlavní WYSIWYG editor; pole motto + motto_small
   jsou sanitizovaná wp_kses/esc_html bez podpory <a>, takže selektor
   .motto se zde záměrně neuvádí) a Zásady ochrany osobních údajů.
   Fialová barva (accent), žádné podtržení, žádná kurziva. Hover
   lehce ztmavne přes opacity (subtle feedback, barva zachována). */
.article-body .text a,
.synopsis a,
.motto-prose a,
.privacy-section .body a {
  color: var(--accent);
  text-decoration: none;
  font-style: normal;
  transition: opacity .18s;
}
.article-body .text a:hover,
.synopsis a:hover,
.motto-prose a:hover,
.privacy-section .body a:hover {
  opacity: 0.75;
}

/* ─── Nav ─────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  padding: 28px var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(10,10,10,0);
  transition: background .3s, backdrop-filter .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled,
.nav.solid {
  background: rgba(10,10,10,0.82); backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--rule);
  padding-top: 22px; padding-bottom: 22px;
}
.brand {
  font-size: calc(26px * var(--scale)); font-weight: 600; letter-spacing: -0.025em;
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
.brand .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; flex: 0 0 auto; }
/* Logo can be an <img> instead of wordmark — výška sjednocena s patičkou
   (.foot .big img: 56px) per user request. */
.brand img, .brand svg {
  display: block; height: 56px; width: auto;
  max-width: 320px;
}
.brand:has(img), .brand:has(svg) { gap: 0; }
.brand:has(img) .dot, .brand:has(svg) .dot { display: none; }

.nav-mid { display: flex; gap: 4px; }
.nav-mid a {
  padding: 10px 18px; font-size: calc(16px * var(--read-scale)); font-weight: 500; color: var(--ink-dim);
  border-radius: 999px; transition: color .2s, background .2s;
  letter-spacing: -0.005em;
}
.nav-mid a:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.nav-mid a.active { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; }
.lang button { padding: 6px 14px; font-size: calc(13px * var(--read-scale)); font-weight: 500; color: var(--ink-mute); border-radius: 999px; transition: all .2s; letter-spacing: 0.04em; cursor: pointer; }
.lang button.on { background: var(--ink); color: var(--bg); }
.lang button:not(.on):hover { color: var(--ink); }

/* ─── Hamburger + Mobile overlay (≤768px) ────────────
   Burger lives in the header but is display:none on desktop.
   Overlay is portaled inline by NavBar when navOpen=true and is
   only visible below the breakpoint via its own media query block. */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  margin-left: auto;
  border-radius: 999px;
  transition: background .2s;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform .25s, opacity .25s;
}
.nav-burger:hover { background: rgba(255,255,255,0.04); }

.nav-overlay { display: none; }

@media (max-width: 768px) {
  .nav { grid-template-columns: 1fr auto; padding: 18px var(--gutter); }
  .nav.scrolled, .nav.solid { padding-top: 16px; padding-bottom: 16px; }
  .nav-mid { display: none; }
  .nav-right { display: none; }
  .nav-burger { display: inline-flex; }

  .nav-overlay {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 100;
    background: var(--bg);
    padding: 18px var(--gutter) 36px;
    animation: navOverlayFade .22s ease-out;
    overscroll-behavior: contain;
  }
  .nav-overlay .brand { font-size: 26px; }
  .nav-overlay-top {
    display: flex; align-items: center; justify-content: space-between;
    height: 44px;
  }
  .nav-overlay-close {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); border-radius: 999px;
    transition: background .2s, color .2s;
  }
  .nav-overlay-close:hover { background: rgba(255,255,255,0.04); color: var(--accent); }
  .nav-overlay-links {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 4px; padding: 16px 0;
  }
  .nav-overlay-links a {
    font-size: 36px; font-weight: 500;
    letter-spacing: -0.025em; line-height: 1.15;
    color: var(--ink);
    padding: 10px 0;
    transition: color .18s;
  }
  .nav-overlay-links a.active { color: var(--accent); }
  .nav-overlay-links a:hover { color: var(--accent); }
  .nav-overlay-foot { display: flex; align-items: center; }
}
@keyframes navOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Page (no animation — keeps content visible regardless of iframe visibility) */
.page { opacity: 1; }

/* ─── Page header (sub-pages) ────────────────────── */
.page-header {
  position: relative;
  padding: 160px var(--gutter) 56px;
}
.page-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 70%;
  background: radial-gradient(80% 60% at 30% 40%, oklch(0.40 0.20 305 / 0.10), transparent 70%);
  pointer-events: none;
}
.page-header h1 {
  position: relative;
  /* Linear scale — grows in step with body text rather than outrunning it
     via vw. 108 × 0.9 = 97px @1440 (matches previous clamped value),
     130px @1920, 173px @2560. Mobile override below caps at ~48px. */
  font-size: calc(108px * var(--scale)); line-height: 0.9; letter-spacing: -0.04em;
  font-weight: 500; max-width: 1100px; text-wrap: balance;
}
.page-header h1 em { color: var(--accent); font-style: italic; font-weight: 500; }
.page-header .lead {
  position: relative;
  margin-top: 28px;
  font-size: calc(19px * var(--read-scale)); line-height: 1.55; color: var(--ink-dim); max-width: 720px; text-wrap: pretty;
}

/* ─── Section head ──────────────────────────────────── */
.section-head {
  padding: 96px var(--gutter) 36px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.section-head h2 {
  font-size: calc(48px * var(--scale)); font-weight: 500; letter-spacing: -0.035em; line-height: 1.0;
}
.section-head .sub { font-size: calc(14px * var(--read-scale)); color: var(--ink-mute); margin-top: 10px; }
.section-head .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.section-head .filters button {
  padding: 7px 14px; border: 1px solid var(--rule-2); border-radius: 999px;
  font-size: calc(13px * var(--read-scale)); color: var(--ink-dim); transition: all .2s;
}
.section-head .filters button:hover { color: var(--accent); border-color: var(--accent); }
.section-head .filters button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ─── Project card (shared between home/projects) ─── */
.featured {
  padding: 0 var(--gutter) 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px 36px;
}
.card { display: flex; flex-direction: column; gap: 18px; cursor: pointer; }
.card .img-wrap {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px;
  background: var(--bg-2);
}
.card .img-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, var(--g1, oklch(0.30 0.04 280)) 0%, var(--g2, oklch(0.18 0.02 280)) 100%);
}
.card .img-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(80% 60% at 30% 30%, rgba(255,255,255,0.06), transparent 70%);
  pointer-events: none;
}
.card .img-wrap .ph {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.card .img-wrap .ph .t { font-size: calc(11px * var(--read-scale)); opacity: 0.55; font-weight: 500; letter-spacing: 0.18em; }
.card .img-wrap .ph .n { font-size: calc(28px * var(--scale)); font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: -0.01em; text-transform: none; }
.card .img-wrap .overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.card:hover .img-wrap .ph { transform: scale(1.02); }
.card .meta { display: flex; flex-direction: column; gap: 6px; }
.card .meta .top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  /* Match the date row on news cards: same size (14×read-scale), same
     dim grey, same font (Onest 400 inherited from body). */
  font-size: calc(14px * var(--read-scale)); color: var(--ink-dim); letter-spacing: 0.02em;
  font-weight: 400;
}
.card .meta .top .fmt,
.card .meta .top .status {
  color: var(--ink-dim);
}
.card .meta .top .fmt { display: inline-flex; align-items: center; gap: 6px; }
.card .meta .top .fmt .dot,
.card .meta .top .status::before {
  width: 4px; height: 4px; background: var(--accent); border-radius: 50%;
  content: ''; display: inline-block;
}
.card .meta .top .status {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-dim); font-weight: 400;
}
.card .meta h3 {
  font-size: calc(32px * var(--read-scale)); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1;
  transition: color .2s;
}
.card:hover h3 { color: var(--accent); }
.card .meta .read {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: calc(13.5px * var(--read-scale)); font-weight: 500;
  margin-top: 4px; letter-spacing: 0.005em;
  transition: gap .2s;
}
.card:hover .meta .read { gap: 14px; }

/* ─── Team grid — shared between Kontakt and O nás so the card unit
   (portrait, name, role, email, phone) looks identical on both pages.
   Card width is fixed at 224px via --team-card-w; pages just drop a
   <TeamGrid> wherever they need it. Wraps to a new row when more cards
   exist than fit in the container. */
.team-grid {
  --team-card-w: 224px;
  --team-gap-x: 28px;
  --team-gap-y: 48px;
  display: flex; flex-wrap: wrap;
  gap: var(--team-gap-y) var(--team-gap-x);
  align-items: flex-start;
}
.team-person {
  flex: 0 0 var(--team-card-w);
  max-width: 100%;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.team-person .portrait {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 8px;
  background: linear-gradient(135deg, var(--g1, oklch(0.30 0.08 305)) 0%, var(--g2, oklch(0.15 0.04 280)) 100%);
  width: 100%;
}
.team-person .portrait::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 30%, rgba(255,255,255,0.08), transparent 70%);
}
.team-person .portrait::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.team-person .portrait .ph {
  position: absolute; inset: 0; display: flex;
  align-items: flex-end; justify-content: center;
  color: rgba(255,255,255,0.55);
}
.team-person .portrait .ph svg { width: 72%; height: auto; opacity: 0.6; display: block; }
.team-person .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.team-person h3 {
  font-size: calc(18px * var(--read-scale));
  line-height: 1.2; letter-spacing: -0.015em; font-weight: 500;
  text-wrap: balance;
}
.team-person .role {
  font-family: var(--font);
  font-size: calc(14px * var(--read-scale)); line-height: 1.25;
  font-style: normal; font-weight: 400;
  color: var(--accent); letter-spacing: -0.005em;
}
.team-person .contact-lines {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.team-person .email,
.team-person .phone {
  font-size: calc(13.5px * var(--read-scale)); color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content; max-width: 100%;
}
.team-person .email svg,
.team-person .phone svg { flex: none; opacity: 0.65; }

/* Section action — pill / bubble link used for "Všechny aktuality", "Všechny projekty" etc.
   Same shape as the mentions reveal button so the CTA vocabulary stays consistent. */
.read-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent;
  color: var(--ink); font-size: calc(13px * var(--read-scale)); font-weight: 500;
  letter-spacing: 0.02em; white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, gap .2s;
}
.read-link:hover {
  background: var(--bg-2); border-color: var(--rule-2);
  color: var(--accent); gap: 12px;
}

/* ─── Footer ──────────────────────────────────────── */
footer { padding: 56px var(--gutter); border-top: 1px solid var(--rule); background: var(--bg-2); }
.foot {
  display: grid; grid-template-columns: 1.6fr 1.2fr 1fr; gap: 48px;
  align-items: stretch;
}
.foot > div { display: flex; flex-direction: column; }
.foot .col-brand { justify-content: space-between; gap: 24px; }
.foot .col-right { gap: 32px; }
.foot h5 { font-size: calc(13px * var(--read-scale)); color: var(--ink-mute); margin-bottom: 14px; letter-spacing: 0.06em; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.foot a { display: block; padding: 4px 0; color: var(--ink-dim); font-size: calc(14px * var(--read-scale)); }
.foot .with-icon { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: calc(14px * var(--read-scale)); padding: 4px 0; }
.foot .with-icon svg { flex: none; opacity: 0.65; transition: opacity .18s; }
.foot a.with-icon:hover { color: var(--accent); }
.foot a.with-icon:hover svg { opacity: 1; }
.foot a:hover { color: var(--accent); }
/* Externí link indikátor ↗ u sociálních sítí v patičce — stejná šipka
   jako u press mentions (.mention-row a.ttl::after na detailu projektu).
   Scope na .col-social → kontaktní detaily (e-mail/telefon jsou <span>,
   ne <a>) ani fakturace ji nedostanou. */
.foot .col-social a.with-icon::after {
  content: ' ↗';
  color: var(--ink-mute);
  font-size: 0.8em;
  letter-spacing: 0;
  transition: color .18s;
}
.foot .col-social a.with-icon:hover::after { color: var(--accent); }
.foot .big {
  font-size: calc(56px * var(--scale)); font-weight: 500; letter-spacing: -0.03em; line-height: 0.95;
}
.foot .big .acc { color: var(--accent); }
/* Future: footer logo can be an <img>/<svg> instead of the wordmark */
.foot .big img, .foot .big svg {
  display: block; height: 56px; width: auto; max-width: 320px;
}
.foot .contact-info { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; max-width: 380px; color: var(--ink-dim); font-size: calc(14px * var(--read-scale)); line-height: 1.6; }
.foot .contact-info a { padding: 0; color: var(--ink-dim); }
.foot .contact-info a:hover { color: var(--accent); }
.foot .contact-info .gap { height: 14px; }
/* Bottom of the brand column: logo at the top, privacy-policy + copyright
   stacked at the very bottom with one blank line between them. The
   col-brand uses `justify-content: space-between` so this group is
   pinned to the bottom regardless of content height in other columns.
   Mobile (≤768px) unwraps col-brand via `display: contents` so the
   logo can stay near the top while .foot-bottom is forced to the very
   end of the footer via `order: 99` (see mobile block below). */
.foot-bottom {
  display: flex; flex-direction: column;
  gap: 18px; /* approx. one blank line @ 12px / 1.5 line-height */
}
.foot-copyright {
  font-size: calc(12px * var(--read-scale)); color: var(--ink-mute); letter-spacing: 0.02em;
}
.foot-privacy {
  display: inline-block; padding: 0 !important;
  font-size: calc(12px * var(--read-scale)); color: var(--ink-dim) !important;
  letter-spacing: 0.02em;
  transition: color .18s;
  align-self: flex-start;
}
.foot-privacy:hover { color: var(--accent) !important; }

/* ─── User-uploaded images: fill their container ────────────────────
   Any <img> placed inside an image slot fills the slot completely,
   regardless of its native aspect ratio (cropped, never letter-boxed). */
.card .img-wrap > img,
.gallery-grid .img > img,
.more-grid .ncard .img-wrap > img,
.ncard .img-wrap > img,
.pperson .portrait > img,
.person .portrait > img,
.team-person .portrait > img,
.stills-grid .still > img,
.article-body .cover-col > img,
.detail-hero > img,
.detail-hero .img > img,
.partner > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; z-index: 3;
}
/* Portrait z týmu — focal point lehce výš, aby tvář při ořezu zůstávala
   v rámu (důležité jen u uploadnutých fotek s jiným poměrem než 3:4). */
.team-person .portrait > img { object-position: center 25%; }

/* ─── Mobile (≤768px) ─────────────────────────────────────────────
   Shared overrides for cross-page components. Page-specific layout
   collapses live in each page's module. Per HANDOFF rules:
   stack 3-col grids to 1-col, shrink heading scale, drop minimum
   heights so things flow naturally. Hover styles stay desktop-only. */
@media (max-width: 768px) {
  /* Page header (h1) */
  .page-header {
    padding: 110px var(--gutter) 24px;
  }
  .page-header h1 {
    font-size: clamp(36px, 10vw, 48px);
    line-height: 0.95;
  }
  .page-header .lead {
    margin-top: 18px;
    font-size: calc(16px * var(--read-scale));
  }

  /* Section head — stack title + filters/read-link */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 60px var(--gutter) 20px;
  }
  /* …except when the action is a single "view all" pill — those stay
     to the right of the heading even on narrow screens. */
  .section-head:has(> .read-link) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .section-head:has(> .read-link) > div { min-width: 0; }
  .section-head:has(> .read-link) > .read-link { flex: none; }
  .section-head:has(> .read-link) h2 {
    font-size: clamp(22px, 6.5vw, 32px);
  }
  .section-head h2 {
    font-size: clamp(28px, 8vw, 36px);
    letter-spacing: -0.025em;
  }
  .section-head .filters {
    gap: 6px;
  }

  /* Featured grid — 2→1 col */
  .featured {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 var(--gutter) 24px;
  }
  .card .meta h3 {
    font-size: clamp(24px, 6.5vw, 30px);
  }

  /* Team — two cards per row on mobile, wrapping naturally to new rows.
     Tightened gap-x to 16px so each half-width card has comfortable
     content width even on a 375px phone. Portrait stays 3/4 (same as
     desktop) so faces aren't unexpectedly cropped wide on mobile. */
  .team-grid {
    --team-gap-x: 16px;
    --team-card-w: calc(50% - 8px);
    --team-gap-y: 36px;
  }
  .team-person {
    flex-basis: calc(50% - 8px);
  }
  .team-person .portrait {
    aspect-ratio: 3/4;
  }

  /* Footer — stack 3 columns */
  footer {
    padding: 48px var(--gutter);
  }
  .foot {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Unwrap .col-brand so its two children (Site big logo + .foot-bottom)
     become grid items themselves. The logo keeps its natural position
     (first), while .foot-bottom is pushed to the very end of the footer
     via order so privacy + copyright sit below billing, contact and
     social columns — per user requirement. */
  .foot .col-brand {
    display: contents;
  }
  .foot-bottom {
    order: 99;
  }
  .foot .col-brand {
    gap: 20px;
  }
  .foot .big {
    font-size: clamp(36px, 9vw, 48px);
  }
  .foot .contact-info {
    max-width: 100%;
  }

  /* Touch targets — bump pill paddings so tap area >= ~40px tall.
     Buttons in main flow get bumped; nav-overlay lang stays via override. */
  .section-head .filters button {
    padding: 11px 16px;
    font-size: 13px;
  }
  .read-link {
    padding: 11px 20px;
    font-size: 13px;
  }
  /* Overlay lang switcher: larger tap area than the header pill */
  .nav-overlay .lang button {
    padding: 10px 18px;
    font-size: 14px;
  }
}
@media (hover: none) {
  .card:hover .img-wrap .ph { transform: none; }
  .card:hover .meta .read { gap: 8px; }
  .read-link:hover { gap: 8px; }
  .ncard:hover .read { gap: 6px; }
}


/* ════════════════════════════════════════════════════════════════════
   12. ─── Site WP image-handling overrides
        Strips lightening / solid-gradient overlays whenever a real
        image is present (.has-image PHP class). Wrappers without
        .has-image keep their pseudo-elements intact for the
        placeholder look.
   ════════════════════════════════════════════════════════════════════ */
.card .img-wrap.has-image::before,
.card .img-wrap.has-image::after,
.news-card .img-wrap.has-image::before,
.news-card .img-wrap.has-image::after,
.ncard .img-wrap.has-image::before,
.ncard .img-wrap.has-image::after,
.more-grid .ncard .img-wrap.has-image::before,
.more-grid .ncard .img-wrap.has-image::after,
.team-person .portrait.has-image::before,
.team-person .portrait.has-image::after,
.poster.has-image::before,
.poster.has-image::after,
.detail-hero .img.has-image::before,
.hc-image.has-image::before,
.gallery-item .img.has-image::before,
.trailer-col .trailer.has-image::before,
.article-body .cover-col.has-image::before {
    background: none;
}

/* The bottom darkening on .detail-hero .img::after and .hc-image::after
   stays in place even with .has-image — h1 titles overlay the image and
   need the contrast to remain readable. */

/* Disable the slow Ken Burns zoom on the homepage hero carousel — the
   transform sat on .hc-image with an 8s transition and bothered users
   who don't want any image modification. */
.hc-image,
.hc-slide.active .hc-image {
    transform: none;
    transition: none;
}

/* News cover on the article-detail page is now click-to-lightbox
   (gallery.js binds [data-poster-src]). Mirror the same affordance the
   gallery items get so users can see it's interactive. */
.article-body .cover-col[data-poster-src] {
    cursor: zoom-in;
}

/* Robust overlay neutralization: when the wrapper carries inline
   background-image: url(...), the lightening ::before / darkening ::after
   pseudo-elements are switched off. Works without the .has-image PHP
   class (which still ships as backup). */
.team-person .portrait[style*="background-image"]::before,
.team-person .portrait[style*="background-image"]::after,
.card .img-wrap[style*="background-image"]::before,
.card .img-wrap[style*="background-image"]::after,
.news-card .img-wrap[style*="background-image"]::before,
.news-card .img-wrap[style*="background-image"]::after,
.ncard .img-wrap[style*="background-image"]::before,
.ncard .img-wrap[style*="background-image"]::after,
.more-grid .ncard .img-wrap[style*="background-image"]::before,
.more-grid .ncard .img-wrap[style*="background-image"]::after,
.poster[style*="background-image"]::before,
.poster[style*="background-image"]::after,
.detail-hero .img[style*="background-image"]::before,
.hc-image[style*="background-image"]::before,
.gallery-item .img[style*="background-image"]::before,
.trailer-col .trailer[style*="background-image"]::before,
.article-body .cover-col[style*="background-image"]::before {
    background: none;
}
/* .detail-hero .img[...]::after a .hc-image[...]::after se NECHÁVAJÍ —
   bottom darkening je nezbytný pro čitelnost h1 přes obrázek. */


/* ════════════════════════════════════════════════════════════════════
   13. ─── Font Awesome icon sizing
        Match the original inline SVG dimensions so the swap doesn't
        reflow surrounding text/labels.
   ════════════════════════════════════════════════════════════════════ */
.team-person .email i,
.team-person .phone i,
.foot .with-icon i,
.company-info .item .with-icon i {
    font-size: 14px;
    opacity: 0.65;
    width: 14px;
    text-align: center;
}
.foot a.with-icon:hover i,
.company-info .item .with-icon:hover i {
    opacity: 1;
}
.social-card i {
    font-size: 22px;
    width: 22px;
    text-align: center;
    transition: transform .2s;
}
.social-card:hover i {
    transform: scale(1.08);
}


/* ════════════════════════════════════════════════════════════════════
   14. ─── Polylang lang switcher pill on <a>
        Polylang renders <a> tags; original design assumed <button>.
        Mirror button defaults exactly: display: inline-block,
        inherit body line-height (1.55) so the pill height matches design.
   ════════════════════════════════════════════════════════════════════ */
.lang a {
    padding: 6px 14px;
    font-size: calc(13px * var(--read-scale));
    font-weight: 500;
    color: var(--ink-mute);
    border-radius: 999px;
    transition: all .2s;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.lang a:hover {
    text-decoration: none;
}
.lang a.on {
    background: var(--ink);
    color: var(--bg);
}
.lang a:not(.on):hover {
    color: var(--ink);
}
.nav-overlay .lang a {
    padding: 10px 18px;
    font-size: 14px;
}


/* ════════════════════════════════════════════════════════════════════
   15. ─── Filter chips on <a> (archive filters)
        Archive templates render chips as <a> (so click navigates to
        the term archive URL). Mirror the .section-head .filters button
        rules for <a> too.
   ════════════════════════════════════════════════════════════════════ */
.section-head .filters a {
    padding: 7px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: calc(13px * var(--read-scale));
    color: var(--ink-dim);
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: all .2s;
}
.section-head .filters a:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.section-head .filters a.on {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
@media (max-width: 768px) {
    .section-head .filters a {
        padding: 11px 16px;
        font-size: 13px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   16. ─── Spacing parity: .page-header + .section-head
        Default .section-head has padding-top: 96px which creates a
        giant gap after .page-header on archive layouts (/news,
        /category/X, /projects). Match Contact's company-block
        padding-top of 36px so the visual spacing reads identically
        across archive types.
   ════════════════════════════════════════════════════════════════════ */
.page-header + .section-head {
    padding-top: 36px;
    padding-bottom: 24px;
}
@media (max-width: 768px) {
    .page-header + .section-head {
        padding-top: 24px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   17. ─── Nav height consistency
        Drop the at-top expanded padding on home, keep 22px
        (solid/scrolled) value everywhere. Mobile: 16px.
   ════════════════════════════════════════════════════════════════════ */
.nav {
    padding-top: 22px;
    padding-bottom: 22px;
}
@media (max-width: 768px) {
    .nav {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   18. ─── Mobile page gutter
        Selektory `html, :root, body` mají vyšší specificitu (0,0,2)
        a !important přebijí i přímé pravidlo s deklarovaným pořadím
        — 14px = polovina dosavadních 28px.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html, :root, body {
        --gutter: 14px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   19. ─── filter.js hide-trick
        .card a .ncard mají bázové display: flex, které samo o sobě
        přebíjí UA pravidlo [hidden]{display:none} (stejná specificita,
        autor CSS vyhrává nad UA). Explicitní override s vyšší
        specificitou (0,2,0) + !important zaručí, že filter.js může
        efektivně skrýt kartu nastavením atributu hidden.
   ════════════════════════════════════════════════════════════════════ */
.card[hidden],
.ncard[hidden] { display: none !important; }