/* Reusable noir carousel + carousel-panel component (usable on any page).
   Split out of homeNoir.css so carousels are not homepage-only.

   Two layers, keyed by component classes (NOT the .nyn-home body class):

   .nyn-carousel — the carousel machinery (track/slides/arrows/dots). Add this
     class to a .carousel element; nynCarousel.js initializes every instance.

   .nyn-cpanel — the "carousel panel" box: noir panel chrome + a carousel of
     image+html pages. Rendered by the {% nynPanelCarousel "<id>" %} template
     tag from a JR_PANEL_CAROUSELS entry (settings_jr.py); see
     core/templates/core/_nynPanelCarousel.html for how to add one to a page.

   Only global design tokens are used (--nyn-* from siteChrome.css, fonts from
   fonts.css — both loaded in the base layout), so this works site-wide. */

/* ---------- Carousel machinery (.nyn-carousel) ---------- */
.nyn-carousel {
  overflow: hidden;
  position: relative;
}
.nyn-carousel .car-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--nyn-ink);
  background: var(--nyn-paper-raised);
  color: var(--nyn-ink);
  font-family: 'Courier Prime', monospace;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  border-radius: 0;
  padding: 0;
}
.nyn-carousel .car-btn:hover {
  background: var(--nyn-cab);
  border-color: var(--nyn-cab);
}
.nyn-carousel .car-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: color-mix(in srgb, var(--nyn-paper-raised) 85%, transparent);
  box-shadow: 0 2px 10px rgba(25,25,33,0.25);
}
.nyn-carousel .car-overlay.prev { left: 14px; }
.nyn-carousel .car-overlay.next { right: 14px; }
.nyn-carousel .car-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.nyn-carousel .car-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.nyn-carousel .car-dots {
  padding: 14px 0 16px;
  border-top: 1px solid var(--nyn-hairline);
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0;
}
.nyn-carousel .car-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--nyn-smoke);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nyn-carousel .car-dot[aria-current="true"] {
  background: var(--nyn-cab);
  border-color: var(--nyn-cab-deep);
}
.nyn-carousel .car-btn:focus-visible,
.nyn-carousel .car-dot:focus-visible {
  outline: 3px solid var(--nyn-cab);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .nyn-carousel .car-track { transition: none !important; }
}

/* ---------- Carousel panel box (.nyn-cpanel) ---------- */
/* panel chrome + head, mirroring the homepage .panel/.panel-head look so the
   box renders identically off-homepage */
.nyn-cpanel {
  background: var(--nyn-paper-raised);
  border: 1px solid var(--nyn-hairline);
}
.nyn-cpanel .panel-head {
  padding: 10px 12px 10px 10px;
  border-bottom: 1px solid var(--nyn-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nyn-cpanel .panel-head h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 23px;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  color: var(--nyn-ink);
}
/* mono-note styling anywhere in the box (head link, "Read more" in the copy) */
.nyn-cpanel .mono-note {
  font-family: 'Courier Prime', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nyn-smoke);
  white-space: nowrap;
}
/* flex-centering leaves the small mono note riding high next to the tall
   Oswald heading (its metrics sit low in its box) — nudge down to align */
.nyn-cpanel .panel-head .mono-note {
  position: relative;
  top: 3px;
}
.nyn-cpanel a.mono-note {
  text-decoration: none;
  border-bottom: 1px solid var(--nyn-hairline);
}
.nyn-cpanel a.mono-note:hover {
  color: var(--nyn-cab-deep);
  border-bottom-color: var(--nyn-cab);
}

/* one image+html page (a .car-slide's content) */
.nyn-cpanel .cpanel-body {
  display: grid;
  /* falls back to the standard art column width off-homepage; body.nyn-home
     supplies the shared token on the homepage */
  grid-template-columns: var(--nyn-art-col-w, 230px) 1fr;
  gap: 0;
  /* manila interior, same as the homepage FEATURED CASES .case-card */
  background: var(--nyn-manila);
}
.nyn-cpanel .cpanel-art {
  background: #241C27;
  border-right: 1px solid var(--nyn-hairline);
}
.nyn-cpanel .cpanel-art a {
  display: block;
  height: 100%;
}
.nyn-cpanel .cpanel-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* source is square; column is near-square */
}
.nyn-cpanel .cpanel-copy {
  padding: 16px 22px 16px;
  font-family: 'Newsreader', Georgia, serif;
  color: var(--nyn-ink);
  font-size: 20px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nyn-cpanel .cpanel-copy p {
  max-width: 68ch;
  margin-bottom: 10px;
}
.nyn-cpanel .cpanel-copy p:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .nyn-cpanel .cpanel-body { grid-template-columns: 1fr; }
  .nyn-cpanel .cpanel-art { border-right: none; border-bottom: 1px solid var(--nyn-hairline); }
  .nyn-cpanel .cpanel-art img { max-height: 420px; }
}