/* Homepage design-system layer.
   Loaded last. Decorative animation and media layout remain in style.css. */

:is(
  .vh-video-section,
  .vh-formats-section,
  .vh-booking,
  .vh-price-calc,
  .vh-reviews-section,
  .vh-faq,
  .vh-contacts-section
) {
  color: var(--vh-text);
  font-family: var(--vh-font-family);
}

/* ===== Consistent section headings ===== */
:is(
  .vh-video-section__title,
  .vh-formats-title,
  .vh-booking__title,
  .vh-price-calc__title,
  .vh-reviews-title,
  .vh-faq__title,
  .vh-contacts-section__title
) {
  max-width: 16ch;
  margin-inline: auto;
  color: var(--vh-text-strong);
  font-family: var(--vh-font-display);
  font-size: var(--vh-type-h2) !important;
  line-height: var(--vh-leading-heading) !important;
  font-weight: var(--vh-weight-heading) !important;
  letter-spacing: -.025em !important;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

:is(
  .vh-video-section__title,
  .vh-formats-title,
  .vh-booking__title,
  .vh-price-calc__title,
  .vh-reviews-title,
  .vh-faq__title,
  .vh-contacts-section__title
) > :is(span, strong) {
  display: block;
  color: inherit;
  font: inherit !important;
  letter-spacing: inherit !important;
}

:is(
  .vh-video-section__title,
  .vh-formats-title,
  .vh-booking__title,
  .vh-price-calc__title,
  .vh-reviews-title,
  .vh-faq__title,
  .vh-contacts-section__title
) > span {
  color: var(--vh-accent);
}

:is(
  .vh-video-section__subtitle,
  .vh-formats-description,
  .vh-booking__description,
  .vh-price-calc__description,
  .vh-reviews-subtitle,
  .vh-faq__description,
  .vh-contacts-section__description
) {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--vh-text-muted);
  font-family: var(--vh-font-body);
  font-size: var(--vh-type-lead) !important;
  line-height: 1.55 !important;
  font-weight: var(--vh-weight-medium) !important;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

:is(
  .vh-video-section__subtitle,
  .vh-formats-description,
  .vh-booking__description,
  .vh-price-calc__description,
  .vh-reviews-subtitle,
  .vh-faq__description,
  .vh-contacts-section__description
) br {
  display: none;
}

:is(
  .vh-video-section__subtitle,
  .vh-formats-description,
  .vh-booking__description,
  .vh-price-calc__description,
  .vh-reviews-subtitle,
  .vh-faq__description,
  .vh-contacts-section__description
) b {
  color: var(--vh-text-strong);
  font-weight: var(--vh-weight-semibold);
}

/* ===== Shared text hierarchy ===== */
.vh-benefit-text h3,
.vh-format-content h3,
.vh-booking__steps h3,
.vh-booking__included h3,
.vh-price-calc__included h3,
.vh-faq__card h3,
.vh-contact-card__content strong {
  color: var(--vh-text-strong);
  font-family: var(--vh-font-display);
  font-weight: var(--vh-weight-heading) !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.vh-benefit-text p,
.vh-booking__steps p,
.vh-booking__included p,
.vh-price-calc__note,
.vh-faq__answer p,
.vh-faq__card p,
.vh-contact-card__content > span {
  color: var(--vh-text-muted);
  font-family: var(--vh-font-body);
  font-weight: var(--vh-weight-regular) !important;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* ===== Benefits ===== */
.vh-benefit-card {
  border-color: var(--vh-border);
  border-radius: var(--vh-radius-xl);
}

.vh-benefit-text h3 {
  line-height: 1.15 !important;
}

.vh-benefit-text p {
  line-height: 1.52;
}

/* ===== Video and formats ===== */
.vh-video-card__content strong,
.vh-format-subtitle,
.vh-format-list,
.vh-video-card__content p {
  font-family: var(--vh-font-family);
}

.vh-video-card__content strong {
  font-weight: var(--vh-weight-heading);
  overflow-wrap: break-word;
}

.vh-video-card__content p,
.vh-format-list {
  font-weight: var(--vh-weight-regular);
}

.vh-format-card {
  border-radius: var(--vh-radius-xl);
}

.vh-format-content .vh-format-title {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.vh-format-select,
.vh-booking__included > a,
.vh-price-calc__btn,
.vh-reviews-avito-button,
.vh-faq__cta,
.vh-faq__phone,
.vh-contact-submit {
  min-height: var(--vh-control-height-lg) !important;
  padding-inline: var(--vh-control-padding-lg) !important;
  border-radius: var(--vh-radius-pill) !important;
  font-family: var(--vh-font-family) !important;
  font-size: var(--vh-control-font-size) !important;
  line-height: var(--vh-control-line-height) !important;
  font-weight: var(--vh-weight-button) !important;
  letter-spacing: 0 !important;
}

/* ===== Booking ===== */
.vh-booking__steps article,
.vh-booking__included {
  border-color: var(--vh-border);
  border-radius: var(--vh-radius-lg);
  background: var(--vh-surface);
  box-shadow: var(--vh-shadow-sm);
}

.vh-booking__steps article > b {
  color: var(--vh-accent-light);
  font-weight: var(--vh-weight-heading);
}

/* ===== Calculator controls ===== */
.vh-price-calc__panel,
.vh-price-calc__result-card {
  border-color: var(--vh-border);
  border-radius: var(--vh-radius-xl);
  background: var(--vh-surface);
  box-shadow: var(--vh-shadow-md);
}

.vh-price-calc__field > label,
.vh-price-calc__label-row label,
.vh-contact-field > span {
  color: var(--vh-text-muted);
  font-family: var(--vh-font-family);
  font-weight: var(--vh-weight-label) !important;
}

.vh-price-calc :is(input, select, textarea),
.vh-contact-form :is(input, select, textarea) {
  border-color: var(--vh-border);
  border-radius: var(--vh-radius-md);
  color: var(--vh-text);
  background: var(--vh-surface-soft);
  font-family: var(--vh-font-family);
  font-weight: var(--vh-weight-medium);
}

.vh-price-calc :is(input, select, textarea):focus,
.vh-contact-form :is(input, select, textarea):focus {
  border-color: var(--vh-border-accent);
  background: var(--vh-surface-elevated);
  box-shadow: 0 0 0 3px var(--vh-accent-soft);
}

.vh-price-calc__discount-toggle {
  font-family: var(--vh-font-family);
  font-weight: var(--vh-weight-button);
}

.vh-price-calc__circle-action {
  border-radius: var(--vh-radius-pill) !important;
}

/* ===== Reviews ===== */
.vh-reviews-stat,
.vh-reviews-avito-cta {
  color: var(--vh-text);
}

.vh-reviews-stat strong {
  font-weight: var(--vh-weight-heading);
}

/* ===== FAQ ===== */
.vh-faq__item,
.vh-faq__card {
  border-color: var(--vh-border);
  border-radius: var(--vh-radius-lg);
  background: var(--vh-surface);
  box-shadow: var(--vh-shadow-sm);
}

.vh-faq__question {
  min-height: var(--vh-control-height-lg);
  color: var(--vh-text-strong);
  font-family: var(--vh-font-family);
  font-weight: var(--vh-weight-heading);
}

.vh-faq__question span {
  font: inherit !important;
  overflow-wrap: break-word;
}

.vh-faq__answer p {
  max-width: 72ch;
  line-height: 1.62;
}

/* ===== Contacts ===== */
.vh-contact-card,
.vh-contact-form {
  border-color: var(--vh-border);
  border-radius: var(--vh-radius-lg);
  background: var(--vh-surface);
  box-shadow: var(--vh-shadow-sm);
}

.vh-contact-card__content small {
  color: var(--vh-text-soft);
  font-weight: var(--vh-weight-label);
}

.vh-contact-card__content strong {
  overflow-wrap: anywhere;
}

.vh-contact-submit {
  width: 100%;
}

/* ===== Prevent local overflow ===== */
:is(
  .vh-video-card,
  .vh-format-card,
  .vh-booking__steps article,
  .vh-booking__included,
  .vh-price-calc__panel,
  .vh-price-calc__result-card,
  .vh-faq__item,
  .vh-faq__card,
  .vh-contact-card,
  .vh-contact-form
) {
  min-width: 0;
}

@media (max-width: 720px) {
  :is(
    .vh-video-section__title,
    .vh-formats-title,
    .vh-booking__title,
    .vh-price-calc__title,
    .vh-reviews-title,
    .vh-faq__title,
    .vh-contacts-section__title
  ) {
    max-width: 100%;
  }

  :is(
    .vh-video-section__subtitle,
    .vh-formats-description,
    .vh-booking__description,
    .vh-price-calc__description,
    .vh-reviews-subtitle,
    .vh-faq__description,
    .vh-contacts-section__description
  ) {
    max-width: 34ch;
  }

  .vh-format-select,
  .vh-booking__included > a,
  .vh-price-calc__btn,
  .vh-reviews-avito-button,
  .vh-faq__cta,
  .vh-faq__phone,
  .vh-contact-submit {
    width: 100%;
    white-space: normal;
  }

  .vh-booking__included,
  .vh-price-calc__panel,
  .vh-price-calc__result-card,
  .vh-faq__card,
  .vh-contact-form {
    border-radius: var(--vh-radius-lg);
  }
}

@media (max-width: 390px) {
  .vh-video-card__content strong,
  .vh-contact-card__content strong {
    font-size: 18px;
  }

  .vh-faq__question {
    padding-inline: var(--vh-space-4);
  }
}