/* LUMORA Ladies Salon — responsive (mobile-first overrides at breakpoints) */

@media (max-width: 1024px) {
  .gallery-masonry {
    columns: 2;
  }

  .svc-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .svc-row--media-end .svc-media {
    order: 0;
  }

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

  .footer-logo {
    max-width: 140px;
  }
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-visual {
    order: -1;
  }

  .about-mask {
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 60px;
  }

  .header-inner {
    min-height: var(--header-height);
    padding-block: 0.15rem;
  }

  .brand img {
    width: clamp(108px, 36vw, 132px);
  }

  .hero {
    padding-top: calc(var(--header-height) + 2.25rem);
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.5rem 2rem;
    background: color-mix(in srgb, var(--beige) 96%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
    gap: 1rem;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    gap: 0.25rem;
  }

  .nav-list a {
    display: block;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(201, 181, 130, 0.22);
  }

  .btn-nav {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
  }

  body.nav-open {
    overflow: hidden;
  }

  .site-header.is-nav-open .nav-toggle-lines {
    background: transparent;
  }

  .site-header.is-nav-open .nav-toggle-lines::before {
    transform: translateY(8px) rotate(45deg);
  }

  .site-header.is-nav-open .nav-toggle-lines::after {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Team: single column — no horizontal scrollbar */
  .team-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    max-width: min(420px, 100%);
    margin-inline: auto;
  }

  .team-member {
    flex: none;
    width: 100%;
    scroll-snap-align: unset;
  }
}

@media (max-width: 767px) {
  /* Uniform square tiles — full image visible (no heavy zoom crop) */
  .gallery-masonry {
    columns: 2;
    column-gap: 0.65rem;
  }

  .gallery-item {
    margin-bottom: 0.65rem;
    background: var(--light-gray);
    border-radius: var(--radius-md);
  }

  .gallery-item--tall img,
  .gallery-item--wide img,
  .gallery-item img {
    min-height: 0 !important;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: contain;
    object-position: center center;
    background-color: var(--light-gray);
  }

  .svc-media img {
    aspect-ratio: 4 / 3;
    max-height: 260px;
    object-position: center 40%;
  }

  .svc-featured-img {
    max-height: 240px;
    width: 100%;
    object-fit: contain;
    object-position: center center;
    background-color: var(--light-gray);
  }

  .about-mask img {
    object-position: center 38%;
  }

  .hero-bg {
    background-size: 100% 100%, cover;
    background-position: 0 0, center 35%;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

  .fab-wa {
    right: 1rem;
    bottom: 1rem;
    width: 52px;
    height: 52px;
  }

  .carousel-viewport {
    min-height: 280px;
  }

  .quote-slide {
    padding: 1.35rem;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 54px;
  }

  .brand img {
    width: min(100px, 42vw);
  }

  .gallery-masonry {
    columns: 1;
  }

  .opening-badge {
    flex-direction: column;
    text-align: center;
    gap: 0.35rem;
  }

  .hero-logo-wrap img {
    width: min(220px, 72vw);
  }

  .hero {
    padding-top: calc(var(--header-height) + 1.65rem);
    min-height: min(92vh, 820px);
  }

  .container,
  .container-wide {
    width: min(1120px, 94vw);
  }
}

@media (min-width: 1440px) {
  :root {
    --container: min(1120px, 85vw);
  }

  .svc-media img {
    max-height: min(520px, 42vw);
  }
}

@media (min-width: 1920px) {
  body {
    font-size: 1.05rem;
  }

  .hero-inner {
    max-width: 880px;
    margin-inline: auto;
  }
}

@media (min-width: 2560px) {
  .container {
    width: min(1240px, 72vw);
  }

  .container-wide {
    width: min(1440px, 74vw);
  }
}