/* ==========================================================================
   vxb — Netflix-style browse header for styles/default
   The `cateselector` component (Movies / TV Shows / category / all-* pages):
   big page title with a compact Genres dropdown beside it, Netflix-style
   multi-column genre panel. Consumes only existing customizer variables
   (--vod-*), hovers included (color-mix with rgba fallbacks); vodlix.css is
   untouched and loads before this file.
   ========================================================================== */

.vxb {
  padding-top: 8px;
}
.vxb__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 4px;
}
.vxb__titleWrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.vxb__title {
  margin: 0;
  color: var(--vod-white-color);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Genres / Languages select button — Netflix's dark bordered box
   -------------------------------------------------------------------------- */
/* DS ghost pill — the browse filter is a control like any other */
.vxb__select {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 10px 4px 16px;
  background-color: transparent;
  border: 1px solid var(--vxl-line-strong);
  border-radius: var(--vxl-radius-pill);
  color: var(--vod-white-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: background-color var(--vxl-dur-1) var(--vxl-ease), border-color var(--vxl-dur-1) var(--vxl-ease);
}
.vxb__select:hover,
.vxb__select:focus {
  background-color: var(--vxl-btn-soft);
  border-color: var(--vxl-line-strong);
  color: var(--vod-white-color);
  outline: none;
  box-shadow: none;
}
.vxb__select .mdi,
.vxb__select .vxm-ico {
  font-size: 20px;
  line-height: 1;
}
/* Bootstrap's .dropdown-toggle caret is replaced by the mdi icon */
.vxb__select.dropdown-toggle::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Genre panel — dark multi-column list
   -------------------------------------------------------------------------- */
.vxb__menu.dropdown-menu {
  min-width: 440px;
  margin-top: 6px;
  padding: 12px 4px;
  background-color: rgba(0, 0, 0, 0.92);
  background-color: color-mix(in srgb, var(--vod-menu-bg) 95%, transparent);
  border: 1px solid var(--vxl-line-strong);
  border-radius: var(--vxl-radius-md); /* DS float: hairline + real radius */
  box-shadow: var(--vxl-shadow-2);
}
/* Open motion: the storefront-wide dropdown drop-in in components.css
   (.dropdown-menu.show → vx-menu-in) covers this panel. */
.vxb__cols {
  column-count: 3;
  column-gap: 0;
}
.vxb__item {
  display: block;
  break-inside: avoid;
  padding: 5px 18px;
  color: var(--vod-white-color);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vxb__item:hover,
.vxb__item:focus {
  color: var(--vod-white-color);
  text-decoration: underline;
}

.vxb__desc {
  margin: 6px 0 0;
  max-width: 720px;
  color: var(--vod-grey-text);
  font-size: 14px;
}
.vxb__icon {
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .vxb__bar {
    gap: 10px 12px;
  }
  .vxb__menu.dropdown-menu {
    min-width: min(320px, 92vw);
  }
  .vxb__cols {
    column-count: 2;
  }
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */
body.rtl .vxb__select {
  padding: 4px 14px 4px 8px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vxb__select {
    transition: none;
  }
}

/* ==========================================================================
   home_hero="fullbleed" — SEARCH + MY LIST poster walls (formerly the
   cinematic layout's, moved here in 26.482.0; applies at every width, as it
   did). The reference's search screen is a big rounded field over rows of
   2:3 posters with NO captions: the poster carries the title. The phone
   orientation itself comes from _grid_layout.html (usePortraitCards).
   ========================================================================== */
/* ======================================================================
   SEARCH + MY LIST — poster walls.

   The reference's search screen is a big rounded field over rows of 2:3
   posters, three across, with NO captions: the poster carries the title.
   `_grid_layout` now passes an orientation down for this layout, so the rows
   render portrait; the rest is here.

   Dropping the caption is not just fidelity. At a third of the width almost
   every title overflows, and an overflowing title on a phone gets the shared
   marquee — so the alternative was a wall of nine independently scrolling
   text tickers. The title is still in the DOM and still read aloud; it is
   hidden from sight only where the artwork already states it.
   ====================================================================== */
body[data-lo-home-hero="fullbleed"].page-search #searchPage .videoBlock p.title,
body[data-lo-home-hero="fullbleed"].page-content_list #lists .videoBlock p.title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The card's action strip goes too, and this is a BUG FIX rather than styling:
   it carries a Play link straight to /watch/, it is a hover affordance with no
   hover on touch, and on a poster wall it sat over the artwork — so tapping a
   poster started playback instead of opening the title. The poster's own link
   (to the detail page) is now the only target on the card, which is what every
   other template does and what the reference does. */
body[data-lo-home-hero="fullbleed"].page-search #searchPage .videoBlock .videoInfo,
body[data-lo-home-hero="fullbleed"].page-content_list #lists .videoBlock .videoInfo {
  display: none !important;
}
/* Continue-watch progress. The card ships this as a sibling BELOW the artwork
   with its own margins, so on a poster wall it floated in the gap between
   rows — and its track is Bootstrap's near-white #e9ecef, which on a dark
   page reads as a bright rule rather than as the unwatched remainder. Seat it
   inside the poster, flush to the bottom, on a token track. */
body[data-lo-home-hero="fullbleed"].page-search #searchPage .videoBlock,
body[data-lo-home-hero="fullbleed"].page-content_list #lists .videoBlock {
  position: relative;
}
body[data-lo-home-hero="fullbleed"].page-search #searchPage .videoBlock .progress,
body[data-lo-home-hero="fullbleed"].page-content_list #lists .videoBlock .progress {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: auto !important;
  height: 3px !important;
  margin: 0 !important;
  border-radius: var(--vxl-radius-pill, 999px);
  background: var(--vxl-surface-3) !important;
  overflow: hidden;
}
/* Posters get the card radius and sit tight; the row gap does the spacing. */
body[data-lo-home-hero="fullbleed"].page-search #searchPage .videoBlock .ratio,
body[data-lo-home-hero="fullbleed"].page-content_list #lists .videoBlock .ratio {
  border-radius: var(--vxl-card-radius);
  overflow: hidden;
}
/* On a poster wall the artwork IS the card, so the card's own fill has
   nothing to do: it was painting the card colour (rgb 23,23,28) behind a
   poster on a page surfaced in rgb(11,11,16), which shows as a mismatched
   edge wherever the art does not reach. */
body[data-lo-home-hero="fullbleed"].page-search #searchPage .videoBlock .card,
body[data-lo-home-hero="fullbleed"].page-content_list #lists .videoBlock .card {
  background: transparent !important;
}

/* Search field: the shared mobile rule now derives its fill and ink from the
   tokens, so only the placeholder needs saying here. */
body[data-lo-home-hero="fullbleed"].page-search #searchPage .searchBlock input::placeholder {
  color: var(--vxl-ink-muted);
}
/* Section headings match the rail headings elsewhere in the layout. */
body[data-lo-home-hero="fullbleed"].page-search .vxm-search-suggest-head,
body[data-lo-home-hero="fullbleed"].page-content_list #lists h2.h3,
body[data-lo-home-hero="fullbleed"].page-content_list #lists > .insidePadding > h1,
body[data-lo-home-hero="fullbleed"].page-content_list #lists > .insidePadding > h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  /* Centred by the shared page style. Every other heading in this layout sits
     on the gutter, and a lone centred title over a left-aligned poster wall
     reads as a different page. */
  text-align: start !important;
}