/*
 * GLOBAL MOBILE FIXES — applied to ALL dedicated archetypes
 * Fixes from "Wykonaj test wszystkich dedykowanych archetypów" audit (2026-05-21):
 * - Headlines overflow po prawej (długie polskie słowa)
 * - Stats grid 4-col na mobile ucinane
 * - Hero overflow general
 * - Touch targets <44px
 *
 * NOTE: Class names use prefix-style: po-hero__inner (NOT po__hero__inner).
 * Match patterns: [class*="hero__inner"], body[class*="aibt-archetype-"] [class*="hero__content"] catches po-hero/te-hero/kl-hero/etc.
 * Specificity boost via :where() + !important.
 */

/* ============================================================
 * UNIVERSAL FIXES (każdy dedykowany archetype)
 * ============================================================ */

/* Prevent horizontal overflow globally */
body[class*="aibt-archetype-"] {
  overflow-x: hidden;
}

/* Headlines — overflow-wrap dla długich polskich słów */
body[class*="aibt-archetype-"] h1,
body[class*="aibt-archetype-"] h2,
body[class*="aibt-archetype-"] h3,
body[class*="aibt-archetype-"] [class*="hero__headline"],
body[class*="aibt-archetype-"] [class*="__title"] {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ============================================================
 * @media (max-width: 960px) — Tablet portrait + max mobile
 * ============================================================ */
@media (max-width: 960px) {
  /* Hero inner: reduce padding (matches po-hero__inner, te-hero__inner, etc.) */
  body[class*="aibt-archetype-"] [class*="hero__inner"], body[class*="aibt-archetype-"] [class*="hero__content"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Nav inner: reduce padding */
  body[class*="aibt-archetype-"] [class*="nav__inner"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    gap: 1rem !important;
  }

  /* Hide nav links na mobile */
  body[class*="aibt-archetype-"] [class*="nav__links"] {
    display: none !important;
  }

  /* Hero grid 2-col → 1-col (klatka asymmetric; piksel deleted 2026-05-26) */
  body[class*="aibt-archetype-"] [class*="hero__inner"], body[class*="aibt-archetype-"] [class*="hero__content"][style*="grid-template-columns"],
  body[class*="aibt-archetype-"] [class*="hero__inner"], body[class*="aibt-archetype-"] [class*="hero__content"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero main padding reduction */
  body[class*="aibt-archetype-"] [class*="hero__main"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Stats grid: 4-col → 2-col na tablet portrait */
  body[class*="aibt-archetype-"] [class*="hero__metrics"],
  body[class*="aibt-archetype-"] [class*="hero__stats"],
  body[class*="aibt-archetype-"] [class*="about__stats"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Hero EXIF / date-check bar: stack 2-col */
  body[class*="aibt-archetype-"] [class*="hero__exif-grid"],
  body[class*="aibt-archetype-"] [class*="hero__date-check-stats"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* About grid 2-col → 1-col */
  body[class*="aibt-archetype-"] [class*="about__inner"] {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* ============================================================
 * @media (max-width: 640px) — Mobile
 * ============================================================ */
@media (max-width: 640px) {
  /* Hero/section padding even smaller */
  body[class*="aibt-archetype-"] [class*="hero__inner"], body[class*="aibt-archetype-"] [class*="hero__content"],
  body[class*="aibt-archetype-"] [class*="hero__date-check-inner"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body[class*="aibt-archetype-"] [class*="nav__inner"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 0.5rem !important;
  }

  /* Headlines smaller na mobile */
  body[class*="aibt-archetype-"] [class*="hero__headline"] {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.05 !important;
  }

  /* Stats grid 2 → 2 col z mniejszym font */
  body[class*="aibt-archetype-"] [class*="hero__metrics"],
  body[class*="aibt-archetype-"] [class*="hero__stats"],
  body[class*="aibt-archetype-"] [class*="about__stats"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  body[class*="aibt-archetype-"] [class*="hero__metrics"] dd,
  body[class*="aibt-archetype-"] [class*="hero__stats"] dd,
  body[class*="aibt-archetype-"] [class*="about__stats"] dd {
    font-size: 1.5rem !important;
  }

  body[class*="aibt-archetype-"] [class*="hero__metrics"] dt,
  body[class*="aibt-archetype-"] [class*="hero__stats"] dt,
  body[class*="aibt-archetype-"] [class*="about__stats"] dt {
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
  }

  /* Hero EXIF 1-col */
  body[class*="aibt-archetype-"] [class*="hero__exif-grid"],
  body[class*="aibt-archetype-"] [class*="hero__date-check-stats"] {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  body[class*="aibt-archetype-"] [class*="hero__date-check-inner"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Nav CTA — kompaktowy */
  body[class*="aibt-archetype-"] [class*="nav__cta"] {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
  }

  /* Hero deck text — smaller font */
  body[class*="aibt-archetype-"] [class*="hero__deck"] {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  /* Hero CTAs */
  body[class*="aibt-archetype-"] [class*="hero__cta"] {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.82rem !important;
    min-height: 44px;
  }

  /* Hero series + live labels — wrap nicely */
  body[class*="aibt-archetype-"] [class*="hero__top"] {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* Touch targets minimum 44x44 */
  body[class*="aibt-archetype-"] button,
  body[class*="aibt-archetype-"] a[class*="cta"],
  body[class*="aibt-archetype-"] a[class*="button"] {
    min-height: 44px;
  }

  /* Form inputs — 16px font żeby iOS nie zoomował */
  body[class*="aibt-archetype-"] input[type="text"],
  body[class*="aibt-archetype-"] input[type="email"],
  body[class*="aibt-archetype-"] input[type="tel"],
  body[class*="aibt-archetype-"] select,
  body[class*="aibt-archetype-"] textarea {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Footer wordmark — clamp */
  body[class*="aibt-archetype-"] [class*="foot__wordmark"] {
    font-size: clamp(2.5rem, 14vw, 6rem) !important;
  }

  /* Footer grid 4-col → 1-col */
  body[class*="aibt-archetype-"] [class*="foot__grid"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Services/Gallery/Team grids 3-col → 1-col */
  body[class*="aibt-archetype-"] [class*="services__grid"],
  body[class*="aibt-archetype-"] [class*="gallery__grid"],
  body[class*="aibt-archetype-"] [class*="team__grid"],
  body[class*="aibt-archetype-"] [class*="test__supporting"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ============================================================
 * @media (max-width: 480px) — Small mobile
 * ============================================================ */
@media (max-width: 480px) {
  /* Brand meta hide na bardzo małych */
  body[class*="aibt-archetype-"] [class*="nav__brand-meta"] {
    display: none !important;
  }

  body[class*="aibt-archetype-"] [class*="nav__brand-name"] {
    font-size: 0.9rem !important;
  }
}