/* =====================================================================
   TEMPO GROUP — Mobile overrides (v4)
   Změny v4:
   - Squeeze nav-links (11 položek se nevejde do default 1080px+)
   - Hamburger threshold posunut na 1280px (laptopy <1280 = hamburger)
   ===================================================================== */

/* ============================================================
   v5) NAV-LINKS — větší font + větší logo
   ============================================================ */
@media (min-width: 1081px) {
  /* Nad 1080px se vejdou všechny v komfortní velikosti */
  .nav-links {
    font-size: 0.95rem !important;
    gap: 4px !important;
  }
  .nav-links a {
    padding: 9px 14px !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
  }
  /* Lehce větší logo a název */
  .logo {
    font-size: 1.6rem !important;
  }
  .logo-mark {
    width: 48px !important;
    height: 48px !important;
  }
}
/* Pod 1080px → hamburger (default styles.css už to dělá, mobile.css to potvrdí) */
@media (max-width: 1080px) {
  .nav-links {
    display: none !important;
  }
  .nav-toggle {
    display: inline-flex !important;
  }
}

/* =====================================================================
   TEMPO GROUP — Mobile overrides (v3 baseline pokračuje níže)
   Načten ZA každým per-page inline <style> blokem (link je před </head>,
   ale po inline stylu) → vyhraje při stejné specifitě.

   Cílové breakpointy:
     - 1080px ↓ … hamburger menu, mobilní nav
     - 768px ↓  … iPad portrait + všechny telefony
     - 480px ↓  … iPhone (390px) + Galaxy S (360px)
     - 380px ↓  … nejmenší Androidy
   ===================================================================== */

/* ============================================================
   0) MOBILE NAV (hamburger menu) — KRITICKÝ FIX
   Issue: na stránkách s <tempo-nav> web component byl nav-mobile
   stylovaný jen z assets/styles.css media query. Některé inline page
   styly (sluzby, narii, kontakt, ...) přepisovaly height/inset, takže
   menu mělo height:140px a content stránky prosvítal skrz.
   Fix: agresivní !important na všech property, aby vyhrál absolutně.
   ============================================================ */
@media (max-width: 1080px) {
  .nav-mobile {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport height — nečaruje s URL barem na mobilech */
    background: #0A0A0A !important;
    background-color: #0A0A0A !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    padding: 90px 24px 40px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .nav-mobile:not(.open) {
    display: none !important;
  }
  .nav-mobile.open {
    display: flex !important;
  }
  /* Close button — pojistit umístění */
  .nav-mobile-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 10 !important;
  }
  /* Položky menu — fonty + paddingy konzistentní napříč stránkami */
  .nav-mobile a {
    font-family: var(--font-display) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--text) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    text-decoration: none !important;
  }
  .nav-mobile a.active {
    color: var(--yellow) !important;
  }
  .nav-mobile a:last-child {
    border-bottom: 0 !important;
  }
}
@media (max-width: 480px) {
  .nav-mobile {
    padding: 80px 18px 32px !important;
  }
  .nav-mobile a {
    font-size: 1.8rem !important;
    padding: 14px 0 !important;
  }
}

/* ============================================================
   1) GLOBÁLNÍ — všechno pod 768px
   ============================================================ */
@media (max-width: 768px) {

  :root {
    --gutter: 18px;
  }

  /* ---- Stickery (dekorativní badges) ----
     Na desktopu rotují a sedí v rozích. Na mobilu pravidelně překrývají
     hero/eyebrow text. Globálně schovat všechny kategorie stickerů. */
  .sticker.page-sticker,
  .qa-hero-sticker,
  .hero-sticker,
  .hero-sticker-1,
  .hero-sticker-2,
  .page-sticker {
    display: none !important;
  }

  /* ---- Hero — stop full-viewport behavior ---- */
  .hero {
    min-height: auto;
  }

  /* ---- Hero inner — vynutit horizontální padding ---- */
  .hero-inner {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ---- Hero h1 — pojistka kdyby selhal padding na inner ---- */
  .hero h1,
  .hero-title {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ---- Container side padding pojistka ---- */
  .container,
  .case-container,
  .pc-container,
  .kt-container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ---- Stat numbers — cap velikost na mobilu ---- */
  .stat-num {
    font-size: clamp(3rem, 14vw, 4.6rem);
  }

  /* ---- Eyebrow letter-spacing trochu užší ---- */
  .eyebrow,
  .qa-hero-eyebrow,
  .kt-eyebrow {
    letter-spacing: 0.14em;
    font-size: 0.7rem;
  }

  /* ---- Footer mega text ---- */
  .footer-mega {
    font-size: clamp(3.5rem, 22vw, 7rem);
    margin-bottom: 48px;
  }

  /* ---- Page-grain a page-glow utlumit na mobilu (méně vizuálního šumu) ---- */
  .page-grain { opacity: 0.25 !important; }
  .page-glow {
    background:
      radial-gradient(ellipse at 20% 30%, rgba(255, 210, 0, 0.06) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 70%, rgba(255, 210, 0, 0.04) 0%, transparent 55%) !important;
  }
}

/* ============================================================
   2) HOME PHILOSOPHY — úvozovky (v2)
   Na desktopu jsou .philosophy-mark.tr / .bl absolute v rozích
   sekce. Na mobilu absolute pozicování vypadá rozhozeně (uvozovky
   daleko od textu nebo se přebíjí), proto je předěláme na inline
   bookend: otevírací uvozovka NAD citátem, zavírací POD attribuce.
   ============================================================ */
@media (max-width: 768px) {
  .philosophy {
    min-height: auto !important;
    height: auto !important;
    padding: 60px var(--gutter) 60px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .philosophy-mark {
    position: static !important;
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    font-size: clamp(80px, 22vw, 110px) !important;
    line-height: 0.7 !important;
    opacity: 0.8;
    color: var(--yellow) !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }
  .philosophy-mark.tr {
    text-align: left !important;
    margin: 0 0 8px 0 !important;
    order: -1 !important; /* mark TR vždy první nahoře */
  }
  .philosophy-mark.bl {
    text-align: right !important;
    margin: 8px 0 0 0 !important;
    order: 99 !important; /* mark BL vždy na konci dole */
  }
  .philosophy-inner,
  .philosophy .container {
    order: 0 !important;
  }
}
@media (max-width: 480px) {
  .philosophy {
    /* Větší bottom padding aby spodní zavírací uvozovka „"" nebyla ořezaná */
    padding: 48px var(--gutter) 80px !important;
  }
  .philosophy-mark {
    font-size: clamp(64px, 18vw, 88px) !important;
  }
}

/* ============================================================
   3) TELEFONY — vše pod 480px
   ============================================================ */
@media (max-width: 480px) {

  :root {
    --gutter: 16px;
  }

  /* ---- Hero typografie ---- */
  .hero-title,
  .hero h1,
  .kt-hero h1,
  .qa-hero h1 {
    font-size: clamp(2.2rem, 9.5vw, 3.4rem);
    line-height: 0.98;
  }

  /* Subline / intro */
  .hero-sub,
  .kt-subline p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* ---- Stat numbers ---- */
  .stat-num {
    font-size: clamp(2.6rem, 12vw, 3.8rem);
  }

  /* ---- Buttons full-width ---- */
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Buttons vertical-center hardening ---- */
  .btn,
  .pc-cta,
  .kt-submit,
  .form-submit {
    line-height: 1.2 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ---- QA hero ---- */
  .qa-hero-eyebrow {
    margin-bottom: 18px;
  }
}

/* ============================================================
   4) NEJMENŠÍ — 380px ↓
   ============================================================ */
@media (max-width: 380px) {

  :root {
    --gutter: 14px;
  }

  .hero-title,
  .hero h1,
  .kt-hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .stat-num {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }

  .nav .logo {
    font-size: 1.2rem;
  }
  .nav .logo-mark {
    width: 36px;
    height: 36px;
  }
}

/* ============================================================
   5) PER-PAGE FIXES
   ============================================================ */

/* ---- HOME (index.html) — hero canvas + stats ---- */
@media (max-width: 768px) {
  .hero-canvas {
    opacity: 0.5;
  }

  .stats-block {
    gap: 16px 0;
  }
  .stat {
    padding: 18px 0;
  }
  .stat:nth-child(3),
  .stat:nth-child(4) {
    padding-top: 18px;
  }

  .hero-coords,
  .hero-scroll {
    display: none;
  }
}

/* ---- CASE STUDIES ---- */
@media (max-width: 768px) {
  .hero {
    min-height: 56vh;
    max-height: none;
  }
  .hero-inner {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .hero h1 {
    max-width: 100%;
  }
}

/* ---- KONTAKT ---- */
@media (max-width: 480px) {
  .kt-form-card {
    padding: 28px 22px;
    border-radius: 18px;
  }
  .kt-submit {
    padding: 16px 22px;
    font-size: 0.95rem;
  }
  .kt-info-block {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .kt-info-content {
    padding-left: 0;
  }
  .kt-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

/* ---- QA — sticky tabs ---- */
@media (max-width: 768px) {
  .qa-toc {
    top: 64px;
  }
  .qa-toc-inner {
    padding: 12px 0;
  }
  .qa-chip {
    padding: 7px 12px;
    font-size: 0.78rem;
  }
}

/* ---- CENOVÁ KALKULAČKA ---- */
@media (max-width: 480px) {
  .pc-hero {
    margin-bottom: 24px;
  }
  .pc-root {
    padding: 24px 0 48px;
  }
}

/* ---- PROJEKTY rozcestník ---- */
@media (max-width: 480px) {
  .tiles {
    gap: 12px;
  }
}

/* ---- SLUŽBY ---- */
@media (max-width: 480px) {
  .section-inner {
    padding: 1.2rem;
  }
  .section-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }
}

/* ============================================================
   6) FORM FIELD HEIGHT — větší tap zone pro inputs
   ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px; /* iOS nebude zoomovat při focusu */
  }
}

/* ============================================================
   7) FLOATING CTA
   ============================================================ */
@media (max-width: 768px) {
  .floating-cta .btn {
    padding: 14px 24px;
    font-size: 0.95rem;
    box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.7);
  }
}

/* ============================================================
   8) DODATEČNÉ DOLAĎOVÁKY (v2)
   ============================================================ */

/* ---- Project cards (home) — image area minimum height ---- */
@media (max-width: 480px) {
  .project-card-img,
  .project-card-image {
    min-height: 240px;
  }
}

/* ---- Tlačítkové „pill" tlačítka — symetrický padding (text vertikální střed) ---- */
@media (max-width: 768px) {
  .btn,
  .pc-cta,
  .kt-submit,
  button[type="submit"] {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* ---- FAQ accordion items — padding pro lepší tap ---- */
@media (max-width: 768px) {
  .faq-q,
  .qa-q,
  .faq-item button,
  .qa-item button {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* ---- Service rows na home (.svc-row) — pojistit, že arrow je vpravo ---- */
@media (max-width: 720px) {
  .svc-row {
    grid-template-columns: 50px 1fr 44px !important;
  }
  .svc-row .svc-arrow {
    justify-self: end;
  }
}

/* =====================================================================
   ============== v3 UPDATES (issues #1–#5) ==============
   ===================================================================== */

/* ============================================================
   v3-A) SLUŽBY — REVERTED (mobile JS-snap zachován)
   User chce na sluzby zachovat JS-snap mechaniku jako na desktop.
   JS má touch handlery (touchstart + touchmove), takže swipe funguje
   nativně. Necháme defaultní inline CSS z page-sluzby.php.
   Globální body overflow override potřebuje vyloučit i Sluzby.
   ============================================================ */
@media (max-width: 1080px) {
  /* Povolit scroll na html/body kromě stránek s vlastní fullscreen mechanikou */
  body:not(.tg-page-narii):not(.tg-page-sluzby),
  html:not(:has(body.tg-page-narii)):not(:has(body.tg-page-sluzby)) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }
}

/* ============================================================
   v3-B) NARII (narii.html) — REVERT (mobile = fullscreen jako desktop)
   User chce, aby NARII mobile fungoval jako desktop: fullscreen viewport,
   JS timeline auto-přepíná scenes. Žádný scroll. Necháme defaultní
   chování z page-narii.php inline <style>.

   Sluzby (kde je .sections-track) si naopak NESCHOVÁVÁ scrollování — ta
   má normal vertical scroll pro mobilu.
   ============================================================ */
@media (max-width: 1080px) {
  /* NARII zachovat default fullscreen + auto-play. body{overflow:hidden;height:100%}
     je z page-narii.php inline stylu — nepřepisujeme.
     Scene a #bgLayer position absolute inset 0 — nepřepisujeme.
     Skip / progress UI — schovat (mobile-friendly clean) */
  body.tg-page-narii {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
  }
  body.tg-page-narii .scene {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 80px var(--gutter) 40px !important; /* prostor pro nav nahoře */
  }
  body.tg-page-narii #bgLayer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }
  /* Skip / progress UI — schovat */
  /* Skip / progress UI — schovat (mobile clean). REVERT force-opacity:1 pro NARII —
     JS timeline má přepínat opacity scenes a jejich children, my to nepřepíšeme. */
  body.tg-page-narii .narii-progress,
  body.tg-page-narii .narii-skip,
  body.tg-page-narii [class*="scene-nav"],
  body.tg-page-narii [class*="scene-dots"] {
    display: none !important;
  }
}

/* ============================================================
   v3-C) PHOTO-QUOTE (case studies) — OBLIČEJ NA MOBILU
   Problém: .photo-quote-grid má `background-position: 50% 50%` (center).
   Fotky jsou zarámované tak, že obličej je v horní třetině; na mobilu
   se centrem objeví laptop / ruce, ne obličej.
   Fix: posunout pozici nahoru.
   ============================================================ */
@media (max-width: 768px) {
  /* === CASE STUDIES — fotky na mobilu vidět CELÉ (žádné cropping obličejů) ===
     Strategie: contain místo cover. Image se přizpůsobí container, nic se neořízne,
     jen se případně objeví letterbox (tmavý okraj nahoře/dole). Lepší než vidět
     jen úzký pruh nebo cropnutý obličej. */

  /* Photo-quote sections (.photo-quote, .photo-quote-grid) — celý obraz */
  .photo-quote-grid,
  .photo-quote {
    aspect-ratio: 16 / 9 !important;
    min-height: 220px !important;
    max-height: 55vh !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: var(--bg-1) !important;
  }

  /* Hero / header images na case studies (background-image variants) */
  body[class*="tg-page-case-"] .hero,
  body[class*="tg-page-case-"] .hero[data-bg],
  body[class*="tg-page-case-"] .case-hero,
  body[class*="tg-page-case-"] [class*="hero-bg"],
  body[class*="tg-page-case-"] [class*="header-img"] {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: var(--bg-1) !important;
    min-height: 240px !important;
    max-height: 55vh !important;
  }

  /* IMG tagy v case studies — object-fit contain, ať se vejdou */
  body[class*="tg-page-case-"] img.case-img,
  body[class*="tg-page-case-"] img.hero-img,
  body[class*="tg-page-case-"] img[class*="photo"],
  body[class*="tg-page-case-"] img[class*="header"],
  body[class*="tg-page-case-"] .intro img,
  body[class*="tg-page-case-"] .case-photo img,
  body[class*="tg-page-case-"] .case-image img,
  body[class*="tg-page-case-"] figure img {
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100% !important;
    max-height: 55vh !important;
    width: 100% !important;
    height: auto !important;
    background: var(--bg-1);
  }
  /* Případné inline overlay obrázky uvnitř case-* hero sekce */
  .hero[data-bg],
  .case-hero,
  .cs-hero {
    background-position: 50% 30% !important;
  }
  /* Obecný case header obrázek (img tag) — object-position nahoru */
  .case-header-img,
  .hero img {
    object-position: 50% 25% !important;
  }
}

/* ============================================================
   v3-D) HOME HERO — VĚTŠÍ A PLNĚJŠÍ NA MOBILU
   User chce, aby hero text "Digitál, který prodává..." byl velký
   a hero zabíral skoro celý úvodní viewport.
   ============================================================ */
@media (max-width: 768px) {
  /* Cílíme jen na home hero — main#top > .hero */
  main#top > .hero {
    min-height: 88vh !important;
    min-height: 88dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 24px 0 60px !important;
  }
  main#top .hero-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    grid-template-columns: 1fr !important;
    height: 100%;
  }
  main#top .hero-title {
    font-size: clamp(4rem, 17vw, 6.4rem) !important;
    line-height: 0.9 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.05em !important;
  }
  main#top .hero-sub {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    margin-top: 18px !important;
  }
  main#top .hero-actions {
    margin-top: 28px !important;
  }
}
@media (max-width: 480px) {
  main#top > .hero {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  main#top .hero-title {
    /* Slovo "prodává." je dlouhé s diakritikou — line-height 0.88 bylo moc tight,
       vrchní/spodní text se křížil. 0.95 dá vzduch. */
    font-size: clamp(3.2rem, 16vw, 5rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
  }
}
@media (max-width: 380px) {
  main#top .hero-title {
    font-size: clamp(2.8rem, 15vw, 4rem) !important;
  }
}

/* ============================================================
   v3-E) BUTTONS — text alignment napříč webem
   Problém: některá tlačítka mají text mimo vertikální střed (paddingy
   nesymetrické, line-height vysoké, nebo flex bez align-items).
   Fix: hardcode normalizace všech button variants.
   ============================================================ */
@media (max-width: 768px) {
  .btn,
  .pc-cta,
  .pc-option,
  .kt-submit,
  .form-submit,
  .cta-btn,
  button[type="submit"],
  button.btn,
  a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.25 !important;
    text-align: center !important;
    /* symetrické paddingy — text je ve středu vertikálně */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    min-height: 48px !important; /* iOS HIG tap target */
    box-sizing: border-box !important;
  }
  /* Větší primary buttons (hero, kontakt submit) */
  .btn-primary,
  .kt-submit,
  .form-submit {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    min-height: 54px !important;
    font-weight: 600 !important;
  }
  /* Pro buttony s textem na 2 řádky — line-height tighter */
  .btn span {
    line-height: 1.2 !important;
  }
  /* Arrow ikona uvnitř buttonu — zarovnání baseline */
  .btn svg,
  .btn-arrow,
  .btn .btn-arrow svg {
    flex-shrink: 0 !important;
    align-self: center !important;
  }
}

/* ============================================================
   v3-F) DETAILY
   ============================================================ */

/* CTA card v patičce home/sluzby — full width na mobile */
@media (max-width: 480px) {
  .cta-card,
  .end-cta,
  [class*="cta-bottom"] {
    padding: 28px 22px !important;
    border-radius: 20px !important;
  }
  .cta-card .btn,
  .end-cta .btn {
    width: 100% !important;
  }
}

/* Tempo mega text v patičce — někdy nezalomený, vyteče za viewport */
@media (max-width: 768px) {
  .footer-mega {
    overflow: hidden !important;
    text-overflow: clip !important;
    word-break: break-word !important;
  }
}

/* =====================================================================
   ============== v6 ROLOVÁ 2 — UI POLISH ==============
   ===================================================================== */

/* === Klientské stránky mobile — schovat problémové foto sekce ===
   User explicitně řekl: "fotky se ořezávají v PPC pro autoškolu a ostatních
   projektech klidně je dej pryč". Odstraňujeme bg-image jen na mobile,
   text v sekcích zůstává. Plus hero: zachováme ale s contain. */
@media (max-width: 768px) {
  /* Foto sekce s textem (.photo-quote, .photo-disclaimer, .photo-content)
     — schovat bg image, nech jen text. */
  body[class*="tg-page-case-"] .photo-quote,
  body[class*="tg-page-case-"] .photo-disclaimer,
  body[class*="tg-page-case-"] .photo-content,
  body[class*="tg-page-case-"] section[class*="photo-"]:not(.photo-quote-grid) {
    background-image: none !important;
    background-color: var(--bg-1) !important;
    aspect-ratio: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: clamp(40px, 6vw, 80px) var(--gutter) !important;
  }

  /* Hero img na case studies — větší aspect aby foto bylo viditelné, ne malinké */
  body[class*="tg-page-case-"] .hero,
  body[class*="tg-page-case-"] .hero[data-bg] {
    min-height: 320px !important;
    aspect-ratio: 4 / 3 !important;
    background-position: center 30% !important;
  }
  body[class*="tg-page-case-"] .hero-inner {
    padding-top: 100px !important;
    padding-bottom: 24px !important;
  }
  body[class*="tg-page-case-"] .hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.4rem) !important;
    line-height: 1 !important;
  }

  /* Medailonek (.photo-quote-grid) — block s jménem (.photo-quote-name) NESMÍ
     překrývat foto. Přemístím ho NAD foto, ne na něj absolutně. */
  body[class*="tg-page-case-"] .photo-quote-grid {
    aspect-ratio: auto !important;
    min-height: auto !important;
    max-height: none !important;
    background-image: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
  }
  /* Vrátíme foto jako separátní img/div místo background — show below name */
  body[class*="tg-page-case-"] .photo-quote-name {
    position: static !important;
    margin: 0 !important;
    padding: 16px var(--gutter) !important;
    width: 100% !important;
    background: var(--bg-1) !important;
    border-radius: 0 !important;
    order: 0;
  }
  body[class*="tg-page-case-"] .photo-quote-grid .case-container {
    padding: 0 var(--gutter) 24px !important;
    order: 2;
  }
  /* Pokud má .photo-quote-grid bg-image, zobrazíme ji jako pseudo image div uvnitř */
  body[class*="tg-page-case-"] .photo-quote-grid::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-image: inherit;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--bg-1);
    order: 1;
  }
}

/* =====================================================================
   ============== v7 ROLOVÁ 3 — case study foto sekce na mobile ==============
   ===================================================================== */

/* Po vyhození bg-image z .photo-quote / .photo-disclaimer (1.21) zbyl text
   "viset" v prázdném dark prostoru. Předěláme to na typografický pull-quote
   box — žlutý border-left + bg-1 wrapper + tag-style nametag + větší serif
   italic citát. Vypadá to jako "overlay z PC verze", jen jako standalone
   block. NESAHÁM žádný text — pouze CSS layout. */
@media (max-width: 768px) {

  /* === Photo-quote: outer sekce (page bg + padding kolem boxu) === */
  body[class*="tg-page-case-"] .photo-quote {
    background-color: var(--bg) !important;
    background-image: none !important;
    padding: clamp(36px, 7vw, 64px) var(--gutter) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
  body[class*="tg-page-case-"] .photo-quote::before,
  body[class*="tg-page-case-"] .photo-quote::after {
    display: none !important;
  }

  /* Inner case-container — to bude vlastní pull-quote box */
  body[class*="tg-page-case-"] .photo-quote .case-container {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--yellow) !important;
    border-radius: 6px !important;
    padding: clamp(24px, 6vw, 40px) clamp(20px, 5vw, 32px) !important;
    box-shadow:
      0 18px 40px -16px rgba(0, 0, 0, 0.6),
      0 0 32px -10px rgba(255, 210, 0, 0.10) !important;
    max-width: 100% !important;
  }

  /* Reset photo-quote-grid (1.21 ::after image) — už nepotřebujeme image slot */
  body[class*="tg-page-case-"] .photo-quote-grid {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    display: block !important;
  }
  body[class*="tg-page-case-"] .photo-quote-grid::after {
    display: none !important;
    content: none !important;
  }
  body[class*="tg-page-case-"] .photo-quote-grid .case-container {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Nametag — uvnitř boxu nahoře, jako malý tag, ne overlay */
  body[class*="tg-page-case-"] .photo-quote-name {
    position: static !important;
    display: inline-flex !important;
    flex-direction: column !important;
    margin: 0 0 18px !important;
    padding: 8px 14px !important;
    width: auto !important;
    background: rgba(255, 210, 0, 0.06) !important;
    border: 1px solid rgba(255, 210, 0, 0.22) !important;
    border-left: 2px solid var(--yellow) !important;
    border-radius: 4px !important;
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    color: var(--text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  body[class*="tg-page-case-"] .photo-quote-name span {
    color: var(--muted) !important;
    font-size: 0.78rem !important;
    margin-top: 2px !important;
    font-style: italic !important;
  }

  /* Blockquote — větší typo, decentní žlutá uvozovka jako akcent */
  body[class*="tg-page-case-"] .photo-quote blockquote {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: clamp(1.2rem, 4.4vw, 1.55rem) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.005em !important;
    color: var(--text) !important;
    text-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
    position: relative !important;
    padding: 0 !important;
  }
  body[class*="tg-page-case-"] .photo-quote blockquote::before {
    content: '\201E';                /* „ — opening low quote */
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2.6rem;
    line-height: 0.6;
    color: var(--yellow);
    margin-bottom: 8px;
    opacity: 0.85;
  }

  /* === Photo-disclaimer: stejná pull-quote DNA === */
  body[class*="tg-page-case-"] .photo-disclaimer {
    background-color: var(--bg) !important;
    background-image: none !important;
    padding: clamp(36px, 7vw, 64px) var(--gutter) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
  body[class*="tg-page-case-"] .photo-disclaimer::before,
  body[class*="tg-page-case-"] .photo-disclaimer::after {
    display: none !important;
  }
  body[class*="tg-page-case-"] .photo-disclaimer .case-container {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--yellow) !important;
    border-radius: 6px !important;
    padding: clamp(24px, 6vw, 40px) clamp(20px, 5vw, 32px) !important;
    box-shadow:
      0 18px 40px -16px rgba(0, 0, 0, 0.6),
      0 0 32px -10px rgba(255, 210, 0, 0.10) !important;
    max-width: 100% !important;
  }
  body[class*="tg-page-case-"] .disclaimer-overlay {
    padding: 0 !important;
  }
  body[class*="tg-page-case-"] .disclaimer-row {
    gap: 0 !important;
    max-width: none !important;
    align-items: flex-start !important;
  }
  /* Vnitřní žlutý bar je redundantní — outer border-left už dělá akcent */
  body[class*="tg-page-case-"] .disclaimer-row .bar {
    display: none !important;
  }
  body[class*="tg-page-case-"] .disclaimer-row p {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: clamp(1rem, 3.6vw, 1.18rem) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
    color: var(--text) !important;
    margin: 0 !important;
  }

  /* === Photo-content (HET, samson, …) — stejné ošetření === */
  body[class*="tg-page-case-"] .photo-content {
    background-color: var(--bg) !important;
    background-image: none !important;
    padding: clamp(36px, 7vw, 64px) var(--gutter) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
  body[class*="tg-page-case-"] .photo-content::before,
  body[class*="tg-page-case-"] .photo-content::after {
    display: none !important;
  }
  body[class*="tg-page-case-"] .photo-content .case-container {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--yellow) !important;
    border-radius: 6px !important;
    padding: clamp(24px, 6vw, 40px) clamp(20px, 5vw, 32px) !important;
    box-shadow:
      0 18px 40px -16px rgba(0, 0, 0, 0.6),
      0 0 32px -10px rgba(255, 210, 0, 0.10) !important;
    max-width: 100% !important;
  }
}

/* === Buttony hranaté → kulaté (force border-radius pillule) === */
@media (max-width: 1080px) {
  /* End-CTA, kontakt CTA, router CTA, generic .btn — všechny mají být pillule */
  .end-cta,
  .router-cta,
  .cta-pill,
  .btn,
  .pd-cta a.btn,
  .sl-final a.btn,
  .pd-mid-cta a.btn {
    border-radius: 999px !important;
    overflow: hidden !important;
  }
  /* End-CTA na o-nas, qa, tym — block forma s padding */
  .end-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 16px 26px !important;
    border-radius: 999px !important;
    background: var(--yellow) !important;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    box-shadow: 0 0 18px rgba(255, 210, 0, 0.18) !important;
  }
  .end-cta:hover {
    background: #fff !important;
    color: #0A0A0A !important;
  }
}

/* === Žluté stickery nalétávající do menu/animace — posunout dolů === */
@media (max-width: 1080px) {
  /* Page sticker (kalkulačka, o-nas, qa, soMe atd.) — pod nav nesmí ležet */
  .page-sticker,
  .pc-sticker,
  .sticker.page-sticker {
    top: 100px !important; /* default je často 24px nebo 0 */
  }
  /* Konkrétní per-page stickery z různých stránek */
  .o-nas .page-sticker,
  .pc-page .page-sticker {
    top: 90px !important;
    margin-top: 20px !important;
  }
  /* Tempo group SoMe sticker nalétávající do telefonu animace */
  body.tg-page-case-tempo-group-some .sticker,
  body.tg-page-case-tempo-group-some .page-sticker,
  body[class*="tg-page-case-"] [class*="phone-mockup"] + .sticker {
    top: 90px !important;
  }
}
@media (max-width: 768px) {
  /* Defaultně schovat dekorativní stickery na malých mobilech — už máme, jistota */
  .sticker.hero-sticker,
  .hero-sticker,
  .page-sticker:not(.always-show) {
    display: none !important;
  }
}

/* === O nás spodní CTA sekce — odstranit viditelný předěl bg === */
@media (max-width: 1080px) {
  body.tg-page-o-nas .end-cta-section,
  body.tg-page-o-nas [class*="end-cta-wrap"],
  body.tg-page-o-nas [class*="cta-section"] {
    background: transparent !important;
    border-top: 1px solid var(--line) !important;
  }
}
/* Stejné na desktopu */
body.tg-page-o-nas .end-cta-section,
body.tg-page-o-nas [class*="end-cta-wrap"] {
  background: transparent !important;
}

/* === Tým mobile animace cards — reveal on scroll === */
@media (max-width: 1080px) {
  body.tg-page-tym .team-card,
  body.tg-page-tym [class*="member"],
  body.tg-page-tym .person {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(.2,.8,.2,1),
                transform 0.7s cubic-bezier(.2,.8,.2,1);
  }
  body.tg-page-tym .team-card.visible,
  body.tg-page-tym [class*="member"].visible,
  body.tg-page-tym .person.visible,
  body.tg-page-tym .reveal.visible {
    opacity: 1;
    transform: none;
  }
}

/* === Form text zarovnání (kontakt spodní) === */
@media (max-width: 1080px) {
  .kt-form-note,
  .kt-info-list,
  .kt-bottom-text {
    text-align: left !important;
  }
}
.kt-form-note {
  text-align: left !important;
}

/* === Mockup tablet text — větší font na case studies === */
@media (max-width: 1080px) {
  body[class*="tg-page-case-"] .tablet-mockup-text,
  body[class*="tg-page-case-"] [class*="tablet"] [class*="text"],
  body[class*="tg-page-case-"] [class*="tablet"] p,
  body[class*="tg-page-case-"] [class*="mockup"] p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
}