/* ============================================================
   Komíny Plachý — Mobile-first responsive overrides
   Cílí inline styles přes [style*="..."] selectory
   Tři breakpointy: ≤1023px (tablet+mobil) a ≤767px (mobil)
   ============================================================ */

/* === Icon (.icn) shared rule — inline SVG icon sizing ===
   Default 1.1em, currentColor stroke. SVG also has width/height attrs
   so browser sizing works even without this CSS (cache safety). */
.icn {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

/* Topbar contacts (email/pin) — slightly bigger for inline contact strip */
body > div[style*="background:var(--amber); padding:.5rem 0"] .icn {
  width: 1.2em;
  height: 1.2em;
}

/* Phone-CTA circle in hero (38px circle without font-size set on parent) */
section[style*="min-height:92vh"] span[style*="width:38px;height:38px"] .icn {
  width: 22px;
  height: 22px;
}

/* Footer contact circles (36px circles, parent has no font-size) */
footer span[style*="width:36px;height:36px;border-radius:50%"] .icn {
  width: 18px;
  height: 18px;
}

/* Service-card icon badge in top-right corner (42px circle, font-size 1.1rem) */
.service-card div[style*="width:42px;height:42px"] .icn {
  width: 22px;
  height: 22px;
}

/* Workflow step circles (48px, font-size 1.5rem) */
section[style*="background:var(--navy);position:relative;overflow:hidden"] div[style*="width:48px;height:48px"] .icn {
  width: 26px;
  height: 26px;
}

/* Why-us circles (48px, font-size 1.3rem) */
.why-card div[style*="width:48px;height:48px"] .icn {
  width: 24px;
  height: 24px;
}

/* Feature-list check icons (amber, in <span style="color:var(--amber)">) */
li > span[style*="color:var(--amber)"] .icn {
  width: 1.2em;
  height: 1.2em;
}

/* Trust badge star (in white card with 1.25rem font-size on parent span) */
div[style*="position:absolute;bottom:1.5rem;left:1.5rem"] .icn {
  width: 20px;
  height: 20px;
  color: var(--amber);
}

/* Blog card clock — keep inline with date text */
.blog-card div[style*="color:var(--amber)"] .icn {
  width: 1.1em;
  height: 1.1em;
}

/* Hamburger / nav-close — bigger for tap target */
.mobile-toggle .icn, .nav-close .icn {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

/* Header logo home icon */
header a[href="/"] .icn {
  width: 28px;
  height: 28px;
  color: var(--amber);
}

/* Footer brand icon */
footer div[style*="font-size:1.3rem"] .icn {
  width: 22px;
  height: 22px;
  color: var(--amber);
}

/* === HAMBURGER button + mobile sliding nav === */
.mobile-toggle { display: none; }
.mobile-fab { display: none; }
.nav-close { display: none; }

@media (max-width: 1023px) {
  .mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--amber);
    color: var(--navy);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* Hide desktop "Kontaktujte nás" button (already in topbar phone + FAB) */
  header > div.container > a.btn-primary { display: none !important; }

  /* Convert nav to off-canvas slide-in panel */
  header nav#mainnav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 300px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    background: var(--navy) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .25rem !important;
    padding: 5rem 1.25rem 2rem !important;
    transition: right .3s ease !important;
    z-index: 110 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,.35);
    overflow-y: auto;
  }
  body.nav-open header nav#mainnav { right: 0 !important; }
  body.nav-open { overflow: hidden; }

  header nav#mainnav a {
    color: white !important;
    font-size: 1rem !important;
    padding: .85rem 1rem !important;
    border-radius: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  header nav#mainnav a:hover { color: var(--amber) !important; background: rgba(255,255,255,.05); }
  header nav#mainnav a:last-child { border-bottom: 0; }

  /* Close X inside mobile nav */
  .nav-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Backdrop overlay */
  body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 105;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (min-width: 1024px) {
  .nav-close { display: none !important; }
}

/* === GRIDS collapse — tablet: 4-col → 2-col === */
@media (max-width: 1023px) and (min-width: 768px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:1fr 420px"] {
    grid-template-columns: 1fr !important;
  }
}

/* === GRIDS collapse — phone: everything → 1-col === */
@media (max-width: 767px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns:240px 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-row: auto !important;
  }
  /* Tighten gaps on mobile */
  [style*="gap:3.5rem"] { gap: 1.75rem !important; }
  [style*="gap:3rem"] { gap: 1.5rem !important; }
  [style*="gap:2.5rem"] { gap: 1.25rem !important; }
}

/* === HERO mobile === */
@media (max-width: 767px) {
  section[style*="min-height:92vh"] {
    min-height: auto !important;
    padding: 2.5rem 0 2rem !important;
  }
  section[style*="min-height:92vh"] h1 {
    font-size: 2.1rem !important;
    line-height: 1.15 !important;
  }
  /* Hero overlay: more even darkness on mobile */
  section[style*="min-height:92vh"] > div[style*="background:linear-gradient(to right"] {
    background: linear-gradient(rgba(13,34,69,.92), rgba(13,34,69,.85)) !important;
  }
  /* Hero p */
  section[style*="min-height:92vh"] p[style*="font-size:1.05rem"] {
    font-size: .95rem !important;
    margin-bottom: 1.5rem !important;
  }
  /* Hero partner logo strip */
  section[style*="min-height:92vh"] div[style*="border:1px solid rgba(255,255,255,.15)"] {
    gap: .65rem !important;
    padding: .6rem .75rem !important;
  }
  section[style*="min-height:92vh"] div[style*="border:1px solid rgba(255,255,255,.15)"] img {
    height: 22px !important;
  }
}

/* === Quote form card mobile === */
@media (max-width: 767px) {
  div[style*="background:rgba(255,255,255,.97);border-radius:16px;padding:2rem"] {
    padding: 1.5rem !important;
  }
}

/* === SECTION padding mobile === */
@media (max-width: 767px) {
  section[style*="padding:5rem 0"] { padding: 2.5rem 0 !important; }
  section[style*="padding:4rem 0"] { padding: 2.5rem 0 !important; }
  section[style*="padding:3rem 0"] { padding: 2rem 0 !important; }
  footer[style*="padding:4rem 0 0"] { padding: 2.5rem 0 0 !important; }
}

/* === Headings mobile === */
@media (max-width: 767px) {
  .section-title { font-size: 1.55rem !important; line-height: 1.2 !important; }
  h2[style*="font-size:2.5rem"] { font-size: 1.6rem !important; line-height: 1.2 !important; }
  h3[style*="font-size:1.25rem"] { font-size: 1.1rem !important; }
}

/* === TOPBAR mobile - hide address, keep email + socials === */
@media (max-width: 767px) {
  body > div[style*="background:var(--amber); padding:.5rem 0"] {
    padding: .4rem 0 !important;
  }
  body > div[style*="background:var(--amber); padding:.5rem 0"] .container > div:first-child {
    gap: .75rem !important;
    font-size: .72rem !important;
  }
  /* Hide the address span (second span), keep email */
  body > div[style*="background:var(--amber); padding:.5rem 0"] .container > div:first-child > span:nth-child(2) {
    display: none !important;
  }
  body > div[style*="background:var(--amber); padding:.5rem 0"] .container > div:last-child > span:first-child {
    display: none !important;
  }
  body > div[style*="background:var(--amber); padding:.5rem 0"] .container > div:last-child {
    font-size: .72rem !important;
  }
}

/* === CONTAINER padding === */
@media (max-width: 767px) {
  .container { padding: 0 1rem !important; }
}

/* === Stats row mobile === */
@media (max-width: 767px) {
  div[style*="display:flex;gap:2rem;margin-bottom:2rem"] {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }
}

/* === Section "Why us" big image height === */
@media (max-width: 767px) {
  img[style*="height:480px"] { height: 260px !important; }
  img[style*="height:450px"] { height: 280px !important; }
  img[style*="height:460px"] { height: 240px !important; }
  img[style*="height:320px"] { height: 220px !important; }
  img[style*="height:220px"] { height: 180px !important; }
  img[style*="height:200px"] { height: 180px !important; }
  /* Testimonial photo - take full width */
  img[style*="max-width:380px"] { max-width: 100% !important; }
}

/* === Section header right-aligned button → block under heading === */
@media (max-width: 767px) {
  div[style*="display:flex;justify-content:space-between;align-items:flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* === Bento grid: stack rows; large image height shorter === */
@media (max-width: 767px) {
  a[class="proj-card"][style*="grid-row:1/3"] {
    grid-row: auto !important;
  }
  .proj-card img[style*="height:460px"] { height: 240px !important; }
}

/* === CTA banner mobile (Nový komín?) === */
@media (max-width: 767px) {
  div[style*="background:var(--navy);border-radius:14px;padding:1.5rem 2rem"] {
    padding: 1.25rem 1.25rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  div[style*="background:var(--navy);border-radius:14px;padding:1.5rem 2rem"] h3 {
    font-size: 1.05rem !important;
  }
}

/* === FOOTER mobile === */
@media (max-width: 767px) {
  footer[style*="background:var(--navy)"] {
    padding-top: 2rem !important;
  }
  /* Brand+contact card grid */
  footer .container > div[style*="grid-template-columns:1fr 2fr"] {
    margin-bottom: 1.5rem !important;
  }
  footer h4 { font-size: .95rem !important; }
  /* Bottom orange bar: stack lines */
  footer > div[style*="background:var(--amber);padding:.75rem 0"] .container {
    flex-direction: column !important;
    gap: .35rem !important;
    text-align: center !important;
    font-size: .75rem !important;
  }
}

/* === Buttons mobile === */
@media (max-width: 767px) {
  .btn-primary { font-size: .85rem !important; padding: .65rem 1.25rem !important; }
  .btn-circle { width: 30px !important; height: 30px !important; font-size: .8rem !important; }
}

/* === Testimonial cards mobile === */
@media (max-width: 767px) {
  div[style*="background:white;border-radius:14px;padding:1.5rem"][style*="box-shadow:0 2px 12px"] {
    padding: 1.25rem !important;
  }
}

/* === Reduce service card content === */
@media (max-width: 767px) {
  .service-card .service-img { height: 180px !important; }
  .service-card h3 { font-size: 1rem !important; }
}

/* === Working process (dark navy) === */
@media (max-width: 767px) {
  section[style*="background:var(--navy);position:relative;overflow:hidden"] > div[style*="position:absolute;inset:0"] {
    /* keep decorative gradient intact */
  }
  section[style*="background:var(--navy);position:relative;overflow:hidden"] div[style*="background:rgba(255,255,255,.07)"] {
    padding: 1.5rem 1.25rem !important;
  }
}

/* === Floating "phone" FAB (mobile only) === */
@media (max-width: 767px) {
  .mobile-fab {
    position: fixed !important;
    bottom: 18px;
    right: 18px;
    z-index: 90;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--amber);
    color: var(--navy);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(13,34,69,.4);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-fab:active { transform: scale(.95); }
}

/* === Realizace detail: 1fr 2fr article+sidebar → stack === */
@media (max-width: 767px) {
  /* main content image */
  article img, .article img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
  }
}

/* === Ticker: slightly less aggressive on mobile === */
@media (max-width: 767px) {
  div[style*="background:var(--amber);padding:.6rem 0"][style*="overflow:hidden"] span {
    margin: 0 1rem !important;
    font-size: .8rem !important;
  }
}

/* === Eyebrow chip mobile === */
@media (max-width: 767px) {
  .eyebrow { font-size: .68rem !important; padding: 3px 11px !important; }
}

/* === Decorative center "trust badges" position rescue === */
@media (max-width: 767px) {
  /* The "500+ Dokončených zakázek" absolute badge on about photos */
  div[style*="position:absolute;bottom:1rem;left:1rem;background:var(--amber)"] {
    bottom: .5rem !important;
    left: .5rem !important;
    padding: .5rem .85rem !important;
  }
  div[style*="position:absolute;bottom:1rem;left:1rem;background:var(--amber)"] span[style*="font-size:1.75rem"] {
    font-size: 1.25rem !important;
  }
}