/* Shared responsive rules, loaded after page and component styles. */
.vh-video-reviews-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1.25rem;
}
.vh-video-reviews-heading h3 { font-size: 1.35rem; }
.vh-video-reviews-heading p { color: var(--muted); font-size: .9rem; }
.vh-reel-card { width: 100%; text-align: left; }
.vh-reel-card__overlay { padding: clamp(.65rem, 2vw, 1.25rem); }
.vh-reel-card .vh-prop-stamp { white-space: normal; max-width: 100%; font-size: .65rem; }
.vh-reels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vh-reel-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
}
.vh-reel-card__caption { font-size: 1rem; font-weight: 800; }
.vh-reel-card:focus-visible { outline: 3px solid var(--vh-green-500); outline-offset: 4px; }
.vh-video-story { text-align: center; }
.vh-video-story .eyebrow { margin-right: 2rem; }
.vh-video-story__title { font-size: 1.25rem; margin-bottom: 1rem; }
.vh-video-story__player {
  display: block;
  width: 100%;
  height: min(65vh, 720px);
  height: min(65dvh, 720px);
  object-fit: contain;
  background: #000;
  border-radius: 14px;
}
@media (max-width: 1080px) {
  .vh-reels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

main, .vh-modal, .vh-mobile-menu {
  overflow-wrap: anywhere;
}

input, select, textarea,
.vh-form-row-2 > *, .vh-catalog-filters > *,
.vh-quiz-options > *, .vh-footer__main > * {
  min-width: 0;
  max-width: 100%;
}

.vh-breadcrumbs, .vh-format-card__badge-row,
.vh-prop-card__price-head {
  flex-wrap: wrap;
}

.vh-format-card__tag {
  max-width: 100%;
  white-space: normal;
}

.vh-mobile-menu {
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: flex-start;
  gap: 2rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
  visibility: hidden;
  transition: transform .55s var(--ease-out-expo), visibility .55s;
}

.vh-mobile-menu.is-open {
  visibility: visible;
}

.vh-mobile-nav, .vh-mobile-menu > div {
  flex-shrink: 0;
}

.vh-mobile-nav a {
  gap: .75rem;
}

.vh-mobile-menu .btn {
  white-space: normal;
  min-width: min(100%, 12rem);
}

body.vh-menu-open {
  overflow: hidden;
}

.vh-modal-backdrop {
  padding-top: max(.75rem, env(safe-area-inset-top));
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}

.vh-modal {
  max-height: calc(100dvh - 2rem) !important;
  overscroll-behavior: contain;
}

.vh-modal__close {
  z-index: 3;
}

.vh-favorite-row, .vh-favorite-summary {
  min-width: 0;
}

.vh-favorite-summary > div {
  min-width: 0;
}

.vh-favorite-summary img, .vh-favorite-row > button {
  flex-shrink: 0;
}

.vh-quiz-option {
  gap: .75rem;
}

@media (max-width: 1200px) {
  .vh-mobile-nav a {
    font-size: clamp(1.1rem, 3vw, 1.85rem);
  }
}

@media (max-width: 1080px) {
  .vh-format-card {
    height: auto !important;
    min-height: 280px !important;
    display: flex;
    align-items: flex-end;
  }
  .vh-format-card__content {
    position: relative;
    width: 100%;
  }
}

@media (max-width: 1200px) {
  /* Let long CTA labels wrap instead of clipping inside the hover mask. */
  .btn .vh-roll-mask, .btn .vh-roll-inner {
    display: inline !important;
    height: auto !important;
    overflow: visible;
    white-space: normal;
    transform: none !important;
  }
  .btn .vh-roll-inner::after {
    display: none;
  }
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .vh-agent-sidebar-card .btn {
    padding-inline: 1rem;
  }
}







@media (max-height: 500px) and (max-width: 1200px) {
  .vh-mobile-menu { padding-top: 5.25rem !important; }
  .vh-mobile-nav { gap: .4rem !important; }
  .vh-mobile-nav a { font-size: 1.1rem !important; padding-bottom: .5rem !important; }
}

/* Touch devices can be wide: actions and descriptions must not require hover. */
@media (hover: none), (pointer: coarse) {
  .vh-prop-card__more { opacity: 1 !important; transform: none !important; }
  .vh-format-card__content { transform: none; }
  .vh-format-card__body {
    width: 100%; min-width: 0; height: auto;
    opacity: 1; transform: none; pointer-events: auto; gap: .75rem;
  }
  .vh-format-card__title { white-space: normal; }
  .vh-formats-strip:hover .vh-format-card:not(:hover) .vh-format-card__price { opacity: 1; }
  .vh-format-card__btn, .vh-prop-fav, .vh-district-btn,
  .vh-filter-pill, .vh-program-pill { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}