/* ============================================================
   LARGE SCREENS — 2K / 4K / ultrawide (strategia: poszerzenie)
   Ładowany PO style.css / ortho-page.css / admin.css / login.css,
   więc nadpisuje kontenery, gridy i sufity clamp bez grzebania
   w bazowych plikach. Cap: ~1760px dla czytelności linii.
   Breakpointy: 1920 (FHD+), 2560 (QHD/4K), 3440 (ultrawide/5K+).
   ============================================================ */

/* ---------- 1920px+: lekkie poszerzenie (FHD+ / małe 2K) ---------- */
@media (min-width: 1920px) {
  .container {
    max-width: 1400px;
    padding: 0 32px;
  }

  .nav-container {
    max-width: 1640px;
  }

  .hero-container {
    max-width: 1400px;
    padding: 0 32px;
  }

  .hero-content {
    max-width: 760px;
  }

  .hero-subtitle {
    max-width: 640px;
    font-size: 1rem;
  }

  .team-section .container {
    padding: 44px 52px;
  }

  .team-card {
    max-width: 340px;
  }

  .blog-controls {
    max-width: 1400px;
  }

  .appointment-form {
    max-width: 1100px;
  }

  .about-photos img {
    height: 460px;
  }
}

/* ---------- 2560px+: docelowe 2K/4K (~1720-1760px) ---------- */
@media (min-width: 2560px) {
  /* Kontenery */
  .container {
    max-width: 1760px;
    padding: 0 40px;
  }

  .nav-container {
    max-width: 1720px;
    min-height: 84px;
  }

  .nav-menu > li > a {
    font-size: 16px;
  }

  .nav-logo img {
    height: 70px;
  }

  /* Hero: szersza treść, ale z limitem wysokości żeby nie był gigantyczny */
  .hero-section {
    max-height: 1100px;
    margin-inline: auto;
  }

  .hero-container {
    max-width: 1720px;
    padding: 0 40px;
  }

  .hero-content {
    max-width: 860px;
  }

  .hero-title {
    font-size: clamp(2.2rem, 3.2vw, 5rem);
  }

  .hero-subtitle {
    max-width: 700px;
    font-size: 1.1rem;
  }

  /* Typografia sekcji: wyższe sufity, body bez zmian */
  :root {
    --brand-section-title-size: clamp(1.75rem, 1.6vw, 2.75rem);
    --brand-page-title-size: clamp(2.35rem, 2.6vw, 4.5rem);
    --brand-card-title-size: clamp(1.25rem, 1.2vw, 1.9rem);
  }

  .section-title {
    font-size: 2.75rem;
  }

  /* Gridy: więcej kolumn zamiast rozciągania kart */
  .team-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }

  .team-card {
    max-width: 340px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .services-card-grid {
    gap: 40px;
  }

  .offer-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }

  .blog-grid,
  .events-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 36px;
  }

  .blog-controls {
    max-width: 1720px;
  }

  .blog-thumbnail,
  .event-thumb {
    height: 260px;
  }

  /* Formularze / kontakt */
  .appointment-form {
    max-width: 1200px;
    padding: 56px;
  }

  .faq-item {
    max-width: 1000px;
  }

  body:not(.admin-page) #pricing table {
    max-width: 1000px;
  }

  /* Zdjęcia / dekoracje z capem */
  .about-photos img {
    height: 540px;
  }

  .section-botanical-left,
  .section-botanical-right {
    width: 260px;
    max-width: 260px;
  }

  /* Podstrony ortho / trening / masaże */
  .ortho-hero-grid,
  .tm-hero-grid,
  .masaze-hero-grid {
    gap: 64px;
  }

  .ortho-hero-img-wrapper,
  .tm-hero-img-wrapper,
  .masaze-hero-img-wrapper {
    max-width: 560px;
  }

  /* Admin: szersza treść, czytelne tabele */
  body.admin-page .main-content {
    max-width: 1720px;
    padding: 40px 48px;
  }

  body.admin-page .appointment-form,
  body.admin-page .login-container {
    max-width: 1200px;
  }
}

/* ---------- 3440px+: ultrawide — cap, centruj, nie rozciągaj ---------- */
@media (min-width: 3440px) {
  .container,
  .nav-container,
  .hero-container,
  .blog-controls,
  body.admin-page .main-content {
    max-width: 1760px;
    margin-inline: auto;
  }

  .hero-section {
    max-height: 1100px;
  }

  .team-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}