/* ============================================================
   ARTICLE DETAIL PAGES — articles/article-*.html.
   Figma: node 2403:1850 "статья" — single centered content column
   (no sidebar), full-width rounded hero photo below the title (no
   dark overlay/gradient — the old full-bleed photo-band hero this
   replaced needed one for text contrast, this one doesn't since the
   title sits on plain white background above the image), and a
   blue "booking band" (color-inverted variant of the homepage's
   .sec-booking) closing out the page before the shared footer.
   ============================================================ */

.article-top { display: flex; flex-direction: column; gap: 24px; margin-top: var(--header-h); padding-top: 80px; padding-bottom: 40px; }
.article-meta-simple { font-size: 15px; font-weight: 400; color: rgba(48,54,46,0.6); letter-spacing: -0.02em; line-height: 1.4; margin: 0; }
.article-title-simple { font-size: clamp(32px, 3.33vw, 64px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.05; margin: 0; max-width: 1200px; font-style: normal; }

.article-hero-img { padding-top: 20px; padding-bottom: 60px; }
.article-hero-img__frame { width: 100%; height: clamp(280px, 31.25vw, 600px); border-radius: 24px; overflow: hidden; }
.article-hero-img__frame img,
.article-hero-img__frame video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.article-content-wrap { display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; }
.article-content { display: flex; flex-direction: column; gap: 48px; width: min(800px, 100%); }
.article-section { display: flex; flex-direction: column; gap: 16px; }
.article-section h3 { font-size: 22px; font-weight: 600; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.2; margin: 0; font-style: normal; }
.article-section p { font-size: 18px; font-weight: 300; color: var(--c-muted); line-height: 1.6; margin: 0; }
.article-inline-img { width: 100%; height: clamp(220px, 22.9vw, 440px); border-radius: 16px; overflow: hidden; }
.article-inline-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; color: var(--c-accent); text-decoration: none; transition: gap 0.2s; }
.back-link:hover { gap: 12px; }

/* ── Booking band — same .booking-* structure/JS as the homepage's
   .sec-booking, color-inverted to the accent blue background Figma
   specifies for this page. Scoped overrides only; layout rules
   (flex/gap/responsive stacking) are inherited from forms.css. ── */
.article-booking { background: var(--c-accent); padding: clamp(48px, 6vw, 80px) 0; }
.article-booking .booking-heading,
.article-booking .booking-desc { color: #fff; }
.article-booking .booking-field label,
.article-booking .booking-svc-label { color: #fff; }
.article-booking .booking-field input { background: transparent; color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.article-booking .booking-field input::placeholder { color: rgba(255,255,255,0.55); }
.article-booking .booking-svc-wrap { border-bottom-color: rgba(255,255,255,0.6); }
.article-booking .booking-svc-sel { background: transparent; color: #fff; }
.article-booking .booking-svc-wrap svg { stroke: #fff; }
.article-booking .booking-submit { background: #fff; color: var(--c-muted); }
.article-booking .booking-submit:hover { background: #E9E5DD; }
.article-booking .contacts-bar { border-bottom-color: rgba(255,255,255,0.6); }
.article-booking .contacts-bar p,
.article-booking .contacts-bar a { color: #fff; }

@media (max-width: 767px) {
  footer.site-footer { display: none !important; }

  .article-top { padding-top: 32px; padding-bottom: 24px; gap: 12px; }
  .article-title-simple { font-size: clamp(26px, 7.2vw, 40px); }
  .article-meta-simple { font-size: 13px; }

  .article-hero-img { padding-top: 12px; padding-bottom: 36px; }
  .article-hero-img__frame { height: clamp(200px, 56vw, 320px); border-radius: 16px; }

  .article-content-wrap { padding-bottom: 48px; }
  .article-content { gap: 32px; }
  .article-section { gap: 10px; }
  .article-section h3 { font-size: 18px; }
  .article-section p { font-size: 16px; line-height: 1.65; }
  .article-inline-img { height: clamp(180px, 58vw, 280px); border-radius: 12px; }
  .back-link { font-size: 15px; }

  .article-booking { padding: 44px 0; }
}

/* ── Хлебные крошки и переход к соседним статьям ───────────────────
   Из статьи не было выхода ни вверх по структуре, ни к соседнему
   материалу — только кнопкой «назад» в браузере. */
.article-bc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: var(--header-h); padding-top: clamp(20px, 2.2vw, 32px); font-size: clamp(13px, 0.83vw, 15px); letter-spacing: -0.02em; }
.article-bc a { color: var(--c-muted); text-decoration: none; transition: color 0.2s ease; }
.article-bc span { color: rgba(48,54,46,0.4); }
.article-bc__current { color: var(--c-text); }
@media (hover: hover) and (pointer: fine) { .article-bc a:hover { color: var(--c-accent); } }
/* крошки уже отступили от шапки — заголовку второй отступ не нужен */
.article-bc + .article-top { margin-top: 0; padding-top: clamp(16px, 1.7vw, 28px); }

.article-nav { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(12px, 1.25vw, 24px); padding-top: clamp(32px, 3.3vw, 64px); padding-bottom: clamp(32px, 3.3vw, 64px); }
.article-nav__all { grid-column: 1 / -1; justify-self: center; font-size: clamp(14px, 0.88vw, 17px); font-weight: 500; color: var(--c-accent); text-decoration: none; }
.article-nav__link { display: flex; align-items: center; gap: clamp(10px, 0.83vw, 16px); padding: clamp(16px, 1.46vw, 28px); border: 1px solid #ededed; border-radius: clamp(12px, 1.04vw, 20px); text-decoration: none; background: #fff; transition: border-color 0.25s ease, background 0.25s ease; }
.article-nav__link--next { justify-content: flex-end; text-align: right; }
@media (hover: hover) and (pointer: fine) { .article-nav__link:hover { border-color: rgba(141,165,133,0.5); background: rgba(141,165,133,0.05); } }
.article-nav__arrow { flex-shrink: 0; width: clamp(32px, 2.29vw, 44px); height: clamp(32px, 2.29vw, 44px); border-radius: 50%; background: rgba(141,165,133,0.12); color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.article-nav__arrow svg { width: 55%; height: 55%; }
.article-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.article-nav__label { font-size: clamp(12px, 0.73vw, 14px); color: var(--c-muted); letter-spacing: -0.02em; }
.article-nav__title { font-size: clamp(15px, 0.94vw, 18px); font-weight: 500; color: var(--c-text); letter-spacing: -0.03em; line-height: 1.3; overflow-wrap: break-word; }
.article-nav__spacer { display: block; }

@media (max-width: 700px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__spacer { display: none; }
  .article-nav__link--next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}