/* ═══════════════════════════════════════════════════════════════════════════
   BAND (#49) — повноширинні кольорові секції порталу: hero, секція-смуга,
   CTA-блок («Є запитання? → Записатись на консультацію»).

   Структура:
     section.band [--muted|--info|--dark] [--split]
       > .band__inner                — контейнер max-width
           > .band__content          — текстова частина
               > .band__title        — h1/h2 (рівень за контекстом)
               > .band__text
               > .band__actions      — кнопки/пошук
           > .band__media            — зображення/ілюстрація (у --split)

   Фони: base (білий) · --muted (сірий) · --info (світло-блакитний) ·
   --dark (глибокий синій бренду; текст/фокус — overlay-токени).
   Розкладки: стос (база) · --split (контент + медіа 50/50, <1024px стос).
   Без JS. Токени: component.band.{max-width, surface-dark}.
   ═══════════════════════════════════════════════════════════════════════════ */

.band {
  font-family: var(--uris-font-family-body);
  color: var(--uris-color-semantic-text);
  background: var(--uris-color-semantic-surface);
  padding-block: var(--uris-spacing-12);
}

.band--muted { background: var(--uris-color-semantic-surface-muted); }
.band--info  { background: var(--uris-color-semantic-info); }

.band--dark {
  background: var(--uris-component-band-surface-dark);
  color: var(--uris-color-semantic-overlay-text-strong);
}

.band__inner {
  max-width: var(--uris-component-band-max-width);
  margin-inline: auto;
  padding-inline: var(--uris-spacing-6);
  box-sizing: border-box;
}

/* ── Розкладка --split: контент + медіа ──────────────────────────────────── */
.band--split .band__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--uris-spacing-10);
  align-items: center;
}

@media (max-width: 1023px) {
  .band--split .band__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Розкладка --row: контент ліворуч + дії праворуч (CTA-band) ──────────── */
.band--row .band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--uris-spacing-8);
  align-items: center;
}

.band--row .band__text { margin-block-end: 0; }

@media (max-width: 767px) {
  .band--row .band__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Вміст ───────────────────────────────────────────────────────────────── */
.band__title {
  margin: 0 0 var(--uris-spacing-4);
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-3xl-size);
  line-height: var(--uris-text-3xl-line);
  font-weight: var(--uris-font-weight-bold);
}

/* Hero-масштаб заголовка */
.band--hero .band__title {
  font-size: var(--uris-text-4xl-size);
  line-height: var(--uris-text-4xl-line);
}

.band__text {
  margin: 0 0 var(--uris-spacing-6);
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  max-width: 60ch;
}

.band__text:last-child { margin-block-end: 0; }

.band--dark .band__text { color: var(--uris-color-semantic-overlay-text); }

.band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uris-spacing-3);
}

.band__media {
  min-inline-size: 0;
}

.band__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--uris-radius-md);
}

/* Фокус на темному фоні — білий (правило _shared/README) */
.band--dark :focus-visible {
  outline-color: var(--uris-color-semantic-overlay-text-strong);
}