/* ==========================================================================
   GoodTripLove — design system
   Dark, premium, video-first. Built from the reference design: near-black
   navy surfaces, a single warm red accent, generous rounding.
   No build step: this file is served as-is (the server has no Node).
   ========================================================================== */

:root {
  --bg: #0a0d13;
  --bg-soft: #0e131b;
  --panel: #141b25;
  --panel-2: #1a222e;
  --panel-3: #212b38;
  --line: #24303f;
  --line-soft: #1b2431;

  --text: #ffffff;
  --muted: #94a2b3;
  --muted-2: #6d7d90;

  --accent: #ff3355;
  --accent-2: #ff6b83;
  --accent-dim: rgba(255, 51, 85, .14);
  --accent-grad: linear-gradient(135deg, #ff4566, #e01f44);

  --violet: #7c5cff;
  --green: #22c55e;
  --amber: #f2c98f;
  --cream: #f7e7d4;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, .3);

  --max: 1560px;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.wrap { width: min(var(--max), 100%); margin: 0 auto; padding: 0 22px; }

/* ---------- announcement ticker ---------- */
.ticker {
  background: linear-gradient(90deg, rgba(255, 51, 85, .16), rgba(124, 92, 255, .16));
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  font-size: 12.5px;
  letter-spacing: .3px;
}
.ticker__track {
  display: flex;
  gap: 46px;
  padding: 8px 0;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { color: #e6ebf2; display: inline-flex; gap: 8px; align-items: center; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 13, 19, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--header-h);
}
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; letter-spacing: -.5px; }
.logo__heart { width: 26px; height: 26px; color: var(--accent); flex: none; }
.logo__b { color: var(--accent); }

/* `flex: 1; min-width: 0` used to be here, and it is what put the search box on
   top of the menu. It let this container be squeezed narrower than the links
   inside it, but the links are `white-space: nowrap` flex items, so they refuse
   to shrink and simply spilled out to the right — straight underneath the
   search field, which had been given a fixed width and would not give any space
   back. Sizing the menu to its content and letting the search box be the elastic
   element instead keeps the row honest at every width. */
.nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex: 0 1 auto; }
.nav a {
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.nav a:hover { color: #fff; background: var(--panel); }
.nav a.is-active { color: #fff; }
.nav a.is-active::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  margin-top: 5px;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 8px 7px 15px;
  /* Takes the leftover room, up to its comfortable size, and gives it back
     first when the window narrows. Below the minimum the header switches to the
     burger menu instead (see the breakpoint further down). */
  flex: 1 1 auto;
  min-width: 132px;
  max-width: 310px;
}
.header-search input {
  background: none; border: 0; color: #fff; outline: none; width: 100%; font-size: 13.5px;
}
.header-search input::placeholder { color: var(--muted-2); }
.header-search button {
  background: none; border: 0; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.header-search button:hover { color: #fff; }

.header-search__compact {
  display: none;
  width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center;
  margin-left: auto;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}
.header-search__compact:hover { color: #fff; }

.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { color: #fff; border-color: var(--panel-3); }

.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; color: var(--muted);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.lang__btn:hover { color: #fff; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px; min-width: 176px;
  box-shadow: var(--shadow); display: none; z-index: 80;
}
.lang.is-open .lang__menu { display: block; }
.lang__menu a { display: flex; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--muted); }
.lang__menu a:hover { background: var(--panel-3); color: #fff; }
.lang__menu a.is-active { color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 11px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--accent-grad); color: #fff; box-shadow: 0 8px 22px rgba(224, 31, 68, .3); }
.btn--primary:hover { filter: brightness(1.07); }
.btn--ghost { background: var(--panel); border-color: var(--line); color: var(--muted); }
.btn--ghost:hover { color: #fff; border-color: var(--panel-3); }
.btn--green { background: linear-gradient(135deg, #26c95f, #14a34a); color: #fff; }
.btn--block { width: 100%; }
.btn--sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }

.burger { display: none; }
.nav__mobile-only { display: none; }

/* ---------- layout ---------- */
.page { padding: 22px 0 60px; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }

.section { margin-top: 34px; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px;
}
.section__title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.section__title .dot { color: var(--accent); }
.section__link { color: var(--accent); font-size: 13px; font-weight: 700; }
.section__link:hover { color: var(--accent-2); }

/* ---------- video player / facade ---------- */
.player {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 16 / 9;
}
.player__thumb { width: 100%; height: 100%; object-fit: cover; }
.player__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 8, 14, .55) 0%, rgba(4, 8, 14, .05) 38%, rgba(4, 8, 14, .82) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 20px;
}
.player__badges { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.player__title-block { max-width: 62%; }
.player__kicker {
  font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; letter-spacing: -2.5px;
  line-height: .95; margin: 0 0 6px; text-shadow: 0 6px 26px rgba(0, 0, 0, .5);
}
.player__sub { font-size: clamp(15px, 1.5vw, 21px); color: #e8eef6; margin: 0; max-width: 30ch; line-height: 1.25; }
.player__play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--accent-grad); border: 0; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 14px 40px rgba(224, 31, 68, .45);
  transition: transform .18s ease;
}
.player__play:hover { transform: scale(1.07); }
.player__play--static { cursor: default; opacity: .8; }
.player__play--static:hover { transform: none; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A vertical clip may retune the frame on play (see mountPlayer); it must not
   grow past the viewport. */
.player.is-playing { max-height: 80vh; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(9, 13, 20, .78); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 700;
  backdrop-filter: blur(6px);
}
.tag--yt { color: #fff; }
.tag--yt svg { color: #ff0033; }
/* One badge for the four platforms; --platform carries the brand colour so a
   new platform needs no new rule. */
.tag--platform { color: #fff; }
.tag--platform svg { color: var(--platform, #ff0033); }
/* A generated placeholder is artwork, not a photo: cropping it to fill would
   cut the platform name off. */
.player__thumb--placeholder { object-fit: contain; background: #0d1520; }
.tag--action { color: #dfe6ee; cursor: pointer; }
.tag--action:hover { border-color: rgba(255, 255, 255, .35); color: #fff; }
.player__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* ---------- meta bar under the featured player ---------- */
.meta-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-top: 14px;
}
.meta-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.meta-card h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.4px; }
.meta-card__loc { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.meta-card__stats { display: flex; align-items: center; gap: 22px; }
.stat__label { font-size: 11.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; }
.stat__value { font-size: 21px; font-weight: 800; }
.meta-card__acts { display: flex; align-items: center; gap: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 10px; }
.chip {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.chip--accent { background: var(--accent); border-color: transparent; color: #fff; }
.chip--violet { background: rgba(124, 92, 255, .18); border-color: rgba(124, 92, 255, .4); color: #b9a8ff; }
.chip--green { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .35); color: #6ee7a0; }

.meta-desc { color: #ccd5e0; font-size: 14px; margin: 0; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0 0; }
.tabs button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 11px 14px; font-size: 13.5px; font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
}
.tabs button.is-active { color: #fff; border-bottom-color: var(--accent); }
.tab-panel { display: none; padding-top: 16px; }
.tab-panel.is-active { display: block; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 26px; }
.fact { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); padding-bottom: 9px; }
.fact__k { color: var(--muted); font-size: 13px; }
.fact__v { font-size: 13.5px; font-weight: 600; text-align: right; }

/* ---------- GoodTripLove TV ---------- */
.tv {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  position: sticky;
  top: calc(var(--header-h) + 14px);
}
.tv__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tv__title { font-size: 16px; font-weight: 800; margin: 0; }
.tv__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--accent); font-weight: 700; }
.tv__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.tv__toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--muted); }

.switch { width: 38px; height: 21px; border-radius: 999px; background: var(--panel-3); border: 0; position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #8c99a8; transition: .18s; }
.switch.is-on { background: var(--accent); }
.switch.is-on::after { left: 20px; background: #fff; }

.tv__list { display: flex; flex-direction: column; gap: 8px; max-height: 452px; overflow-y: auto; padding-right: 4px; }
.tv__list::-webkit-scrollbar { width: 6px; }
.tv__list::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 4px; }

.tv-item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 8px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; text-align: left; background: none; width: 100%;
}
.tv-item:hover { background: var(--panel-2); }
.tv-item.is-current { background: rgba(255, 51, 85, .09); border-color: rgba(255, 51, 85, .45); }
.tv-item__thumb { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.tv-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tv-item__dur {
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(0, 0, 0, .82); border-radius: 5px;
  padding: 1px 5px; font-size: 10.5px; font-weight: 700;
}
.tv-item__title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.32; margin: 0 0 3px; }
.tv-item__loc { display: block; font-size: 12px; color: var(--muted); margin: 0; }
.tv-item__more { color: var(--muted-2); background: none; border: 0; cursor: pointer; padding: 4px; }
.tv-item__eq { color: var(--accent); }

.tv__footer { margin-top: 10px; }
.tv__footer .btn { width: 100%; background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.tv__footer .btn:hover { color: #fff; }

/* ---------- video grids ---------- */
.grid { display: grid; gap: 16px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vcard { display: block; }
.vcard__thumb {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--panel-2); border: 1px solid var(--line);
}
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vcard:hover .vcard__thumb img { transform: scale(1.045); }
.vcard__dur {
  position: absolute; right: 7px; bottom: 7px;
  background: rgba(0, 0, 0, .84); border-radius: 6px;
  padding: 2px 6px; font-size: 11px; font-weight: 700;
}
.vcard__play {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255, 51, 85, .92); color: #fff;
  display: grid; place-items: center; opacity: 0; transition: opacity .2s ease;
}
.vcard:hover .vcard__play { opacity: 1; }
.vcard__body { padding: 9px 2px 0; }
.vcard__title {
  font-size: 13.5px; font-weight: 700; line-height: 1.35; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcard__meta { font-size: 12px; color: var(--muted); margin: 0; }
.vcard__stats { font-size: 12px; color: var(--muted-2); margin: 2px 0 0; display: flex; gap: 10px; }
.vcard__cat {
  position: absolute; left: 7px; top: 7px;
  background: rgba(9, 13, 20, .8); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px; padding: 3px 8px; font-size: 10.5px; font-weight: 700;
}

/* ---------- category rail ---------- */
.cat-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.cat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 12px; text-align: center; transition: .18s;
}
.cat:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-2px); }
.cat__icon { font-size: 24px; margin-bottom: 7px; }
.cat__name { font-size: 12.5px; font-weight: 700; }
.cat__count { font-size: 11px; color: var(--muted-2); margin-top: 2px; }

/* ---------- ads ---------- */
.ad-slot {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(135deg, #241d2c, #16202c 60%, #121820);
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin: 26px 0; overflow: hidden;
}
.ad-slot__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--muted-2); margin-bottom: 6px;
}
.ad-slot h3 { margin: 0 0 5px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.ad-slot p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ad-slot img { border-radius: var(--radius); max-height: 108px; }

/* ---------- app download banner ---------- */
.app-banner {
  margin-top: 40px; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #3c2e27, #263848 55%, #151b22);
  display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; gap: 24px;
  align-items: center; padding: 22px 26px;
}
.app-banner__phone { max-height: 168px; margin: 0 auto; }
.app-banner h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.app-banner p { margin: 0 0 14px; color: #d3dae2; font-size: 13.5px; }
.app-banner__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.app-check {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px; padding: 9px 11px; font-size: 12px; text-align: center;
}
.app-banner__cta { text-align: right; }
.app-banner__version { font-size: 11.5px; color: #b9c3ce; margin-top: 8px; }
.app-banner__hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: #97a3b0; word-break: break-all; max-width: 260px; }

/* ---------- filters / search ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 12px 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.field label { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; }
.field select, .field input, .field textarea {
  background: var(--panel-2); border: 1px solid var(--line); color: #fff;
  border-radius: 10px; padding: 9px 11px; font-size: 13.5px; outline: none; width: 100%;
}
.field select:focus, .field input:focus, .field textarea:focus { border-color: var(--accent); }

.sort-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.sort-tabs a {
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.sort-tabs a.is-active { background: var(--accent); border-color: transparent; color: #fff; }

/* ---------- map ---------- */
.map-box { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 210px; background: var(--panel-2); }
.map-box iframe { width: 100%; height: 250px; border: 0; display: block; }

/* ---------- misc ---------- */
.empty {
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  padding: 34px; text-align: center; color: var(--muted);
}
.alert { border-radius: var(--radius); padding: 12px 15px; font-size: 13.5px; margin-bottom: 16px; }
.alert--ok { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35); color: #86efac; }
.alert--err { background: rgba(255, 51, 85, .12); border: 1px solid rgba(255, 51, 85, .38); color: #ff9db0; }
.alert--warn { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .38); color: #fcd34d; }

.footer-notices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.footer-notice {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; font-size: 14px;
}
.field-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.footer-social a { font-weight: 600; }
.footer-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 13.5px; }

.auth-card {
  width: min(460px, 100%); margin: 40px auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 30px;
}
.auth-card h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.5px; }
.auth-card p.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.auth-card .field { margin-bottom: 14px; min-width: 0; }
.code-input {
  letter-spacing: 14px; text-align: center; font-size: 26px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.site-footer { border-top: 1px solid var(--line-soft); margin-top: 56px; padding: 34px 0 44px; color: var(--muted); font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.footer-grid h4 { color: #fff; font-size: 13px; margin: 0 0 11px; text-transform: uppercase; letter-spacing: .8px; }
.footer-grid a { display: block; padding: 3px 0; color: var(--muted); }
.footer-grid a:hover { color: #fff; }
.footer-bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted-2); }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 9px;
  display: inline-grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.pagination .is-active { background: var(--accent); border-color: transparent; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
  .grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .tv { position: static; }
  .tv__list { max-height: 380px; }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Laptop widths. Six menu labels, a logo, a search field and the account
   buttons need about 1520px to sit side by side, so between that and the
   burger the menu is tightened to buy back the difference. */
@media (max-width: 1440px) {
  .site-header__inner { gap: 12px; }
  .nav { gap: 1px; margin-left: 4px; }
  .nav a { padding: 8px 8px; font-size: 13.5px; }
}
/* Laptops. There is no longer room for the menu and the search field side by
   side, so the field folds into an icon that opens the search page. The menu is
   the more useful of the two here, which is why it is the one that stays. */
@media (max-width: 1340px) and (min-width: 1201px) {
  .header-search { display: none; }
  .header-search__compact { display: flex; }
  .header-tools { margin-left: 0; }
}

/* Below this the six labels stop fitting even without the search field —
   measured, not guessed: the header row starts overflowing at about 1150px. */
@media (max-width: 1200px) {
  .nav { display: none; }
  .burger { display: grid; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding: 12px; gap: 2px; z-index: 70;
  }
}
@media (max-width: 1000px) {
  .grid--4, .grid--5, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-banner { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .app-banner__cta { text-align: center; }
  .app-banner__phone { max-height: 130px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 14px; }
  .header-search { display: none; }
  /* The sign-up call to action does not fit next to the burger on a phone,
     so both auth links move into the menu instead of overflowing the header. */
  .header-tools .btn { display: none; }
  .header-tools form { display: none; }
  .nav.is-open .nav__mobile-only { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
  .nav.is-open .nav__mobile-only .btn { display: inline-flex; }
  .site-header__inner { gap: 10px; }
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .player__title-block { max-width: 100%; }
  .player__play { width: 58px; height: 58px; }
  .meta-card { padding: 15px; }
  .meta-card__stats { gap: 14px; }
  .tv-item { grid-template-columns: 108px minmax(0, 1fr) auto; }
  .ad-slot { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: minmax(0, 1fr); }
  .cat-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- cookie / consent ---------- */
.cookie {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 200;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.cookie__inner { padding: 16px 18px; display: grid; gap: 12px; }
.cookie__text strong { font-size: 15px; }
.cookie__text p { margin: 5px 0 0; color: var(--muted); font-size: 13px; max-width: 82ch; }
.cookie__choices { display: grid; gap: 7px; padding: 10px 12px; background: var(--panel-2); border-radius: var(--radius); }
.cookie__row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.cookie__row input { width: auto; }
.cookie__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie__link { font-size: 12px; color: var(--accent); }

/* Consent prompt shown in place of a player when embeds are not allowed yet. */
.consent-gate {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(6, 9, 14, .9); padding: 20px; text-align: center; z-index: 3;
}
.consent-gate p { margin: 0 0 14px; font-size: 13.5px; color: #d6dee7; max-width: 46ch; }
.consent-gate .btn { margin: 0 4px; }

@media (min-width: 900px) {
  .cookie__inner { grid-template-columns: 1fr auto; align-items: center; }
  .cookie__choices { grid-column: 1 / -1; }
  .cookie__link { grid-column: 1 / -1; }
}