/* ===================================================================
   STRECHTOP — responzívne pravidlá
   Bootstrap breakpointy: xxl 1400 / xl 1200 / lg 992 / md 768 / sm 576
   =================================================================== */

/* ---------- < xl (1200px): menu sa zbalí do offcanvas panela (ako bear/profi) ---------- */
@media (max-width: 1199.98px) {
  .hero h1 {
    font-size: 2.8rem;
  }
  .hero-feats {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.35rem;
  }
  .hero-feats li {
    padding: 0;
  }
  .hero-feats li + li::before {
    display: none;
  }
  /* hlavička: obrysový telefón + hamburger, menu na celú obrazovku (DIZAJN.md › Hlavička) */
  .nav-links,
  .header-actions {
    display: none;
  }
  .site-header .btn-phone-header {
    display: inline-flex;
    margin-left: auto;
  }
  .mob-burger {
    display: flex;
    margin-left: 8px;
  }
  .mob-menu {
    display: block;
  }
  .stat b {
    font-size: 2.2rem;
  }
  /* mozaika: 3 stĺpce – veľké 2×2 ostávajú, široké karty sa menia na malé
     (vzor: [2×2 + 2 malé][3 malé][2×2 + 3 malé][3 malé] = rovné zakončenie) */
  .mosaic {
    grid-template-columns: repeat(3, 1fr);
  }
  .mosaic .gal-link:nth-child(12n + 11),
  .mosaic .gal-link:nth-child(12n + 12) {
    grid-column: auto;
  }
}

/* ---------- < lg (992px) ---------- */
@media (max-width: 991.98px) {
  .why-photo {
    position: relative;
    width: 100%;
    height: 320px;
  }
  .why-text {
    padding: 64px 0;
  }
  /* badge nesmie pretekať mimo obrázok, keď stĺpce spadnú pod seba (rovnako ako bear) */
  .about-badge {
    left: 0;
  }
  .page-hero-symbol {
    width: 200px;
    opacity: 0.05;
    right: 0;
  }
  .sec-head h2,
  .cta-section h2 {
    font-size: 1.9rem;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .page-hero h1,
  .page-hero.thanks-hero h1 {
    font-size: 2rem;
  }
  .faq-sidebar-sticky {
    position: static;
    margin-bottom: 2rem;
  }
  /* proces: pod lg dva kroky na riadok, šípky preč */
  .process-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .process-arrow-circle {
    display: none !important;
  }
  .faq-panel-inner {
    padding-left: 1.4rem;
  }
  /* legacy grid podstránok (prerobia sa na bootstrap pri redizajne) */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .g-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stat b {
    font-size: 2rem;
  }
  .stat {
    padding: 22px 20px;
  }
  /* náčrt krovu ako pozadie celej sekcie (text tečie cez neho) */
  .focus-art {
    width: 130%;
    max-width: none;
    left: -15%;
    opacity: 0.22; /* nižšie než na PC – text tu tečie cez náčrt */
  }
  /* medveď: stĺpce sa zalomili pod seba, tak ho roztiahnuť na pozadie hornej časti sekcie */
  .about-art {
    width: 115%;
    max-width: none;
    right: -28%;
    top: 60px;
    opacity: 0.1;
  }
}

/* ---------- < md (768px) ---------- */
@media (max-width: 767.98px) {
  .more-list {
    gap: 26px;
  }
  .more-list li {
    padding-left: 30px;
  }
  .breadcrumb-nav {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  section {
    padding: 60px 0;
  }
  .process-section {
    padding: 60px 0;
  }

  /* hero */
  .hero {
    padding: 60px 0;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .sec-head h2,
  .cta-section h2 {
    font-size: 1.7rem;
  }
  .hero-photo::after {
    background: linear-gradient(
      180deg,
      rgba(26, 30, 46, 0.9) 0%,
      rgba(26, 30, 46, 0.78) 55%,
      rgba(26, 30, 46, 0.85) 100%
    );
  }
  .hero-cta .btn {
    flex: 1 1 100%;
  }
  .hero-feats {
    margin-top: 1rem;
  }

  .about-photo {
    margin-top: 60px;
  }

  /* interiérové stránky */
  .page-hero-inner {
    padding: 2rem 0;
  }
  .page-hero h1,
  .page-hero.thanks-hero h1 {
    font-size: 1.75rem;
  }
  .page-hero .hero-sub {
    font-size: 0.875rem;
  }
  .page-hero.has-photo {
    padding: 52px 0;
  }

  /* formuláre + kontakt karty (jednotné s bear/profi) */
  .form-card,
  .info-card {
    padding: 1.25rem;
  }
  label {
    font-size: 0.72rem;
  }
  input,
  textarea,
  select {
    padding: 0.7rem 0.85rem;
    font-size: 16px; /* iOS pri menšom písme zoomuje do poľa (ako profi SK) */
  }
  .field {
    margin-bottom: 0.75rem;
  }
  textarea {
    min-height: 80px;
  }
  .lead-form button[type='submit'] {
    padding: 0.85rem;
    font-size: 0.9rem;
  }
  .form-note {
    font-size: 0.7rem;
  }

  /* FAQ (štýl bear/profi) */
  .faq-wrap {
    padding: 60px 0;
  }
  /* CTA pás a pätička (DIZAJN.md) */
  .cta-section {
    padding: 60px 0;
  }
  .cta-section p {
    margin-bottom: 1.5rem;
  }
  .btn-cta-white,
  .btn-cta-outline {
    padding: 0.7rem 1.5rem;
    font-size: 0.85rem;
  }
  .footer-bottom {
    margin-top: 40px;
    padding: 14px 0;
  }
  /* tlačidlá 404 a chybových stránok (ako .btn-red/.btn-hero-muted na profi SK) */
  .nf-btns .btn,
  .nf-btns .btn-hero-muted {
    height: 44px;
    font-size: 0.85rem;
    padding: 0 20px;
  }
  .faq-btn {
    padding: 0.9rem 1rem;
    gap: 0.75rem;
  }
  .faq-question {
    font-size: 0.85rem;
  }
  .faq-panel-inner {
    padding: 0 1rem 1rem;
    font-size: 0.82rem;
  }
  .faq-num {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
  }
  .faq-icon {
    width: 26px;
    height: 26px;
  }
  /* proces (štýl profi SK) */
  .process-steps {
    grid-template-columns: 1fr;
  }
  .process-step {
    height: auto;
    padding: 1.5rem;
  }
  .process-box {
    padding: 60px 24px 56px;
  }
  .facts {
    grid-template-columns: 1fr;
  }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .detail-aside {
    position: static;
  }
  .svc {
    padding: 24px 22px;
  }

  /* mozaika: 2 stĺpce – široké karty späť na plnú šírku riadku */
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .mosaic .gal-link:nth-child(12n + 11),
  .mosaic .gal-link:nth-child(12n + 12) {
    grid-column: span 2;
  }

  /* legacy grid podstránok */
  .g-2,
  .g-3,
  .team {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* recenzie – súhrn hodnotenia na samostatný riadok, šípky pod neho
     (DOM poradie je arrows → track → summary, preto flex + order) */
  .reviews-slider {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  .reviews-slider .splide__track {
    order: 1;
  }
  .rev-summary {
    order: 2;
    position: static;
    max-width: none;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
  .reviews-slider .splide__arrows {
    order: 3;
    position: static;
    justify-content: center;
    margin-top: 20px;
  }

  /* logá klientov – nižšie boxy a menší vnútorný padding, nech sa logo zmestí */
  .clients-slider .splide__slide {
    height: 104px;
    padding: 20px 24px;
  }
  .clients-slider img {
    max-height: 52px;
  }
}

/* ---------- < sm (576px) ---------- */
@media (max-width: 575.98px) {
  .why-photo {
    height: 240px;
  }
  .why-text {
    padding: 48px 0;
  }
  /* g-5 (3rem) je širší ako dvojnásobok paddingu kontajnera (12px) – riadok by pretiekol o 12px */
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }
  /* mobilné menu na úzkych displejoch (ako profi SK) */
  .mob-nav-link {
    padding: 12px 0;
  }
  .mob-cta {
    padding: 14px 24px calc(24px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .mob-phone {
    padding: 10px 12px;
  }
  .mob-phone-icon {
    width: 36px;
    height: 36px;
  }
  .mob-phone-num {
    font-size: 0.88rem;
  }
  /* hlavička: len hamburger */
  .site-header .btn-phone-header {
    display: none;
  }
  .mob-burger {
    margin-left: auto;
  }
  .more-list h3 {
    font-size: 1.1rem;
  }
  .more-list p {
    font-size: 0.875rem;
  }
  .more-list li::before {
    top: 7px;
  }
  .breadcrumb-nav {
    font-size: 0.75rem;
    margin-bottom: 0.9rem;
  }
  .faq-btn {
    padding: 0.8rem 0.75rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .page-hero h1,
  .page-hero.thanks-hero h1 {
    font-size: 1.5rem;
  }
  .sec-head h2,
  .cta-section h2,
  .detail-block h2 {
    font-size: 1.5rem;
  }
  .hero-sub,
  .page-hero .hero-sub,
  .sec-head p,
  .cta-section p,
  .check-list li,
  .focus-item span {
    font-size: 0.875rem;
  }
  .hero-cta .btn {
    height: 44px;
    font-size: 0.85rem;
    padding: 0 18px;
  }
  .field-error {
    font-size: 0.68rem;
  }
  .footer-bottom p {
    font-size: 0.72rem;
  }
  .footer-social a {
    width: 38px;
    height: 38px;
  }
  /* karty (DIZAJN.md › Komponenty) */
  .feature,
  .review-card {
    padding: 1.4rem;
  }
  /* 404 a chybové stránky: obe tlačidlá na plnú šírku */
  .nf-btns .btn,
  .nf-btns .btn-hero-muted {
    width: 100%;
    justify-content: center;
  }

  .brand img {
    height: 38px;
  }
  .hero {
    margin: 0;
    border-radius: 0;
  }
  .page-hero-symbol {
    display: none;
  }
  .g-4,
  .grid.g-auto {
    grid-template-columns: 1fr;
  }
  .addr-grid-2,
  .team-grid {
    grid-template-columns: 1fr;
  }
  .stat b {
    font-size: 1.7rem;
  }
  .stat span {
    font-size: 0.86rem;
  }
  .clients-slider .splide__slide {
    height: 92px;
    padding: 16px 18px;
  }
  .clients-slider img {
    max-height: 44px;
  }
}