/* SOHO VUE - 10-rwd.css
   RWD: jawne zwijanie układów wielokolumnowych
   Fragment 10/13 arkusza soho.css (wiersze 3155-3360 oryginalu).
   KOLEJNOSC LADOWANIA JEST ZNACZACA - patrz includes/head.php. */

/* ==========================================================================
   RWD. Każdy układ wielokolumnowy ma tu jawnie opisane zwijanie.
   Punkty: 1119px (menu), 899px (układy dwukolumnowe), 767px, 480px.
   ========================================================================== */

/* ---- tablet i mniejsze ---------------------------------------------- */
@media (max-width: 899px) {
  .hero {
    align-items: flex-end;
  }

  /* Dolny odstęp mieści stały pasek kontaktowy. */
  .hero__inner {
    padding-top: clamp(5rem, 13vh, 7rem);
    padding-bottom: 4.6rem;
  }

  .hero .display {
    font-size: clamp(2rem, 7.4vw, 2.85rem);
  }

  .hero .lead {
    font-size: 1.02rem;
    max-width: 34ch;
  }

  .hero .hero__sub {
    margin-top: .95rem;
    font-size: .98rem;
  }

  .hero__by {
    margin-top: 2rem;
  }

  /* Przy wąskim ekranie poziomy gradient przestaje działać: przyciemniamy
     od dołu. Górna część kadru pozostaje jasna i widoczna. */
  .hero::after {
    background:
      linear-gradient(to top, rgba(15, 14, 14, .86) 0%, rgba(20, 12, 15, .79) 40%,
        rgba(28, 14, 20, .5) 60%, rgba(36, 15, 25, .18) 80%,
        rgba(36, 15, 25, .04) 100%);
  }

  .hero__media img {
    object-position: 58% 52%;
  }

  .apart__count {
    font-size: clamp(4rem, 17vw, 6.5rem);
  }

  .price__v {
    font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  }

  /* Etykieta i opis jedno pod drugim, bez zderzania kolumn. */
  .stage__row {
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .stage__row b {
    letter-spacing: .16em;
  }
}

/* Poniżej 720 px hero pokazuje ujęcie pionowe (patrz art direction w
   hero.php). Ten kadr przycina się w poziomie, nie w pionie, więc punkt
   ciężkości przesuwamy w lewo - na bryłę, która inaczej ucieka poza kadr.
   Reguła musi stać za blokiem 899 px, bo tamten też pasuje do telefonu. */
@media (max-width: 719px) {
  .hero__media img {
    object-position: 38% 50%;
  }
}

/* ---- telefon --------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --pad-y: clamp(3.75rem, 12vw, 5.5rem);
  }

  /* Na telefonie zapowiedź i znak dewelopera stoją zbyt nisko - prawie na
     pasku kontaktowym. Dodatkowy dolny odstęp podnosi cały blok. */
  .hero__inner {
    padding-bottom: 7.25rem;
  }

  /* Na telefonie 50px góra i dół zjadałoby pół ekranu — proporcjonalnie mniej. */
  :root {
    --nav-pad: 22px;
  }

  .h2 {
    font-size: clamp(1.72rem, 6.6vw, 2.2rem);
  }

  .h3 {
    font-size: 1.22rem;
  }

  .lead {
    font-size: 1.02rem;
  }

  .quote {
    font-size: clamp(1.35rem, 5.6vw, 1.75rem);
  }

  /* Przyciski na całą szerokość: jeden kciuk, jeden cel. */
  .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
  }

  .btn-row .btn {
    width: 100%;
  }

  .btn {
    font-size: .9rem;
    padding-inline: 1.1rem;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .facts__item,
  .facts__item+.facts__item {
    padding: 1.4rem 0;
    border-left: 0;
    padding-left: 0;
  }

  .facts__item:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .editorial {
    gap: 1.6rem;
  }

  .editorial__big {
    margin-top: 0;
  }


  .amen {
    gap: 2.2rem;
  }

  .why {
    gap: 1.8rem;
  }

  .qa__row {
    padding: 1.15rem 0;
  }

  .foot__bottom {
    flex-direction: column;
    gap: .6rem;
  }
}

/* ---- małe telefony ---------------------------------------------------- */
@media (max-width: 480px) {
  .hero .display {
    font-size: clamp(1.85rem, 8.2vw, 2.3rem);
  }

  .apart__count {
    font-size: 4.2rem;
  }

  .apart__card {
    padding: 1.3rem 1.2rem 1.5rem;
  }

  .amen__items li {
    font-size: .78rem;
  }

  .faq summary {
    font-size: .96rem;
    padding-right: 2.4rem;
  }
}

.display+ :where(.lead, .body, p),
.h2+ :where(.lead, .body, p),
.h3+ :where(.lead, .body, p),
.h4+ :where(.lead, .body, p) {
  margin-top: var(--head-gap);
}

/* Nigdy nie dopuszczamy do poziomego przewijania całej strony:
   przewija się wyłącznie karuzela apartamentów. */
.wrap>* {
  min-width: 0;
}