/* Doctor Brusov — responsive layer.
   The prototype styles components inline; these overrides restack the main
   grids on narrow viewports, hence the !important. Columns are minmax(0, …):
   a bare 1fr can't shrink below its content and widens the page instead. */

/* Burger + mobile menu are hidden on desktop by inline styles; the classes
   below flip visibility on small screens. */
@media (max-width: 960px) {
  .db-nav { display: none !important; }
  .db-header-lang { display: none !important; }
  .db-header-spacer { display: block !important; }
  .db-burger { display: inline-flex !important; }

  .db-hero-grid,
  .db-strip-grid,
  .db-booking-grid,
  .db-contact-grid,
  .db-faq-grid,
  .db-pricing-grid,
  .db-svc-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .db-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .db-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .db-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .db-section-inner { padding-left: var(--gutter-mobile) !important; padding-right: var(--gutter-mobile) !important; }
  .db-header-inner { padding: 0 var(--gutter-mobile) !important; gap: 14px !important; }
  .db-hero-copy { padding: 48px var(--gutter-mobile) 40px !important; }
  .db-hero-media { min-height: 280px !important; }
}

@media (max-width: 880px) {
  .db-header-phone { display: none !important; }
}

@media (max-width: 640px) {
  .db-grid-3,
  .db-grid-4,
  .db-grid-2,
  .db-form-grid,
  .db-footer-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .db-hero-copy h1,
  .db-svc-grid h1 { font-size: var(--text-display-3) !important; }
  .db-section-inner { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Booking steps: number above the label, so all three fit a phone. */
  .db-steps > li { flex-direction: column !important; gap: 6px !important; padding: 10px 6px !important; }

  /* Booking panels: the page gutter is enough padding on a phone. */
  .db-strip-grid > div,
  .db-booking-grid > div:first-child > div,
  .db-booking-grid > div:last-child { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Narrow phones: logo + booking button + burger on one line. */
@media (max-width: 400px) {
  .db-header-inner { gap: 6px !important; }
  .db-header-inner .db-wordmark-name { font-size: 20px !important; }
  .db-header-cta { padding: 9px 10px !important; }
  .db-booking-nav > button { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 350px) {
  .db-header-inner { padding: 0 14px !important; }
  .db-section-inner { padding-left: 14px !important; padding-right: 14px !important; }
  .db-header-inner .db-wordmark-name { font-size: 17px !important; }
  .db-header-cta { padding: 8px !important; letter-spacing: 0.04em !important; }
  .db-hero-copy h1,
  .db-svc-grid h1 { font-size: 28px !important; }
  .db-strip-grid > div,
  .db-booking-grid > div:first-child > div,
  .db-booking-grid > div:last-child { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Date strip: 10 workdays in a row. In a narrow strip (phones) they become two
   rows of five — finger-sized cells. "N free" wraps under the date; RU
   "свободно" is too long for a one-row cell or a small phone, so it's dropped
   there. The row scrolls as a last resort instead of widening the page. */
.db-date-strip { container-type: inline-size; }
@container (max-width: 480px) {
  .db-date-strip > div:last-child { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .db-date-strip button { padding-left: 2px !important; padding-right: 2px !important; }
}
@container (max-width: 300px) {
  .db-date-free:lang(ru) { display: none; }
}
@container (min-width: 481px) and (max-width: 660px) {
  .db-date-free:lang(ru) { display: none; }
}

/* Long single words (RU «Профессиональная») must never push the page wider. */
.db-svc-grid h1 { overflow-wrap: break-word; }

/* FAQ is native <details>: hide the browser marker, turn the plus into a cross. */
.db-faq summary { list-style: none; }
.db-faq summary::-webkit-details-marker { display: none; }
.db-faq-icon { transition: transform var(--dur-fast) var(--ease-standard); }
.db-faq details[open] .db-faq-icon { transform: rotate(45deg); }

/* Price-group tabs can outgrow a phone screen — let them scroll. */
.db-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.db-scroll-x > * { min-width: max-content; }

/* Guard: nothing may widen the page sideways (iOS then zooms the whole layout
   out). clip, unlike hidden, leaves the sticky header working. */
html { overflow-x: clip; }