/* ============================================================
   NEWS & EVENTS — coverflow carousel, detail modal, image lightbox
   Reuses tokens from variables.css and layout classes from pages.css
   (.page-hero, .subpage-section, .max-w, .dept-filter) — no new
   colors introduced here, same convention as the rest of pages.css.
   ============================================================ */

/* ---- Category tag colors — solid, vivid rectangular tags top-left
   on the photo (not the soft pastel pill treatment used elsewhere on
   the site) using the client's saturated base-* tokens, since a
   pastel tag would wash out against a photo the way it doesn't
   against a white card. ---- */
.ne-card__tag--news    { background: var(--crimson); }
.ne-card__tag--event   { background: var(--base-grape); }
.ne-card__tag--article { background: var(--base-teal); }

/* Modal badge keeps the existing soft pill treatment — it sits on a
   white panel, not over a photo, so the tag-* pairs still read fine there. */
.ne-modal__badge--news    { background: var(--tag-blue-bg);  color: var(--tag-blue-text); }
.ne-modal__badge--event   { background: var(--tag-pink-bg);  color: var(--tag-pink-text); }
.ne-modal__badge--article { background: var(--tag-teal-bg);  color: var(--tag-teal-text); }

/* ============================================================
   STAGE / CAROUSEL — active card is WIDE, every other card is
   NARROW (a real width difference, not a scale/blur trick) — the
   active card grows and the rest shrink as you navigate. Full
   brightness on every card, arrows fixed on both outer edges, and
   the carousel loops forever in both directions (see loop note on
   the JS side for the one deliberate simplification there).
   ============================================================ */
.ne-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-muted);
}
.ne-empty__icon { display: block; font-size: 2.2rem; margin-bottom: 0.75rem; }
.ne-empty p { font-size: 0.95rem; }

.ne-stage-section {
  padding: 1rem 1rem 2.5rem;
}

.ne-stage {
  --ne-wide: 46%;
  --ne-narrow: 25%;
  --ne-card-gap: 1.25rem;
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
}

.ne-track-viewport {
  overflow: hidden;
  border-radius: 16px; /* clips the edge of a peeking card to match its own corner radius */
  height: 460px; /* fixed row height — cards vary in WIDTH only, never height, matching the reference */
}

.ne-track {
  display: flex;
  height: 100%;
  gap: var(--ne-card-gap);
  transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.01);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y; /* let vertical page-scroll through, we handle horizontal drag ourselves */
}
.ne-track.is-dragging { cursor: grabbing; transition: none; }
/* Dragging by nature involves the pointer moving across text/images —
   this stops that turning into an accidental text-selection or the
   browser's native "drag this image as a file" ghost. */
.ne-track.is-dragging, .ne-track.is-dragging * { user-select: none; }
.ne-card__media img { -webkit-user-drag: none; user-drag: none; }

.ne-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(10,10,30,0.22);
  transition: all var(--transition);
  z-index: 10;
}
/* Fixed on both outer edges — a loop carousel has no "start"/"end"
   to sit a seam-arrow against, so both arrows anchor to the stage
   itself rather than to any particular card boundary. */
.ne-arrow--prev { left: 0.5rem; }
.ne-arrow--next { right: 0.5rem; }
.ne-arrow svg { width: 20px; height: 20px; }
.ne-arrow:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* No :disabled styling — the loop means both arrows are always live. */

.ne-card {
  position: relative;
  flex: 0 0 var(--ne-narrow);
  height: 100%;
  background: var(--navy-dark); /* shows briefly if the image is slow to load — better than a white flash */
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: flex-basis 0.5s cubic-bezier(0.22, 0.68, 0, 1.01);
}
.ne-card.is-active { flex-basis: var(--ne-wide); }
.ne-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ne-card--hidden { display: none; } /* category filter — removed from flex flow entirely, not just visually hidden */

.ne-card__media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.ne-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ne-card__media-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  background: linear-gradient(135deg, var(--navy-dark), var(--crimson-dark));
}

/* Dark-to-transparent gradient so the title stays readable over any
   photo while the top of the image stays visible and uncovered. */
.ne-card__overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top,
    rgba(8,8,20,0.88) 0%,
    rgba(8,8,20,0.72) 26%,
    rgba(8,8,20,0.32) 52%,
    rgba(8,8,20,0) 74%);
  pointer-events: none;
}

.ne-card__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 5px;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ne-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.1rem 1.25rem 1.25rem;
}
/* Sans-serif body font (Raleway, already loaded site-wide), not the
   Playfair Display serif used for headings elsewhere — the reference
   uses one clean geometric sans throughout, which reads noticeably
   crisper than a serif at this size over a photo. */
.ne-card__title {
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1.28;
  color: var(--white);
  font-weight: 700;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ne-card__date {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
  margin-bottom: 1rem;
}
.ne-card__readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 4px 4px 0; /* generous invisible hit area without visually bulking up the control */
}
.ne-card__readmore-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.ne-card__readmore-icon svg { width: 14px; height: 14px; }
.ne-card__readmore:hover .ne-card__readmore-icon { background: var(--white); color: var(--navy-dark); border-color: var(--white); }

.ne-stage__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.ne-dots { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 70vw; }
.ne-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all var(--transition);
}
.ne-dot.is-active { background: var(--navy); width: 22px; border-radius: 5px; }
.ne-counter { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.ne-stage__hint { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .ne-track, .ne-card { transition: none; }
  .ne-dot { transition: none; }
}

/* Tablet: fewer, bigger peeks fit better than the widescreen ratio. */
@media (max-width: 1024px) {
  .ne-stage { --ne-wide: 58%; --ne-narrow: 32%; --ne-card-gap: 1rem; }
  .ne-track-viewport { height: 420px; }
  .ne-card__title { font-size: 1.15rem; }
}

/* Mobile: the active card dominates, narrow cards give just enough
   peek to hint there's more either direction. */
@media (max-width: 640px) {
  .ne-stage { --ne-wide: 78%; --ne-narrow: 40%; --ne-card-gap: 0.75rem; }
  .ne-track-viewport { height: 380px; }
  .ne-arrow { width: 36px; height: 36px; }
  .ne-arrow svg { width: 16px; height: 16px; }
  .ne-card__title { font-size: 1.1rem; }
  .ne-card__body { padding: 1rem 1rem 1.1rem; }
}

/* ============================================================
   DETAIL MODAL
   ============================================================ */
.ne-modal {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.ne-modal.is-open { display: flex; }
.ne-modal__scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(10, 10, 30, 0.62);
}
.ne-modal__content {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.ne-modal__close {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(10,10,30,0.55);
  color: var(--white);
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.ne-modal__close:hover { background: var(--crimson); }

.ne-modal__hero { position: relative; flex-shrink: 0; background: var(--off-white); }
.ne-modal__hero img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}

.ne-modal__scroll {
  padding: 1.5rem 1.75rem 2rem;
  overflow-y: auto;
}
.ne-modal__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.ne-modal__date { font-size: 0.78rem; font-weight: 700; color: var(--crimson); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.ne-modal__content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy-dark);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.ne-modal__meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.9rem; }
.ne-modal__excerpt { font-size: 0.95rem; color: var(--text-dark); font-weight: 500; margin-bottom: 0.9rem; line-height: 1.6; }
.ne-modal__body { font-size: 0.92rem; color: var(--text-dark); line-height: 1.75; margin-bottom: 1.25rem; }

.ne-modal__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.ne-modal__gallery-item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  transition: transform var(--transition);
}
.ne-modal__gallery-item:hover { transform: scale(1.04); }
.ne-modal__gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.ne-modal__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background var(--transition);
}
.ne-modal__link:hover { background: var(--navy-light); }

@media (max-width: 640px) {
  .ne-modal { padding: 0; }
  .ne-modal__content { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .ne-modal__hero img { max-height: 220px; }
}

/* ============================================================
   IMAGE LIGHTBOX — full-size view, opened from the modal hero
   image or any gallery thumbnail. Sits above the detail modal
   (z-index 1000) since it can be opened from within it.
   ============================================================ */
.ne-lightbox {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1100;
  background: rgba(5, 5, 15, 0.92);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.ne-lightbox.is-open { display: flex; }
.ne-lightbox img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
}
.ne-lightbox__close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.ne-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.ne-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.ne-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.ne-lightbox__nav--prev { left: 1.25rem; }
.ne-lightbox__nav--next { right: 1.25rem; }
.ne-lightbox__caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  text-align: center;
  max-width: 80vw;
}

@media (max-width: 640px) {
  .ne-lightbox__nav { width: 40px; height: 40px; }
  .ne-lightbox__nav--prev { left: 0.5rem; }
  .ne-lightbox__nav--next { right: 0.5rem; }
}