/* Cinema Atlas — dark-page poster-card grid.
 *
 * The film_card macro (templates/partials/_film_card.html) and its grid, the
 * decade-pill filter, and the 6→4→2 column breakpoints. Shared by the country
 * page and the director page so the two cannot drift; both link this AFTER
 * base/tokens-dark.css and BEFORE their page CSS. Search / list pages keep
 * their own light-surface copies (search.css, list_view.css). */
.film-card-grid.film-card-grid--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
/* ── Poster-card grid (Featured Films + decade blocks) ────────────────────
   The shared components/film-card.css only styles the poster/info overlay.
   The grid, card frame, placeholder, title/meta, and bookmark live per-page
   (see search.css / list_view.css); replicate them here, scoped dark. */
.film-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.film-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.film-card-link--static {
  cursor: default;
}
/* Poster box only — the text sits BELOW it, in .film-card-info. Mirrors the
   discover page's .thread-poster: same surface, border, radius, full-colour
   poster. This card used to be the map-drawer overlay (title on the poster,
   desaturated to 55%, drop shadow); the scrim that made that overlay readable
   lives in components/film-card.css, which this page never loads, so titles
   sat raw on the artwork. tests/test_country_tiles_match_discover.py pins the
   new shape. */
.film-card {
  width: 100%;
  aspect-ratio: 2 / 3;
  cursor: pointer;
  border: 1px solid var(--border-raised);
  transition: border-color 0.2s ease;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  background: var(--surface-raised);
}
.film-card-link:hover .film-card {
  border-color: var(--red);
}
.film-card-link:hover .film-card-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.film-card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--black-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: absolute;
  top: 0;
  left: 0;
}
/* Upright like .poster-tile-noimg (film.css / director.css) and .tl-film-noimg
   (movements_timeline.css) — Playfair italic's hairlines thinned out against
   the placeholder fill. Size deliberately stays at 0.8125rem rather than the
   0.9375rem those three use: on this grid .film-card-title is overlaid on the
   card itself, so the placeholder repeats a title that is already on screen.
   Growing it would crowd that overlay to restate what it already says. */
.film-card-placeholder-text {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--bone-meta);
  text-align: center;
  line-height: 1.35;
}
/* components/film-card.css (imported by app.css into the components layer on
   every page) styles this class as an absolute bottom-anchored overlay with a
   gradient scrim. This page's tiles put the text BELOW the poster, so every
   overlay property is explicitly reset. Unlayered page CSS outranks the
   layered component, so these win regardless of order. */
.film-card-info {
  position: static;
  background: none;
  min-height: 0;
  padding: 0;
  margin-top: 10px;
}
/* Lora at the discover shelves' size, not the overlay's Playfair 700: these
   tiles now sit in the same visual system as .thread-tile-title/.thread-tile-sub
   (home.css), and the two pages read as one site only if the pair matches. */
.film-card-title {
  font-family: "Lora", serif;
  font-size: 0.98rem;
  font-weight: 400;
  font-style: normal;
  color: var(--color-base);
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
/* Full colour always, like every discover shelf. The 55%-saturation resting
   state read as a different, duller palette than the homepage. */
.film-card img,
.film-card-poster {
  transition: transform 0.2s ease;
}
.film-card-link:hover .film-card-poster {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .film-card img,
  .film-card-poster {
    transition: none;
  }
  .film-card-link:hover .film-card-poster {
    transform: none;
  }
}
.film-card-meta {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  color: var(--bone-meta); /* 7.48:1; --bone-dim only scrapes AA on dark */
  letter-spacing: 0.03em;
}
/* Empty layout slot — populated by neither drawer nor SSR; kept for parity. */
.streaming-badges {
  position: absolute;
  bottom: 8px;
  left: 10px;
  display: flex;
  gap: 4px;
  z-index: 5;
}
.film-card-bookmark {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s;
  background: rgba(15, 15, 15, 0.65);
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: var(--radius-sm);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.film-card:hover .film-card-bookmark,
.film-card-bookmark:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .film-card-bookmark {
    opacity: 1;
  }
}

/* ── Films-by-decade pill filter ───────────────────────────────────────────*/
.decade-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.decade-pill {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.decade-pill:hover {
  border-color: var(--red);
}
.decade-pill.is-active {
  background: var(--red);
  color: #f5efe2; /* bright cream on crimson — the only literal, per handoff */
  border-color: var(--red);
}
.decade-pill:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.decade-grid[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .decade-pill {
    transition: none;
  }
}


/* ── Responsive: 6→4→2 columns ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .film-card-grid.film-card-grid--6 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .film-card-grid.film-card-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}