/* ==========================================================================
   WYPSTRYKANY.PL — responsive.css
   Mobile-first: 600 / 900 / 1100 / 1280 px + preferencje użytkownika.
   ========================================================================== */

@media (max-width: 599px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .stats { gap: 0.5rem; }
  .stats__item dt { font-size: 0.7rem; }
  .about__stamp { width: 104px; height: 104px; font-size: 0.72rem; right: 0.5rem; }
  .pa-toolbar__actions { width: 100%; }
  .pa-toolbar__actions .btn { flex: 1 1 auto; }
  .album-stage__nav { width: 40px; height: 40px; }
  .lightbox__nav { top: auto; bottom: 4.5rem; transform: none; }
  .album-modal__hint, .lightbox__hint { display: none; }
  .site-header--minimal .site-header__back { display: none; }
  .logo { font-size: 1.2rem; letter-spacing: 0.06em; }
}

/* Hero na mniejszych ekranach: kadr 16:9 nad tekstem */
@media (max-width: 899px) {
  .hero__visual { order: -1; margin-right: 0.6rem; }
  .hero::after { height: 20%; }
}

@media (min-width: 600px) {
  .hero__dots { display: flex; }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 250px; grid-auto-flow: dense; }
  .album-card__link, .album-card--wide .album-card__link { aspect-ratio: auto; height: 100%; }
  .album-card--tall { grid-row: span 2; }
  .album-card--wide { grid-column: span 2; }

  .gear__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .gear-card--feature, .gear-card--wide { grid-column: 1 / -1; }

  .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; grid-auto-flow: dense; }
  .pa-item--portrait { grid-row: span 2; }
  .pa-item__open, .pa-item__open img { height: 100%; }
  .pa-item__open img { object-fit: cover; }
  .pa-expiry { display: block; }
  .client__visual { height: 280px; }
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }

  /* Hero: tekst po lewej, kadr 16:9 po prawej (szerszy, by zdjęcie miało wyraz) */
  .hero { display: flex; align-items: center; min-height: min(100svh, 900px); padding-bottom: clamp(4rem, 3rem + 3vw, 6rem); }
  .hero::after { width: 44%; height: 100%; }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .hero__visual::before { inset: 1.5rem -1.5rem 4rem 1.5rem; }
  .hero__scroll { display: flex; }

  .section-head--split { grid-template-columns: 1.2fr 1fr; gap: 3rem; }
  .section-head--split .section-head__lead { justify-self: end; }

  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .about__media { padding-right: 1.5rem; }
  .about__stamp { right: -1.5rem; bottom: 3rem; width: 150px; height: 150px; font-size: 0.95rem; }

  .gear__list { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 4rem; align-items: start; }
  .gear-card--feature { grid-column: 1 / span 7; }
  .gear-card--feature .gear-card__media img { aspect-ratio: 16 / 11; }
  .gear-card--tall { grid-column: 9 / span 4; margin-top: 6rem; }
  .gear-card--tall .gear-card__media img { aspect-ratio: 4 / 5; }
  .gear-card:nth-child(3) { grid-column: 1 / span 4; }
  .gear-card:nth-child(4) { grid-column: 5 / span 4; margin-top: 3.5rem; }
  .gear-card:nth-child(5) { grid-column: 9 / span 4; margin-top: -1.5rem; }
  .gear-card--wide { grid-column: 2 / span 10; }
  .gear-card--wide .gear-card__inner { grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; }

  .portfolio__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 270px; gap: 1.25rem; }
  .portfolio__filters { flex-wrap: wrap; overflow: visible; }

  .album-modal { padding: 2.5vh 3vw; }
  .album-modal__panel { border-radius: var(--radius); box-shadow: var(--shadow-lift); }
  .album-thumbs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

  .offer__box { grid-template-columns: 300px minmax(0, 1fr); }
  .offer__tabs { flex-direction: column; gap: 0.15rem; padding: 1.5rem 1rem; overflow: visible; }
  .offer-tab { padding: 1rem 1.1rem; }
  .offer-tab__label { white-space: normal; }
  .offer-tab::after {
    content: '';
    position: absolute;
    right: -1rem; top: 50%;
    border: 10px solid transparent;
    border-right-color: var(--surface);
    transform: translateY(-50%) scale(0);
    transition: transform var(--dur) var(--ease-out);
  }
  .offer-tab[aria-selected='true']::after { transform: translateY(-50%) scale(1); }
  .offer__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .offer__media { aspect-ratio: auto; min-height: 100%; }

  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .contact__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
  .site-footer__inner { grid-template-columns: 1.1fr 1.4fr; align-items: start; }

  .client__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .client__visual { height: auto; min-height: 100%; }
  .client__visual-quote { bottom: 3rem; }

  .pa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 1.25rem; }
  .lightbox__nav--prev { left: 1.25rem; }
  .lightbox__nav--next { right: 1.25rem; }
  .lightbox__stage { margin: 0 5.5rem; }
}

@media (min-width: 1100px) {
  .nav-toggle, .nav-backdrop { display: none; }
  .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; }
  .site-header__end { order: 3; }
  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1.75rem;
    width: auto;
    padding: 0;
    overflow: visible;
    color: inherit;
    background: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .site-nav__list { display: flex; gap: 1.5rem; }
  .site-nav__link { font-family: var(--f-sans); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.02em; padding: 0.5rem 0; }
  .site-nav__link::after { bottom: 0.25rem; }
  .site-nav__link[aria-current='true'] { color: var(--accent-ink); }
  .site-nav__actions { flex-wrap: nowrap; gap: 0.6rem; }
  .site-nav .btn--client { --btn-hover-bg: var(--text); --btn-hover-fg: var(--bg); }
}

@media (min-width: 1280px) {
  .portfolio__grid { grid-auto-rows: 300px; }
  .about__grid { gap: 7rem; }
  .site-nav__list { gap: 2rem; }
}

@media (hover: none) {
  .album-card__link:hover .album-card__frame img, .gear-card:hover .gear-card__media img { transform: none; }
  .btn:hover::before { transform: translateY(101%); }
  .btn:hover { color: var(--btn-fg); border-color: var(--btn-bd); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .reveal--image, .js .reveal--image picture { opacity: 1; transform: none; clip-path: none; }
  .js .reveal--image img, .hero__img, .hero__slide.is-active .hero__img, .pa-hero__img { transform: none !important; }
  .deco-word, .hero__visual::before { transform: none; }
  .about__stamp { transform: rotate(-8deg); }
  .hero__scroll-line::after { display: none; }
}

@media (forced-colors: active) {
  .btn, .filter-btn, .offer-tab, .icon-btn, .theme-toggle { border: 1px solid ButtonText; }
  body::after { display: none; }
}

@media print {
  .site-header, .hero__controls, .hero__scroll, .contact-form, .album-modal, .lightbox, .toast-region, body::after { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}