/* === responsive.css === */

/* === 1024px and below === */
@media (max-width: 1024px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }

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

  .hero__content { order: 1; }
  .hero__realtor-note { order: 2; }
  .hero__photos { order: 3; }

  .details-grid,
  .roof__inner,
  .engineering__grid,
  .kitchen__inner,
  .bathroom__inner,
  .area__inner {
    grid-template-columns: 1fr;
  }

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

  .room__inner .room__gallery {
    order: -1;
  }
}

/* === Compact header === */
@media (max-width: 1100px) {
  .header__nav {
    position: fixed;
    z-index: 120;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
    flex-direction: column;
    padding: var(--space-xl);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .header__nav--open {
    transform: translateX(0);
  }

  .header__nav a {
    font-size: var(--font-size-base);
  }

  .burger {
    display: block;
  }

  .header__cta-desktop {
    display: none;
  }
}

/* === 768px === */
@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
  }

  .section {
    padding-block: var(--space-3xl);
  }

  /* Header: compact mobile */
  .header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
    flex-direction: column;
    padding: var(--space-xl);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .header__nav--open {
    transform: translateX(0);
  }

  .header__nav a {
    font-size: var(--font-size-base);
  }

  .burger {
    display: block;
  }

  .header__cta-desktop {
    display: none;
  }

  /* Hero mobile */
  .hero {
    padding-block: var(--space-xl);
  }

  .hero__params {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Grids */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Sticky mobile CTA */
  .sticky-cta {
    display: block;
  }

  body {
    padding-bottom: 60px;
  }

  /* Advantages */
  .advantages__grid {
    grid-template-columns: 1fr;
  }

  /* Gallery */
  .gallery--3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* === 390px === */
@media (max-width: 480px) {
  h1 { font-size: var(--font-size-xl); }
  h2 { font-size: var(--font-size-lg); }

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

  .hero__cta-group {
    flex-direction: column;
  }

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

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

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

  .stat-card__value {
    font-size: var(--font-size-lg);
  }

  .roof__gallery,
  .engineering__gallery,
  .kitchen__gallery,
  .bathroom__gallery,
  .room__gallery,
  .area__gallery {
    grid-template-columns: 1fr;
  }

  .gallery--2 {
    grid-template-columns: 1fr;
  }

  .contact__methods {
    flex-direction: column;
  }

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

/* --- Mobile room order: text first, photos after context --- */
@media (max-width: 1024px) {
  .room__inner .room__gallery {
    order: initial;
  }
}