/**
 * RESPONSIVE — Breakpointy
 * ─────────────────────────────────────────────
 *  1200px  desktop (domyślny układ)
 *   900px  tablet landscape + hamburger menu
 *   768px  tablet portrait
 *   540px  mobile
 */


/* ══════════════════════════════
   ≤ 900px  Tablet landscape
   (menu hamburger włączone w nav.css)
══════════════════════════════ */
@media (max-width: 900px) {

  :root {
    --section-py:  5rem;
    --section-px:  var(--space-8);
  }

  /* Layouty dwukolumnowe → jedna kolumna */
  .about__grid,
  .sessions__grid,
  .sztuka__grid,
  .kontakt__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Zdjęcie O Mnie — ogranicz szerokość */
  .about__img-wrap {
    max-width: 480px;
    margin-inline: auto;
  }

  /* Pakiety — jedna kolumna */
  .packages-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

  /* Opinie — jedna kolumna */
  .reviews-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Voucher — ukryj zdjęcie, jeden rząd */
  .voucher {
    grid-template-columns: 1fr;
  }

  .voucher__visual { display: none; }

  .voucher__body {
    text-align: center;
    align-items: center;
  }

  .voucher__body .btn {
    display: inline-block;
    width: auto;
  }

  /* Typy sesji */
  .sessions__types { grid-template-columns: 1fr; }
  .why-box { height: auto; }

  /* Nagłówek przenosi logo na środek w mobile */
  .nav__inner { padding-inline: var(--space-5); }
}


/* ══════════════════════════════
   ≤ 768px  Tablet portrait
══════════════════════════════ */
@media (max-width: 768px) {

  :root {
    --section-py:  4rem;
    --section-px:  var(--space-6);
  }

  /* Hero */
  .hero__title { font-size: clamp(2.8rem, 12vw, 4.5rem); }

  /* Portfolio — 2 kolumny */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 260px;
  }
  .portfolio-item.tall { grid-row: span 1; }

  /* Sztuka — mniejsza galeria */
  .sztuka__gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 190px 190px;
  }

  /* FAQ */
  .faq-item__btn { padding: var(--space-5) var(--space-5); }
  .faq-item__answer,
  .faq-item.is-open .faq-item__answer {
    padding-inline: var(--space-5);
  }
}


/* ══════════════════════════════
   ≤ 540px  Mobile
══════════════════════════════ */
@media (max-width: 540px) {

  :root {
    --section-py:  3.5rem;
    --section-px:  var(--space-4);
    --gap-grid:    var(--space-4);
    --text-hero:   clamp(2.8rem, 14vw, 4rem);
  }

  /* Hero */
  .hero__sub { letter-spacing: var(--tracking-wide); }

  .btn-hero { padding: var(--space-4) var(--space-8); }

  /* Portfolio — 1 kolumna */
  .portfolio-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }

  /* Sztuka — 1 kolumna */
  .sztuka__gallery {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 200px);
  }
  .sztuka__gallery img:first-child { grid-row: span 1; }

  /* Typy sesji */
  .sessions__types { grid-template-columns: 1fr; }

  /* Voucher */
  .voucher__body { padding: var(--space-8) var(--space-6); }

  /* Footer */
  .footer__links { gap: var(--space-4); }

  /* FAQ */
  .faq-item__btn {
    font-size: var(--text-md);
    padding: var(--space-4);
  }
}