/* =========================================================
   Bounce Back Media — Travel Agent Page (travel-agent.php)
   Page-level layout helpers only
   ========================================================= */

html, body { overflow-x: hidden; }

.hero-wrap { background: var(--bbm-white); }

.hero-card {
  border-left: 6px solid var(--bbm-purple);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
}

.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.object-fit-cover { object-fit: cover; }

.filter-container {
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 10px;
}

.btn-filter {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: .45rem 1.05rem;
  font-weight: 700;
  font-size: .9rem;
  margin-right: .5rem;
  color: var(--bbm-ink);
}
.btn-filter.active {
  background: var(--bbm-purple);
  color: #fff;
  border-color: var(--bbm-purple);
}

.play-overlay {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.dark-panel {
  background: var(--bbm-ink);
  color: #fff;
  border-radius: 2.5rem 2.5rem 0 0;
}
.dark-panel .text-muted,
.dark-panel .opacity-75 {
  color: rgba(255,255,255,.72) !important;
}
.dark-panel a { color: #fff; }

/* Custom Portrait Ratio for Vertical Videos */
.ratio-9x16 {
  --bs-aspect-ratio: 177.77%; /* 16 divided by 9 */
}

/* Ensure the image/video fills the vertical container correctly */
.object-fit-cover {
  object-fit: cover;
}