/* ==========================================================================
   AVESALON — responsive.css
   Mobile-first: базові стилі описані у style.css / components.css,
   тут — надбудова для планшета (≥481px) та десктопа (≥769px).
   ========================================================================== */

/* ---------- Планшет: 481px+ ----------------------------------------------- */
@media (min-width: 481px) {
  .container { padding-inline: var(--sp-3); }

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

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

  .hero__facts { gap: var(--sp-1) var(--sp-6); }

  .form--split {
    grid-template-columns: repeat(2, 1fr);
  }
  .form--split .field--wide,
  .form--split .form__actions,
  .form--split .form__note,
  .form--split .form__result { grid-column: 1 / -1; }

  .carousel__slide figcaption { padding: var(--sp-6) var(--sp-4) var(--sp-3); }
  .map iframe { height: 380px; }
}

/* ---------- Десктоп: 769px+ ----------------------------------------------- */
@media (min-width: 769px) {
  :root { --header-h: 76px; }

  .section { padding-block: var(--sp-8); }
  .section--tight { padding-block: var(--sp-6); }

  /* Навігація стає горизонтальною */
  .nav {
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    max-height: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
  }

  .nav__link {
    position: relative;
    border-bottom: 0;
    padding: 10px 14px;
    font-size: .8125rem;
    letter-spacing: .14em;
  }
  .nav__link:hover { padding-left: 14px; }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 1px;
    background: var(--c-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__cta { display: none; }
  .nav-toggle { display: none; }
  .header__cta { display: inline-flex; }

  .brand__mark { width: 52px; height: 52px; }
  .brand__text strong { font-size: 1.2rem; }
  .brand__text em { font-size: 10px; }

  /* Hero у дві колонки */
  .hero { padding-block: var(--sp-8) var(--sp-12); }
  .hero__inner {
    grid-template-columns: 1.05fr .95fr;
    gap: var(--sp-8);
  }
  .hero__logo {
    width: 180px;
    margin-inline: 0;
  }
  .hero__collage { gap: var(--sp-3); }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--sp-3); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split--wide-left { grid-template-columns: 1.25fr .75fr; }
  .split--wide-right { grid-template-columns: .75fr 1.25fr; }

  .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }

  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-6); }

  .carousel__btn { width: 52px; height: 52px; }
  .carousel__btn--prev { left: 16px; }
  .carousel__btn--next { right: 16px; }

  .map iframe { height: 440px; }

  .to-top { right: var(--sp-4); bottom: var(--sp-4); }
}

/* ---------- Широкий десктоп: 1200px+ -------------------------------------- */
@media (min-width: 1200px) {
  .hero__logo { width: 200px; }
  .cta-band { padding-block: var(--sp-8); }
}

/* ---------- Дрібні екрани: до 360px --------------------------------------- */
@media (max-width: 360px) {
  .brand__text strong { font-size: .95rem; letter-spacing: .1em; }
  .btn { padding: 11px 18px; font-size: .9375rem; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Друк ----------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .to-top, .carousel__btn, .nav-toggle, .cta-band { display: none !important; }
  a { color: #000; text-decoration: underline; }
  .card, .hours { border-color: #999; }
}