/* ============================================================
   NATALIA SZALA – RESPONSYWNOŚĆ
   Breakpointy: 480px | 768px | 1024px | 1200px
   ============================================================ */

/* ── TABLET (max 1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {

  .o-mnie-siatka {
    grid-template-columns: 1fr 300px;
    gap: 48px;
  }

  .zdjecie-okrag { width: 260px; height: 260px; }

  .kontakt-siatka {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mapa-karta { right: 30px; }
}

/* ── TABLET PIONOWY (max 768px) ──────────────────────────── */
@media (max-width: 768px) {

  :root { --padding-sekcji: 60px 0; }

  /* Hamburger */
  .hamburger { display: flex; }

  .nav-menu {
    position: fixed;
    inset: 0;
    background: var(--kolor-bardzo-ciemny);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
  }

  .nav-menu.otwarte { transform: translateX(0); }

  .nav-link {
    font-size: 1.2rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.85);
  }

  /* O mnie */
  .o-mnie-siatka {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 36px;
  }

  .o-mnie-zdjecie { order: -1; }

  .zdjecie-okrag { width: 200px; height: 200px; }

  /* Mapa */
  #mapa { height: 380px; }

  .mapa-karta {
    right: 50%;
    transform: translate(50%, -50%);
    text-align: center;
    min-width: 230px;
    max-width: calc(100% - 32px);
  }

  /* Formularz */
  .formularz-rzad { grid-template-columns: 1fr; }

  .formularz-kontaktowy { padding: 24px 20px 20px; }

  /* Cookie */
  #cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }
  .cookie-przyciski { width: 100%; }
  .btn-cookie { flex: 1; text-align: center; }

  /* Stopka */
  .stopka-wnetrze {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .stopka-prawa { text-align: center; }

  #scroll-top { bottom: 16px; right: 16px; }
}

/* ── SMARTFON (max 480px) ────────────────────────────────── */
@media (max-width: 480px) {

  :root { --padding-sekcji: 48px 0; }

  .kontener { padding: 0 18px; }

  .o-mnie-tekst h1 { font-size: 1.75rem; }

  .zdjecie-okrag { width: 170px; height: 170px; }

  #mapa { height: 300px; }

  .mapa-karta { padding: 20px 22px; }

  .btn-wyslij { width: 100%; justify-content: center; }
}

/* ── DUŻE EKRANY (min 1200px) ────────────────────────────── */
@media (min-width: 1200px) {

  :root { --padding-sekcji: 100px 0; }

  .o-mnie-siatka { grid-template-columns: 1fr 400px; }

  .zdjecie-okrag { width: 340px; height: 340px; }
}

/* ── PREFERS REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .fade-in, .fade-in-lewo, .fade-in-prawo { opacity: 1; transform: none; }
}

/* ── DRUKOWANIE ──────────────────────────────────────────── */
@media print {
  #naglowek, #cookie-banner, #scroll-top, #loader, #mapa { display: none !important; }
  #o-mnie { padding-top: 20px; }
  .o-mnie-siatka, .kontakt-siatka { grid-template-columns: 1fr; }
}