/* footer.css — site footer (Nobil).
   Layout: a single stacked column (brand on top, then the link sections with
   separators) up to 1024; two columns (brand on the left, a 3-column link grid
   on the right) from 1025 up. Flex + grid only — no absolute positioning.
   Canon breakpoints: 768 / 1024 / 1440 / 1920.
   Gutters are padding while stacked (no fixed width); the 2-column desktop is a
   fixed-width grid pinned to the page's left grid margin (right margin auto). */

/* the footer is a section on the front page's immersive scroll — it is NOT a
   snap target, so it takes its natural content height (override the 100svh that
   .home-section sets, which would otherwise leave empty space under the short
   2-column footer on wide screens) */
.home-footer-section {
  min-height: 0;
  background: #1d1d1d;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.site-footer {
  --footer-bg: #1d1d1d;
  --footer-accent: #af6c37;
  --footer-text: #fff;
  --footer-separator: rgba(255, 255, 255, 0.12);
  --footer-service-logo-filter: brightness(0) saturate(100%) invert(45%) sepia(16%) saturate(1507%) hue-rotate(344deg) brightness(91%) contrast(85%);
  --footer-white-icon-filter: brightness(0) invert(1);

  background: var(--footer-bg);
  color: var(--footer-text);
}

/* ============================================================
   Stacked column — mobile base (<=767)
   ============================================================ */
.site-footer__inner {
  padding: 56px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.site-footer__brand {
  width: 100%;
  max-width: 343px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.site-footer__main-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.site-footer__service-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-footer__service-logo {
  display: block;
  object-fit: contain;
  filter: var(--footer-service-logo-filter);
}

.site-footer__service-logo--restaurant {
  width: 103.28px;
  height: 62.79px;
}

.site-footer__service-logo--dessange {
  width: 82.43px;
  height: 67.44px;
  /* Лого Dessange — белое (остальные логотипы услуг остаются бронзовыми). */
  filter: var(--footer-white-icon-filter);
}

.site-footer__service-logo--spa {
  width: 89.89px;
  height: 65.38px;
}

.site-footer__content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.site-footer__section {
  margin: 0 0 21px;
  padding: 0 0 21px;
  border-bottom: 1px solid var(--footer-separator);
}

.site-footer__section--follow {
  margin-bottom: 0;
}

.site-footer__heading {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--footer-accent);
}

.site-footer__text,
.site-footer__link {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  color: var(--footer-text);
}

.site-footer__list {
  display: grid;
  gap: 8px;
}

.site-footer__list--contact {
  gap: 14px;
}

.site-footer__link {
  width: fit-content;
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--footer-accent);
}

.site-footer__link--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-footer__icon {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: var(--footer-white-icon-filter);
}

.site-footer__icon--telegram,
.site-footer__icon--whatsapp,
.site-footer__icon--viber {
  width: 16.67px;
  height: 16.67px;
}

.site-footer__icon--email {
  width: 15px;
  height: 12px;
}

/* stacked: Instagram is listed before Facebook (markup order is FB, then Inst) */
.site-footer__section--follow .site-footer__link--instagram {
  order: -1;
}

/* ============================================================
   Stacked column — tablet 768-1023 (wider gutters)
   ============================================================ */
@media (min-width: 768px) {
  .site-footer__inner {
    padding-inline: 32px;
  }
}

/* ============================================================
   Stacked column — only at 1024 (cap + centre the column). Below 1025 the footer
   is the stacked "mobile" layout; from 1025 the two-column desktop below wins.
   ============================================================ */
@media (min-width: 1024px) {
  .site-footer__inner {
    max-width: 1024px;
    margin-inline: auto;
    padding-inline: 48px;
  }
}

/* ============================================================
   Two columns — desktop >=1025 (brand left + 3-col link grid).
   Pinned to the page's left grid margin (≈155 at 1280 → 195 on wide screens),
   right margin auto — aligned to the grid, not centred. These are the >=1280 macet
   widths; below 1280 they overflow, so the 1025-1279 block right after pulls the
   left margin + brand↔links gap in until they fit. >=1440 / >=1920 scale them up.
   ============================================================ */
@media (min-width: 1025px) {
  .site-footer__inner {
    max-width: none;
    width: 1050px;
    margin-left: clamp(96px, 12.15vw, 195px);
    margin-right: auto;
    padding: 126px 0 96px;
    display: grid;
    grid-template-columns: 360px 539px;
    column-gap: 115px;
    align-items: start;
  }

  .site-footer__brand {
    width: 360px;
    max-width: none;
    margin: 0;
    gap: 40px;
  }

  .site-footer__main-logo {
    width: 360px;
    height: 167px;
  }

  .site-footer__service-logos {
    width: 360px;
    justify-content: flex-start;
    gap: 39px;
  }

  .site-footer__service-logo--restaurant {
    width: 104px;
    height: 63.25px;
  }

  .site-footer__service-logo--dessange {
    width: 83px;
    height: 67.9px;
  }

  .site-footer__service-logo--spa {
    width: 91px;
    height: 66.2px;
  }

  .site-footer__content {
    width: 539px;
    display: grid;
    grid-template-columns: 174px 154px 155px;
    column-gap: 28px;
    row-gap: 38px;
  }

  .site-footer__section {
    margin: 0;
    padding: 0;
    border-bottom: 0;
  }

  .site-footer__section--contact {
    grid-column: 1;
    grid-row: 1;
  }

  .site-footer__section--address {
    grid-column: 2;
    grid-row: 1;
  }

  .site-footer__section--see {
    grid-column: 3;
    grid-row: 1;
  }

  .site-footer__section--terms {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer__section--follow {
    grid-column: 2;
    grid-row: 2;
  }

  .site-footer__heading {
    margin-bottom: 21px;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 3.2px;
  }

  .site-footer__text,
  .site-footer__link {
    line-height: 22px;
  }

  .site-footer__list {
    gap: 10px;
  }

  /* 2-column: Facebook before Instagram (natural markup order) */
  .site-footer__section--follow .site-footer__link--instagram {
    order: 0;
  }
}

/* ============================================================
   Two columns — laptop 1025-1279 (fit the >=1280 grid below its design width).
   The >=1280 inner (1050 wide + up to ~155 left margin) overflows under 1280, so
   shrink to fit-content and pull the left margin + brand↔links gap in. Both ramp
   up to meet the >=1280 values exactly at 1280 — no jump at the breakpoint.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1279px) {
  .site-footer__inner {
    width: fit-content;
    margin-left: clamp(48px, calc(48px + (100vw - 1025px) * 0.42), 155px);
    column-gap: clamp(56px, calc(56px + (100vw - 1025px) * 0.231), 115px);
  }
}

/* ============================================================
   Two columns — desktop >=1440 (full widths)
   ============================================================ */
@media (min-width: 1440px) {
  .site-footer__inner {
    width: 1157px;
    grid-template-columns: 422px 601px;
    column-gap: 134px;
  }

  .site-footer__brand {
    width: 422px;
    gap: 47px;
  }

  .site-footer__main-logo {
    width: 422px;
    height: 196px;
  }

  .site-footer__service-logos {
    width: 422px;
    gap: 47px;
  }

  .site-footer__service-logo--restaurant {
    width: 122.15px;
    height: 74.28px;
  }

  .site-footer__service-logo--dessange {
    width: 97.52px;
    height: 79.8px;
  }

  .site-footer__service-logo--spa {
    width: 106.34px;
    height: 77.34px;
  }

  .site-footer__content {
    width: 601px;
    column-gap: 59px;
    row-gap: 59px;
  }

  .site-footer__heading {
    margin-bottom: 24px;
  }

  .site-footer__list {
    gap: 14px;
  }
}

/* ============================================================
   1280-1919: centre the footer in the site content band (same container as the
   header) with the design's own column gap (115px at 1280-1439, 134px at
   1440-1919). Pinning the brand + links to BOTH band edges (space-between) forced
   the gap to be "band - columns", which blew out to ~300-800px as the band grew;
   centring keeps a tight, constant gap and stays balanced (equal slack on both
   sides) at every width. (1025-1279 stays the shrink-to-fit laptop layout; >=1920
   has its own wider grid — so this is bounded to 1280-1919.)
   ============================================================ */
@media (min-width: 1280px) and (max-width: 1919px) {
  .site-footer__inner {
    width: var(--site-content-width);
    margin-inline: auto;
    justify-content: center;
  }
}

/* ============================================================
   Two columns — XL >=1920 (wider columns + logos)
   ============================================================ */
@media (min-width: 1920px) {
  .site-footer__inner {
    width: 1530px;
    /* Beyond 1920 the page content band caps at 1842 and centres, so its left
       gutter grows (~359px at 2560). The clamp(…,195px) margin would stay at 195
       and drift the footer LEFT of the grid. Lock it to the grid instead: the
       band's left edge (--site-content-offset) + one-column indent (156px). At
       1920 that is 39+156 = 195 (unchanged); 1530+156*2 = 1842 = the band, so the
       footer fills columns 2–11 — it starts on the grid's second column. */
    margin-left: calc(var(--site-content-offset) + 156px);
    padding-top: 152px;
    grid-template-columns: 445px 773px;
    column-gap: 176px;
  }

  .site-footer__brand {
    width: 445px;
    gap: 50px;
  }

  .site-footer__main-logo {
    width: 445px;
    height: 206.78px;
  }

  .site-footer__service-logos {
    width: 445px;
    gap: 50px;
  }

  .site-footer__service-logo--restaurant {
    width: 128.79px;
    height: 78.31px;
  }

  .site-footer__service-logo--dessange {
    width: 102.8px;
    height: 84.1px;
  }

  .site-footer__service-logo--spa {
    width: 112.1px;
    height: 81.53px;
  }

  .site-footer__content {
    width: 773px;
    column-gap: 136px;
  }
}