/*
 * Gupy redesign v2 — /listes/ community lists directory
 * (html/redesign/lists/directory.php, behaviour in js/redesign/gupy-v2-lists.js).
 * The hero reuses the archive page classes (gupy-v2-archive.css). Every rule is
 * scoped under gv2- classes: nothing here reaches the v1 directory markup.
 * Container widths / breakpoints follow .gv2-section (gupy-v2.css): 480 / 768 / 1024 / 1600.
 */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.gv2-lists__panel {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 10px var(--gv2-gutter, 80px) 60px;
  box-sizing: border-box;
}
@media (min-width: 1600px) {
  .gv2-lists__panel {
    max-width: 1920px;
  }
}
@media (min-width: 2200px) {
  .gv2-lists__panel {
    max-width: 2400px;
  }
}

/* --------------------------------------------------------------------------
   Hero: "My lists" button on the right
   -------------------------------------------------------------------------- */

.gv2-lists .gv2-lists__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gv2-lists__mine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--gv2-radius-sm);
  background: var(--vrd-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.gv2-lists__mine:hover {
  color: #fff;
  filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   Toolbar: one bar, the search field and the sort control side by side,
   both in the filter bar's box style (surface, 1px border, 5px radius, same
   height as its pills).
   -------------------------------------------------------------------------- */

.gv2-lists__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 30px;
}
.gv2-lists__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 360px;
  max-width: 560px;
  min-width: 0;
  margin: 0;
  padding: 0 6px 0 16px;
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  background: var(--gv2-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gv2-lists__search:focus-within {
  border-color: var(--vrd-primary);
  box-shadow: 0 0 0 3px rgba(219, 53, 117, 0.18);
}
.gv2-lists__search > i {
  flex: 0 0 auto;
  color: var(--gv2-text-dim);
  font-size: 15px;
}
.gv2-lists__search:focus-within > i {
  color: var(--vrd-primary);
}
.gv2-lists__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  margin: 0 !important; /* the theme spaces inputs */
  padding: 0 10px 0 12px !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gv2-text);
  font-family: var(--gv2-font-body);
  font-size: 15px;
  font-weight: 700;
  outline: none;
}
.gv2-lists__search input::placeholder {
  color: var(--gv2-text-dim);
  font-weight: 400;
}
.gv2-lists__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.gv2-lists__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--gv2-text-muted);
  cursor: pointer;
}
.gv2-lists__clear:hover {
  background: var(--gv2-glass-bg);
  color: var(--gv2-text);
}
.gv2-lists__clear[hidden] {
  display: none;
}
.gv2-lists__sorts {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .gv2-lists__search {
    flex-basis: 100%;
    max-width: none;
  }
  .gv2-lists__sorts {
    flex: 1 1 100%;
  }
  .gv2-lists__sorts .gv2-filter-bar__pill {
    flex: 1 1 auto;
    padding-inline: 10px;
  }
}

/* --------------------------------------------------------------------------
   List tiles — the v1 markup (VRD_Profile::render_list_card(), stack style):
   a fan of 6 poster slots, title and meta under it, no box. v2: the fan
   scales with the tile (the v1 posters are 130px wide, 50px apart, and
   overflowed narrow columns), empty slots in v2 tones instead of light grey,
   v2 type. Also used by the profile "Listes" tab (body.gv2-page-profile).
   -------------------------------------------------------------------------- */

.gv2-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 36px 28px;
}
body.gupy-v2.gv2-page-profile .vrd_lists_grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 36px 28px;
}
@media (max-width: 480px) {
  .gv2-list-grid,
  body.gupy-v2.gv2-page-profile .vrd_lists_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack {
  min-width: 0;
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack .vrd_list_card_posters {
  height: auto;
  aspect-ratio: 100 / 54; /* a poster is 36% wide, 2:3 → 54% of the tile width */
  border-radius: var(--gv2-radius-md);
  overflow: visible;
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack .vrd_list_card_poster {
  top: 0;
  width: 36%;
  height: auto;
  aspect-ratio: 2 / 3;
  left: calc(var(--pi) * 12.8%);
  border-radius: var(--gv2-radius-md);
  box-shadow: 8px 4px 16px rgba(0, 0, 0, 0.45);
  background: rgba(var(--gv2-fg-rgb), calc(0.11 - var(--pi) * 0.015)) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Empty slots: a solid tone (the translucent one would show the slot behind). */
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack .vrd_list_card_poster:not(:has(img)) {
  background: color-mix(in srgb, var(--gv2-surface-alt) calc(100% - var(--pi) * 12%), var(--gv2-bg)) !important;
  border: 1px solid var(--gv2-border);
  box-sizing: border-box;
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack:hover .vrd_list_card_poster {
  left: calc(var(--pi) * 12.8%);
  transform: translateX(calc(var(--pi) * 4px)) translateY(-3px);
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack .vrd_list_card_stack_info {
  padding-top: 14px;
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack .vrd_list_card_title {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--gv2-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack .vrd_list_card_title:hover {
  color: var(--vrd-primary);
  text-decoration: none;
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card--stack .vrd_list_card_meta {
  margin: 4px 0 0;
  color: var(--gv2-text-muted);
  font-size: 13px;
  font-weight: 700;
}
:is(.gv2-lists, body.gupy-v2.gv2-page-profile) .vrd_list_card_owner_link {
  color: var(--vrd-primary);
}

/* --------------------------------------------------------------------------
   Empty state, loader
   -------------------------------------------------------------------------- */

.gv2-lists__empty {
  padding-block: 60px;
  text-align: center;
  color: var(--gv2-text-muted);
}
.gv2-lists__empty[hidden],
.gv2-lists__more[hidden] {
  display: none;
}
.gv2-lists__more {
  padding-block: 30px;
  text-align: center;
}

/* ==========================================================================
   Member list page (/profil/{login}/list/{uuid}/, VRD_Profile + the engine
   template includes/user-lists/template.php). Markup and scripts stay the v1
   ones (add / remove / reorder / follow / share); body.gv2-page-list scopes the
   v2 look. The container width comes from gupy-v2-account.css.
   ========================================================================== */

/* Header: left aligned, owner avatar beside the title. */
body.gupy-v2.gv2-page-list .vrd_list_page_header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
  text-align: left;
}
body.gupy-v2.gv2-page-list .vrd_list_page_header > * {
  grid-column: 2;
  margin-inline: 0;
}
body.gupy-v2.gv2-page-list .vrd_list_page_header > .vrd_list_page_avatar_link {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}
body.gupy-v2.gv2-page-list .vrd_list_page_avatar {
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--vrd-primary);
  object-fit: cover;
}
body.gupy-v2.gv2-page-list .vrd_list_page_title {
  margin: 0;
  font-family: var(--gv2-font-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  color: var(--gv2-text);
  text-align: left;
}
body.gupy-v2.gv2-page-list .vrd_list_page_meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: var(--gv2-text-muted);
  font-size: 14px;
  font-weight: 700;
}
body.gupy-v2.gv2-page-list .vrd_list_page_description {
  max-width: 900px;
  margin: 6px 0 0;
  color: var(--gv2-text-muted);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}
body.gupy-v2.gv2-page-list .vrd_list_desc_more {
  justify-self: start;
  margin: 0;
  padding: 0;
  text-align: left;
}
body.gupy-v2.gv2-page-list .vrd_list_page_actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
body.gupy-v2.gv2-page-list .vrd_list_page_actions .vrd_button {
  border-radius: var(--gv2-radius-sm);
  font-weight: 900;
}
@media (max-width: 768px) {
  body.gupy-v2.gv2-page-list .vrd_list_page_header {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
  }
  body.gupy-v2.gv2-page-list .vrd_list_page_avatar {
    width: 48px;
    height: 48px;
  }
  body.gupy-v2.gv2-page-list .vrd_list_page_title {
    font-size: 28px;
  }
  body.gupy-v2.gv2-page-list .vrd_list_page_header > :not(.vrd_list_page_avatar_link):not(.vrd_list_page_title) {
    grid-column: 1 / -1;
  }
}

/* v2 filter bar: it brings its own page container, already inside ours. */
body.gupy-v2.gv2-page-list .gv2-list-page__filters .gv2-filter-bar {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 24px;
}

/* Grid view: the v1 tiles (with their remove button for the owner) on a CSS grid. */
body.gupy-v2.gv2-page-list .vrd_list_items_grid .cactus-listing-config {
  margin: 0;
  padding: 0;
}
body.gupy-v2.gv2-page-list #vrd_ul_grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  justify-content: stretch !important;
  gap: 24px 20px;
  margin: 0 !important;
}
body.gupy-v2.gv2-page-list #vrd_ul_grid::before,
body.gupy-v2.gv2-page-list #vrd_ul_grid::after {
  content: none;
}
body.gupy-v2.gv2-page-list #vrd_ul_grid > .cactus-post-item {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
body.gupy-v2.gv2-page-list #vrd_ul_grid > .cactus-post-item > .entry-content {
  margin: 0 !important;
}
/* v2 poster card items (gv2_list_page_grid_item()): the owner's remove button
   sits right of the "add to a list" button and copies its style (30px square,
   dark blurred backdrop, shown on hover, always on touch screens). */
body.gupy-v2.gv2-page-list #vrd_ul_grid > .gv2-list-item {
  position: relative;
}
body.gupy-v2.gv2-page-list .gv2-list-item .gv2-poster-card {
  width: 100%;
}
body.gupy-v2.gv2-page-list .gv2-list-item__remove.vrd_list_remove_btn {
  position: absolute;
  top: 10px;
  left: 46px; /* bookmark: left 10px + 30px + 6px gap */
  right: auto;
  z-index: 3;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: rgba(12, 15, 22, 0.55); /* dark in both schemes, like the bookmark */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  text-decoration: none !important;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
body.gupy-v2.gv2-page-list .gv2-list-item:hover .gv2-list-item__remove,
body.gupy-v2.gv2-page-list .gv2-list-item__remove:focus-visible {
  opacity: 1;
}
body.gupy-v2.gv2-page-list .gv2-list-item__remove:hover,
body.gupy-v2.gv2-page-list .gv2-list-item__remove:focus {
  color: var(--gv2-danger);
  text-decoration: none !important;
}
@media (hover: none) {
  body.gupy-v2.gv2-page-list .gv2-list-item__remove.vrd_list_remove_btn {
    opacity: 1;
  }
}

/* v1 phone rules pad the grid (32px) and the picture (15px) and force a 229px
   min-height on the poster, which squeezed and stretched the tiles. */
body.gupy-v2.gv2-page-list #vrd_ul_grid {
  padding: 0 !important;
}
body.gupy-v2.gv2-page-list #vrd_ul_grid .picture {
  padding: 0 !important;
}
body.gupy-v2.gv2-page-list #vrd_ul_grid .picture-content,
body.gupy-v2.gv2-page-list #vrd_ul_grid .picture-content > a {
  width: 100% !important;
}
body.gupy-v2.gv2-page-list #vrd_ul_grid .picture-content img {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
@media (min-width: 1600px) {
  body.gupy-v2.gv2-page-list #vrd_ul_grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  body.gupy-v2.gv2-page-list #vrd_ul_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 12px;
  }
}

/* Ordered view: one card per program, big rank on the left. */
body.gupy-v2.gv2-page-list .vrd_list_ordered_view {
  max-width: none;
  gap: 14px;
}
body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_ordered_row {
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid var(--gv2-border);
  border-radius: var(--gv2-radius-lg);
  background: var(--gv2-surface);
}
body.gupy-v2.gv2-page-list .vrd_ordered_rank {
  min-width: 2.2ch;
  font-family: var(--gv2-font-heading);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--vrd-primary);
}
body.gupy-v2.gv2-page-list #vrd_ul_ordered.is_reordering .vrd_ordered_rank {
  font-size: 22px;
}
body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_popular_search_item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0;
  background: none;
  color: var(--gv2-text);
}
body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_ps_poster {
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--gv2-radius-md);
  background: var(--gv2-surface-alt);
}
body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_ps_poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  font-size: 0;
}
body.gupy-v2.gv2-page-list .vrd_ps_info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
body.gupy-v2.gv2-page-list .vrd_ps_title {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--gv2-text);
}
body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_popular_search_item:hover .vrd_ps_title {
  color: var(--vrd-primary);
}
body.gupy-v2.gv2-page-list .vrd_ps_genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.gupy-v2.gv2-page-list .vrd_ps_badge {
  margin: 0;
  padding: 3px 8px;
  border-radius: var(--gv2-radius-sm);
  background: var(--gv2-glass-bg);
  color: var(--gv2-text-muted);
  font-size: 11px;
  font-weight: 700;
}
body.gupy-v2.gv2-page-list .vrd_ps_badge.vrd_ps_type_badge {
  background: var(--vrd-primary);
  color: #fff;
}
body.gupy-v2.gv2-page-list .vrd_ps_rating {
  color: var(--vrd-primary);
  font-weight: 900;
}
body.gupy-v2.gv2-page-list .vrd_ps_plot {
  max-width: 900px;
  color: var(--gv2-text-muted);
  font-size: 14px;
  line-height: 1.55;
}
body.gupy-v2.gv2-page-list .vrd_ps_providers {
  color: var(--gv2-text-dim);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 768px) {
  body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_ordered_row {
    position: relative;
    gap: 12px;
    padding: 14px;
  }
  body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_ordered_rank {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-width: 0;
    padding: 2px 8px;
    border-radius: var(--gv2-radius-sm);
    background: var(--vrd-primary);
    color: #fff;
    font-size: 16px;
  }
  body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_popular_search_item {
    gap: 14px;
  }
  body.gupy-v2.gv2-page-list #vrd_ul_ordered:not(.is_reordering) .vrd_ps_poster {
    flex-basis: 80px;
    width: 80px;
  }
  body.gupy-v2.gv2-page-list .vrd_ps_title {
    font-size: 18px;
  }
  body.gupy-v2.gv2-page-list .vrd_ps_plot {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* "Add titles" dialog: the year under the title (span.vrd_ob_card_year, v2 only),
   not glued to it by the v1 -webkit-box title ("Polar2024"). */
body.gupy-v2 .vrd_add_programs_dialog .vrd_ob_card .vrd_ob_card_title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.gupy-v2 .vrd_add_programs_dialog .vrd_ob_card .vrd_ob_card_title strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.gupy-v2 .vrd_add_programs_dialog .vrd_ob_card .vrd_ob_card_year {
  display: block;
  color: var(--gv2-text-muted);
  font-weight: 600;
}