/* =============================================
   RESPONSIVE
   Mobile and tablet overrides.
   Tablet (≤1023px) lives in layout.css alongside
   the rules it modifies. This file handles mobile
   (≤767px) and page-specific breakpoints.
   ============================================= */

/* ---- Page banner: mobile ---- */
@media (max-width: 767px) {
  .page-banner {
    height: clamp(200px, 42vw, 280px);
  }

  .page-banner__content {
    left: var(--space-md);
    right: var(--space-md);
    bottom: clamp(16px, 3vh, 28px);
  }

  .page-banner__heading {
    max-width: 100%;
  }
}

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
  .hero-banner__eyebrow {
    display: none;
  }

  .hero-banner__content {
    max-width: 96vw;
    padding: clamp(32px, 6vh, 56px) var(--space-md);
  }

  .hero-banner__cta {
    width: 100%;
    text-align: center;
  }

  /* Navigation */
  .site-nav {
    left: 0;
    right: 0;
    padding: 0 var(--space-md);
    background-color: transparent;
    justify-content: flex-end;
  }

  .site-nav__brand {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
  }

  .site-nav__list {
    display: none;
  }

  .site-nav__lang {
    display: none;
  }

  .site-nav__toggle {
    display: block;
    color: var(--color-parchment);
  }

  .site-nav.is-scrolled .site-nav__toggle {
    color: var(--color-charcoal);
  }

  .site-nav {
    justify-content: space-between;
  }

  /* About section */
  .about-section {
    padding: clamp(40px, 8vw, 64px) var(--space-md) 0;
  }

  .about-story {
    position: relative;
    width: 100%;
    display: block;
  }

  .about-story__visual {
    min-height: clamp(360px, 62vh, 520px);
    opacity: 1 !important;
    transform: none !important;
  }

  .about-story__panel {
    position: absolute;
    left: clamp(16px, 4vw, 28px);
    right: clamp(16px, 4vw, 28px);
    bottom: clamp(16px, 4vw, 28px);
    width: auto;
    margin: 0;
    padding: clamp(24px, 6vw, 36px) clamp(22px, 5vw, 32px);
  }

  /* Properties */
  .prop-highlight__grid {
    --tile-cols: 3;
  }

  .prop-highlight__header {
    text-align: center;
    padding: 0 var(--space-md) clamp(16px, 2vh, 24px);
  }

  /* Services */
  .service-item:nth-child(1) {
    border-top: none;
  }
  
  .services-inner {
    padding: clamp(56px, 8vh, 80px) var(--space-md);
    padding-bottom: 0;
    row-gap: clamp(28px, 6vw, 44px);
  }

  .service-entry__body {
    padding-left: var(--space-sm);
  }

  .services-cta {
    padding-left: var(--space-sm);
    text-align: center;
  }

  /* News */
  .news-section__inner {
    padding: clamp(56px, 8vh, 80px) var(--space-md);
  }

  /* Contact */
  .contact-inner {
    grid-template-columns: 1fr;
    row-gap: clamp(48px, 7vh, 64px);
    padding: clamp(56px, 8vh, 80px) var(--space-md);
  }

  .contact-left {
    position: static;
  }

  /* Newsletter */
  .newsletter-section {
    padding: clamp(36px, 6vh, 56px) 0 clamp(64px, 10vh, 96px);
    padding-top: 0;

  }

  .newsletter-inner {
    padding: clamp(36px, 6vh, 56px) clamp(24px, 5vw, 32px);
  }

  /* Address and button stay on one row on phones too; the input gives up
     the width (min-width: 0 lets a flex item shrink below its content). */
  .newsletter-form__group {
    gap: 12px;
  }

  .newsletter-form__input {
    min-width: 0;
  }

  .newsletter-form__group .newsletter-form__btn {
    padding-inline: 16px;
  }

  /* Footer */
  .site-footer__nav {
    align-items: center;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-lg);
  }

  .site-footer__brand {
    align-items: center;
  }

  .site-footer__contact {
    align-items: center;
  }
}

/* ---- Properties highlight: narrow mobile (<=480px) ---- */
@media (max-width: 480px) {
  .prop-highlight__grid {
    --tile-cols: 2;
  }
}

/* ---- Properties catalogue: tablet (<=1023px) ---- */
@media (max-width: 1023px) {
  .prop-highlight {
    padding: clamp(36px, 6vh, 64px) 0 80px;
  }

  .prop-catalogue__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(24px, 3vw, 48px);
  }
}

/* ---- Properties catalogue: mobile (<=767px) ---- */
@media (max-width: 767px) {
  .prop-catalogue__grid {
    grid-template-columns: 1fr;
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  .prop-catalogue__grid > * {
    min-width: 0;
  }
}

/* ---- News listing: tablet (<=1023px) ---- */
@media (max-width: 1023px) {
  .news-listing__lead-link {
    gap: clamp(20px, 3vw, 40px);
  }

  .news-listing__item-link {
    grid-template-columns: 1fr clamp(120px, 16vw, 180px);
    column-gap: clamp(20px, 3vw, 40px);
  }
}

/* ---- News listing + detail: mobile (<=767px) ---- */
@media (max-width: 767px) {
  .news-page__listing {
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  /* Lead: stack thumb above text */
  .news-listing__lead-link {
    grid-template-columns: 1fr;
    row-gap: clamp(16px, 2.5vh, 24px);
  }

  .news-listing__lead-thumb {
    aspect-ratio: 4 / 3;
  }

  /* Secondary: stack image above text on mobile */
  .news-listing__item-link {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 2vh, 20px);
  }

  .news-listing__item-thumb {
    aspect-ratio: 4 / 3;
    order: -1;
  }

  .news-detail__body {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .news-detail__figure {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    width: auto;
    aspect-ratio: 3 / 2;
  }

  .news-detail__headline {
    max-width: 100%;
  }
}

/* ---- About page: tablet + mobile (<=860px) ---- */
@media (max-width: 860px) {
  .about-pair {
    grid-template-columns: 1fr;
  }

  .about-pair__photo {
    padding-right: 0;
    padding-bottom: clamp(24px, 4vw, 40px);
  }

  .about-pair__photo img {
    aspect-ratio: 3 / 2;
  }

  .about-pair__text {
    padding-left: 0;
  }

  .about-pair__body {
    max-width: 100%;
  }
}

/* ---- Services grid: tablet (<=900px) ---- */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Services grid: mobile (<=560px) ---- */
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-intro { max-width: 100%; }
}

/* ---- Services sub-page splits: tablet (<=900px) ---- */
@media (max-width: 900px) {
  .svc-split,
  .svc-split--flip {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .svc-split__image {
    height: clamp(240px, 50vw, 400px);
    position: relative;
  }

  /* Image always stacks on top, text below, regardless of flip */
  .svc-split--flip .svc-split__image { order: 0; }
  .svc-split--flip .svc-split__body  { order: 1; }

  .svc-split__body {
    padding: clamp(48px, 7vh, 72px) clamp(24px, 6vw, 48px);
    justify-content: flex-start;
  }
}

/* ---- Slogan band + wrap: mobile ---- */
@media (max-width: 767px) {
  /* background-attachment:fixed can misfire on some mobile browsers;
     fall back to scroll (image scrolls with page) on small screens */
  .slogan-band {
    height: clamp(260px, 55vw, 360px);
    background-attachment: scroll;
  }

  /* Services' fixed-window strip rides on the same mechanism - same fallback */
  .se-strip {
    background-attachment: scroll;
  }

  .slogan-band__lede {
    display: none;
  }
}

/* ---- News row: tablet (<=900px) — 2 columns ---- */
@media (max-width: 900px) {
  .news-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- News row: mobile (<=560px) — 1 column ---- */
@media (max-width: 560px) {
  .news-row {
    grid-template-columns: 1fr;
  }
}

/* ---- About philosophy (homepage block 2): mobile ---- */
@media (max-width: 767px) {
  .about-philosophy {
    padding: 30px var(--space-md);
  }

  .about-philosophy__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 5vw, 40px);
  }

  .about-philosophy__media {
    order: -1;
  }

  .about-philosophy__text {
    max-width: 100%;
  }
}

/* ---- Team section: tablet (<=900px) ---- */
@media (max-width: 900px) {
  .about-team__header {
    padding: clamp(40px, 5vh, 64px) clamp(24px, 6vw, 48px) clamp(32px, 4vh, 56px);
  }

  .about-team__founder {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .about-team__founder-photo {
    order: 1;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .about-team__founder-body {
    order: 2;
    padding: clamp(40px, 6vh, 64px) clamp(24px, 6vw, 48px);
  }

  .about-team__trio {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 3vw, 32px);
    padding: clamp(40px, 5vh, 64px) clamp(24px, 6vw, 48px);
  }

  .about-team-rule {
    margin-left: clamp(24px, 6vw, 48px);
    margin-right: clamp(24px, 6vw, 48px);
  }
}

/* ---- Team section: mobile (<=560px) ---- */
@media (max-width: 560px) {
  .about-team__trio {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
    padding: clamp(40px, 6vh, 56px) var(--space-md);
  }

  .about-team__member-photo {
    aspect-ratio: 4 / 3;
  }
}

/* ---- Client voices: tablet (<=1023px) ---- */
@media (max-width: 1023px) {
  .client-voices__inner {
    grid-template-columns: 1fr 1fr;
  }

  .client-voices__title {
    text-align: center;
    padding: clamp(48px, 7vh, 80px) clamp(32px, 4vw, 56px);
  }

  .client-voices__panel {
    padding: clamp(48px, 7vh, 80px) clamp(32px, 4vw, 56px);
  }
}

/* ---- Client voices: mobile (<=767px) ---- */
@media (max-width: 767px) {
  .client-voices__inner {
    grid-template-columns: 1fr;
  }

  .client-voices__title {
    padding: clamp(48px, 8vh, 72px) var(--space-md);
  }

  .client-voices__panel {
    padding: clamp(40px, 6vh, 64px) var(--space-md);
  }
}
/* ---- Navigation: drawer threshold -------------------------------------
   The bar carries seven items, two of them long brand labels
   ("DOMA JOURNAL", "DOMA ELITE CLUB"). Measured against the label
   type scale plus the language selector and the page gutters, the row
   stops fitting somewhere around 1200px — so the drawer takes over
   below 1280px instead of the old 767px, and the 1280–1500px band
   runs on a tightened gap. Adding another nav item means re-checking
   both numbers. */
@media (max-width: 1279px) {
  .site-nav__list,
  .site-nav__lang {
    display: none;
  }

  .site-nav__toggle {
    display: block;
  }

  .site-nav {
    justify-content: space-between;
  }
}

@media (min-width: 1280px) and (max-width: 1500px) {
  .site-nav__list {
    gap: 18px;
  }

  .site-nav__link {
    padding: 4px 8px;
  }

  .site-nav__lang {
    margin-left: var(--space-md);
    padding-left: var(--space-md);
  }

  /* Subpages carry the extra "Home" item (~120px more than the home
     page's row), so the same band needs a tighter step to fit. */
  .site-nav--with-home .site-nav__list {
    gap: 12px;
  }

  .site-nav--with-home .site-nav__link {
    padding: 4px 6px;
  }

  .site-nav--with-home .site-nav__lang {
    margin-left: var(--space-sm);
    padding-left: var(--space-sm);
  }
}