/* ===========================================================================
   NOIR CHROMA — index.php  (also loaded by stories.php for the .behind-* cards)
   Overrides assets/css/index-page.css.
   =========================================================================== */

/* ---- 1. Hero ------------------------------------------------------------ */

body[data-skin="noir"] .search-command { margin: var(--n-s5) 0 var(--n-s8); }

/* Was a solid black 0.15cm bar. Becomes the chromatic hairline that opens the
   whole page — the first thing the eye lands on under the header. */
body[data-skin="noir"] .search-top-bar {
  height: 3px;
  background: var(--n-grad);
  border-radius: var(--n-r-sm) var(--n-r-sm) 0 0;
}

body[data-skin="noir"] .search-tags-row {
  background: var(--n-ink-1);
  padding: .45rem 1rem;
  margin-bottom: 0;
  border-inline: 1px solid var(--n-border);
}
body[data-skin="noir"] .search-tag-link {
  color: var(--n-text-muted);
  font-family: var(--n-font-display);
  font-size: var(--n-fz-sm);
  transition: color var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .search-tag-link:hover { color: var(--n-fg); }
body[data-skin="noir"] .search-tag-link.active {
  color: var(--n-fg);
  font-weight: var(--n-fw-semi);
}
body[data-skin="noir"] .search-tags-sep { color: var(--n-fg-3); }

/* The banner photo goes full-bleed on ink instead of sitting on a white card,
   and gets a scrim so the search bar that floats over its bottom edge always
   has something dark to read against, whatever the photo happens to be. */
/* Height is set directly rather than through aspect-ratio.
   `aspect-ratio` + a `max-height` that actually bites is a trap: once the
   height is clamped, the used width is re-derived from the clamped height
   through the ratio, so the banner silently shrinks horizontally and leaves a
   gap beside it (1361px of container, 1216px of banner). Sizing the height
   with clamp() keeps the width at a plain 100% at every viewport, and
   object-fit:cover on .hero-banner-img handles the crop. */
body[data-skin="noir"] .search-hero-banner {
  background-color: var(--n-ink-0);
  aspect-ratio: auto;
  width: 100%;
  height: clamp(220px, 27vw, 430px);
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 1px solid var(--n-border);
  border-top: 0;
  border-radius: 0 0 var(--n-r-lg) var(--n-r-lg);
  box-shadow: none;
}
body[data-skin="noir"] .hero-banner-img { object-position: center 40%; }

/* Scrim: heavy only where the search pill overlaps the bottom edge, and
   almost nothing across the upper two thirds so the photograph still reads. */
body[data-skin="noir"] .search-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
                var(--n-ink-0) 0%,
                rgba(11, 11, 13, .45) 26%,
                rgba(11, 11, 13, 0) 58%,
                rgba(11, 11, 13, .18) 100%);
  opacity: 1;
  pointer-events: none;
}


/* ---- 2. Search bar ------------------------------------------------------ */

body[data-skin="noir"] .search-bottom-area { margin-top: -34px; }

body[data-skin="noir"] .search-controls-row {
  background: rgba(18, 18, 21, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--n-border-strong);
  border-radius: var(--n-r-pill);
  box-shadow: var(--n-sh-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-skin="noir"] .search-controls-row { background: var(--n-ink-3); }
}

/* No backdrop-filter on the input container itself: on iOS a translucent
   parent makes the field's own text colour unreliable, which is exactly what
   the legacy inline !important block was papering over. */
body[data-skin="noir"] .search-input-wrap {
  background: transparent;
  border: 0;
  border-radius: var(--n-r-pill);
}

body[data-skin="noir"] .search-hero-input {
  background: transparent;
  color: var(--n-fg);
  -webkit-text-fill-color: var(--n-fg);
  caret-color: var(--n-pink);
  font-family: var(--n-font-body);
  font-size: max(16px, var(--n-fz-base));
}
body[data-skin="noir"] .search-hero-input::placeholder {
  color: var(--n-text-dim);
  -webkit-text-fill-color: var(--n-text-dim);
  opacity: 1;
}

body[data-skin="noir"] .search-controls-row:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--n-pink), var(--n-glow);
}

body[data-skin="noir"] .search-input-wrap .search-icon {
  color: var(--n-text-muted);
  transition: color var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .search-controls-row:focus-within .search-icon { color: var(--n-pink); }

body[data-skin="noir"] .search-divider { background: var(--n-border); }

body[data-skin="noir"] .search-count-badge {
  background: var(--n-surface-2);
  color: var(--n-text-muted);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .search-count-badge.is-visible {
  background: var(--n-grad);
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
}

body[data-skin="noir"] .search-discover-btn {
  background: var(--n-grad);
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
  border: 0;
  border-radius: var(--n-r-pill);
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-bold);
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transition: filter var(--n-dur) var(--n-ease), box-shadow var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .search-discover-btn:hover {
  filter: brightness(1.1);
  box-shadow: var(--n-glow);
}
body[data-skin="noir"] .search-discover-btn svg {
  color: var(--n-on-accent);
  stroke: currentColor;
  fill: none;
}


/* ---- 3. Active filter chips -------------------------------------------- */

body[data-skin="noir"] .filter-chip {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .chip-label { color: var(--n-text); }
body[data-skin="noir"] .chip-dismiss {
  color: var(--n-text-dim);
  transition: color var(--n-dur) var(--n-ease), background var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .chip-dismiss:hover {
  color: var(--n-fg);
  background: var(--n-surface-hover);
}
body[data-skin="noir"] .filter-clear-all { color: var(--n-accent); }


/* ---- 4. Custom dropdown (custom-dropdown.js) ---------------------------- */
/* No viewport guard in that script — this applies at every width, and only on
   index.php, which is the only page carrying .search-filter-select. */

body[data-skin="noir"] .cd-trigger {
  color: var(--n-text-muted);
  font-family: var(--n-font-display);
  font-size: var(--n-fz-sm);
  font-weight: var(--n-fw-med);
}
body[data-skin="noir"] .cd-trigger:hover,
body[data-skin="noir"] .cd-trigger:focus { color: var(--n-fg); }
body[data-skin="noir"] .cd-chevron { stroke: var(--n-fg-3); }
body[data-skin="noir"] .cd-dropdown.is-open .cd-chevron { stroke: var(--n-accent); }

body[data-skin="noir"] .cd-panel {
  background: var(--n-elev);
  border: 1px solid var(--n-border-strong);
  border-radius: var(--n-r-md);
  box-shadow: var(--n-sh-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--n-s1) 0;
}
body[data-skin="noir"] .cd-option {
  position: relative;
  color: var(--n-text-muted);
  font-size: var(--n-fz-sm);
  transition: background var(--n-dur-fast) var(--n-ease), color var(--n-dur-fast) var(--n-ease);
}
body[data-skin="noir"] .cd-option.cd-option--focused {
  background: var(--n-surface-hover);
  color: var(--n-fg);
}
body[data-skin="noir"] .cd-option.cd-option--selected {
  color: var(--n-fg);
  font-weight: var(--n-fw-semi);
  background: transparent;
}
body[data-skin="noir"] .cd-option.cd-option--selected::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--n-grad);
}
body[data-skin="noir"] .cd-option.cd-option--selected.cd-option--focused {
  background: var(--n-surface-hover);
}

/* No-JS fallback: the raw select is only hidden once the script succeeds. */
body[data-skin="noir"] .search-filter-select {
  background-color: var(--n-surface-2);
  color: var(--n-text);
  -webkit-text-fill-color: var(--n-text);
  color-scheme: dark;
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .search-filter-select option {
  background: var(--n-ink-3);
  color: var(--n-text);
}


/* ---- 5. Featured -------------------------------------------------------- */

body[data-skin="noir"] .featured-section { margin: var(--n-s8) 0; }

/* index-page.css:544 wraps the featured strip in a light card
   (background:#f7f7f8, border:#dde0e4, 0-2-0). On ink that reads as a bright
   slab bolted to the middle of the page. Noir lets the photographs sit
   directly on the canvas — the whole point of the dark treatment. */
body[data-skin="noir"] .featured-section:not(.behind-section) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

body[data-skin="noir"] .feat-grid { gap: var(--n-s4); }

body[data-skin="noir"] .feat-card {
  border-radius: var(--n-r-xl);
  background: var(--n-ink-2);
  transition: transform var(--n-dur-slow) var(--n-ease-emph),
              box-shadow var(--n-dur-slow) var(--n-ease);
}
body[data-skin="noir"] .feat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--n-glow);
}
/* Idle images sit back a little so the hovered one steps forward — on a black
   canvas that reads as light, which brightness alone on white never did. */
body[data-skin="noir"] .feat-img { filter: brightness(.85); }
body[data-skin="noir"] .feat-card:hover .feat-img {
  transform: scale(1.06);
  filter: brightness(1.02);
}

body[data-skin="noir"] .top-banner-inner {
  border-radius: var(--n-r-lg);
  overflow: hidden;
  border: 1px solid var(--n-border);
}


/* ---- 6. Behind-the-story cards ----------------------------------------- */

/* Same story as .featured-section — index-page.css:579 gives this block a
   #f8fafc card background. */
body[data-skin="noir"] .behind-hero {
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 var(--n-s3);
}
body[data-skin="noir"] .behind-hero h2 {
  font-family: var(--n-font-display);
  color: var(--n-fg);
}
body[data-skin="noir"] .behind-hero p { color: var(--n-text-muted); }
body[data-skin="noir"] .behind-kicker {
  color: var(--n-accent);
  font-family: var(--n-font-display);
  letter-spacing: var(--n-tracking-wide);
  text-transform: uppercase;
  font-size: var(--n-fz-xs);
}

body[data-skin="noir"] .behind-grid { gap: var(--n-s5); }

body[data-skin="noir"] .behind-card {
  position: relative;
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--n-dur) var(--n-ease),
              border-color var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .behind-card:hover {
  transform: translateY(-4px);
  border-color: var(--n-border-strong);
}
/* Gradient hairline that draws itself across the card top on hover. */
body[data-skin="noir"] .behind-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 3;
  background: var(--n-grad);
  transform: scaleX(0);
  transform-origin: var(--n-grad-origin, left);
  transition: transform var(--n-dur-slow) var(--n-ease-emph);
}
body[data-skin="noir"] .behind-card:hover::before { transform: scaleX(1); }
html[dir="rtl"] body[data-skin="noir"] .behind-card::before { transform-origin: right; }

body[data-skin="noir"] .behind-media { background: var(--n-ink-3); }
body[data-skin="noir"] .behind-media img {
  filter: brightness(.9);
  transition: filter var(--n-dur-slow) var(--n-ease), transform var(--n-dur-slow) var(--n-ease-emph);
}
body[data-skin="noir"] .behind-card:hover .behind-media img {
  filter: brightness(1.02);
  transform: scale(1.03);
}

body[data-skin="noir"] .behind-body { background: transparent; }
body[data-skin="noir"] .behind-title {
  font-family: var(--n-font-display);
  color: var(--n-fg);
  font-weight: var(--n-fw-semi);
  line-height: var(--n-lh-snug);
}
body[data-skin="noir"] .behind-excerpt { color: var(--n-text-muted); }

body[data-skin="noir"] .pager-btn {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text-muted);
  border-radius: var(--n-r-sm);
}
body[data-skin="noir"] .pager-btn:hover {
  color: var(--n-fg);
  border-color: var(--n-border-strong);
}
body[data-skin="noir"] .pager-btn.active {
  background: var(--n-grad);
  color: var(--n-on-accent);
  border-color: transparent;
}


/* ---- 7. Gallery tile caption ------------------------------------------- */
/* inc/partials/gallery-tile.php emits .tile-meta on every skin; a
   visually-hidden rule at the end of assets/css/style.css keeps it invisible
   everywhere else. Only noir promotes it to a real caption. */

body[data-skin="noir"] .gallery-tile { position: relative; }

body[data-skin="noir"] .gallery-tile .tile-meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--n-s6) var(--n-s3) var(--n-s3);
  overflow: hidden;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(to top, rgba(11, 11, 13, .92) 0%, rgba(11, 11, 13, 0) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--n-dur) var(--n-ease), transform var(--n-dur) var(--n-ease-emph);
  pointer-events: none;
}
body[data-skin="noir"] .gallery-tile:hover .tile-meta,
body[data-skin="noir"] .gallery-tile:focus-visible .tile-meta {
  opacity: 1;
  transform: translateY(0);
}

body[data-skin="noir"] .tile-title {
  font-family: var(--n-font-display);
  font-size: var(--n-fz-sm);
  font-weight: var(--n-fw-semi);
  line-height: var(--n-lh-snug);
  color: var(--n-fg);
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body[data-skin="noir"] .tile-tags {
  font-size: var(--n-fz-xs);
  color: var(--n-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Touch devices have no hover: show the caption permanently rather than
   leaving the title unreachable. */
@media (hover: none) {
  body[data-skin="noir"] .gallery-tile .tile-meta {
    opacity: 1;
    transform: none;
    padding: var(--n-s5) var(--n-s2) var(--n-s2);
  }
  body[data-skin="noir"] .tile-title { -webkit-line-clamp: 1; }
  body[data-skin="noir"] .tile-tags { display: none; }
}

/* ---- 8. Mobile ---------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .featured-section:not(.behind-section) { padding: 0; }
  body[data-skin="noir"] .feat-grid { gap: var(--n-s2); }
  body[data-skin="noir"] .behind-grid { gap: var(--n-s3); }
  body[data-skin="noir"] .behind-card:hover { transform: none; }
  body[data-skin="noir"] .behind-card:active { transform: scale(.99); }
  body[data-skin="noir"] .feat-card:hover { transform: none; box-shadow: none; }
}

@media (max-width: 600px) {
  /* index-page.css:707 hides the hero photo with `display:none !important`.
     That rule was written for a world where mobile-redesign.css supplied its
     own mobile hero; with the legacy layer gone it just leaves a hole, so the
     phone gets a bare search bar under the header and nothing else.
     An !important can only be beaten by an !important — this is the third and
     last one in the skin, and like the other two it exists purely to cancel
     one. A taller crop suits the portrait viewport. */
  body[data-skin="noir"] .search-hero-banner {
    display: flex !important;
    aspect-ratio: auto;
    width: 100%;
    height: clamp(180px, 42vw, 300px);
    min-height: 0;
    max-height: none;
    padding: 0;
    border: 1px solid var(--n-border);
    border-top: 0;
    border-radius: 0 0 var(--n-r-md) var(--n-r-md);
  }
  /* index-page.css:418 hides the top bar together with the tag ticker on
     phones. The ticker is genuinely cramped there and stays hidden, but the
     hairline is the brand signature and costs 3px — it comes back, and it
     also caps the banner so its top edge is not left raw. */
  body[data-skin="noir"] .search-top-bar {
    display: block;
    height: 3px;
    background: var(--n-grad);
    border-radius: var(--n-r-md) var(--n-r-md) 0 0;
  }
  body[data-skin="noir"] .search-command { margin: var(--n-s2) 0 var(--n-s5); }
  body[data-skin="noir"] .search-bottom-area {
    margin-top: -26px;
    padding-inline: var(--n-s3);
  }
  /* index-page.css:713 squares off the pill and paints it flat black. */
  body[data-skin="noir"] .search-controls-row {
    border-radius: var(--n-r-lg);
    background: rgba(18, 18, 21, .92);
    box-shadow: var(--n-sh-2);
  }
  body[data-skin="noir"] .search-hero-input { font-size: max(16px, var(--n-fz-base)); }
  body[data-skin="noir"] .search-tags-row { padding: .4rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .gallery-tile .tile-meta,
  body[data-skin="noir"] .behind-card,
  body[data-skin="noir"] .behind-card::before,
  body[data-skin="noir"] .feat-card { transition: none; }
  body[data-skin="noir"] .behind-card:hover,
  body[data-skin="noir"] .feat-card:hover { transform: none; }
}