/* ==========================================================================
   CNT NEWS — styles.css
   Custom layer on top of Tailwind (CDN). Handles the parts Tailwind can't:
   breaking-ticker marquee, sponsor logo marquee, Swiper coverflow polish,
   masonry gallery, lightbox, reader/tip modals and skeleton shimmer.
   ========================================================================== */

/* ---------- 0. Base tokens & resets ---------- */
:root {
  --cnt-bg:      #121212;
  --cnt-bg-2:    #18181c;
  --cnt-surface: rgba(255, 255, 255, 0.05);
  --cnt-line:    rgba(255, 255, 255, 0.10);
  --cnt-accent:  #FFD700;
  --cnt-accent2: #F5C518;
  --cnt-dim:     #a1a1aa;
}

html { background: var(--cnt-bg); }

body {
  background-color: var(--cnt-bg);
  color: #e4e4e7;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display { font-family: "Oswald", "Arial Narrow", sans-serif; }

::selection { background: var(--cnt-accent); color: #000; }

/* slim dark scrollbars fit the newsroom look */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #141417; }
::-webkit-scrollbar-thumb { background: #2c2c31; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--cnt-accent); }

/* ---------- 1. Reusable surfaces ---------- */
.card {
  background: var(--cnt-surface);
  border: 1px solid var(--cnt-line);
  border-radius: 1rem;
}
.card-hover {
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card-hover:hover {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.30), 0 22px 44px -18px rgba(255, 215, 0, 0.14);
}

/* yellow category badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 215, 0, 0.14);
  color: var(--cnt-accent);
  border: 1px solid rgba(255, 215, 0, 0.45);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .18rem .6rem;
  border-radius: .375rem;
  white-space: nowrap;
}
.badge::before { content: "\25CF"; font-size: .5rem; }

/* filter pills */
.pill {
  padding: .5rem 1.15rem;
  border-radius: 9999px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #c9c9cf;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: all .22s ease;
  cursor: pointer;
}
.pill:hover { border-color: rgba(255, 215, 0, 0.5); color: var(--cnt-accent); }
.pill.active {
  background: var(--cnt-accent);
  color: #000;
  border-color: var(--cnt-accent);
  box-shadow: 0 2px 14px rgba(255, 215, 0, 0.28);
}

/* inputs */
.cnt-input {
  transition: border-color .2s, box-shadow .2s;
}
.cnt-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.28);
}

/* skeleton shimmer loading placeholders */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 215, 0, 0.10) 45%,
    rgba(255, 255, 255, 0) 90%);
  transform: translateX(-100%);
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* pulsing dot for the breaking label */
@keyframes cnt-ping {
  0%   { transform: scale(1);   opacity: .7; }
  60%  { transform: scale(1.9); opacity: .15; }
  100% { transform: scale(1.9); opacity: 0; }
}
.animate-ping span,
.animate-ping { animation: cnt-ping 1.6s ease-out infinite; }

/* ---------- 2. Breaking news ticker marquee ---------- */
.ticker-viewport { overflow: hidden; }
.ticker-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  will-change: transform;
  animation: cnt-marquee-scroll 42s linear infinite;
}
.ticker-viewport:hover .ticker-track { animation-play-state: paused; }
.ticker-track li {
  font-size: .8125rem;
  font-weight: 600;
  color: #d6d6dc;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.ticker-track li::before {
  content: "";
  width: .32rem;
  height: .32rem;
  border-radius: 9999px;
  background: rgba(255, 215, 0, 0.45);
  flex: none;
}
/* Shared loop for BOTH marquees, so a restart always lands on a
   pixel-identical frame. The end offset is the measured width of ONE copy of
   the content ("one period"): app.js repeats the pattern until it covers the
   bar and publishes that distance as `--cnt-marquee-shift`, and the 50%
   fallback keeps the strip moving if the script never runs.

   A percentage shift cannot be exact here: two copies separated by a flex `gap`
   are NOT `-50%` apart, because the seam between them carries a single gap
   while a copy spans `n` of them. That is what left the loop half a gap short
   (24px on the ticker, 28px on the sponsor strip) so the row snapped back on
   every cycle. */
@keyframes cnt-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--cnt-marquee-shift, 50%))); }
}

/* ---------- 3. Sponsor logo carousel (infinite marquee) ---------- */
.marquee-viewport {
  overflow: hidden;
  padding: 1.35rem 0 .5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  will-change: transform;
  animation: cnt-marquee-scroll 30s linear infinite;
}
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }

/* full-color wordmark logos; yellow glow on hover */
.sponsor-logo {
  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnt-accent);             /* full color, no grayscale */
  opacity: 1;
  white-space: nowrap;
  padding: .45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: .5rem;
  background: rgba(255, 255, 255, 0.035);
  transition: color .25s, border-color .25s, box-shadow .25s;
  cursor: default;
}
.sponsor-logo:hover {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35), 0 0 22px rgba(255, 215, 0, 0.18);
}
/* optional logo images (set from Studio → Partners); they render in their
   own colors, so only sizing is needed here */
.sponsor-logo img { display: block; max-height: 2.1rem; max-width: 10rem; width: auto; }
a.sponsor-logo { cursor: pointer; text-decoration: none; }

/* footer helpers */
.footer-link {
  color: #9c9ca4;
  transition: color .2s;
  position: relative;
}
.footer-link:hover { color: var(--cnt-accent); }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  color: #a9a9b1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all .22s ease;
}
.social-btn:hover {
  color: var(--cnt-accent);
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35);
  transform: translateY(-2px);
}

/* admin shortcut button (footer, "Follow CNT" column) */
.admin-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  padding: .55rem 1rem;
  border-radius: .5rem;
  background: var(--cnt-accent);
  color: #121212;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .02em;
  transition: all .22s ease;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.25);
}
.admin-footer-btn:hover {
  background: var(--cnt-accent2);
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.45);
  transform: translateY(-2px);
}
.admin-footer-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ---------- 4. Swiper 3D coverflow — CNT polish ---------- */
.video-swiper { padding: 1.25rem 0 3.5rem; }

/* side slides recede + fade into the background; active slide stays sharp */
.video-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: .72;
  transition: opacity .45s ease;
}
.video-swiper .swiper-slide-active { opacity: 1; }

/* only the active slide should be clickable (embeds disabled elsewhere) */
.video-swiper .swiper-slide:not(.swiper-slide-active) .video-frame { pointer-events: none; }

.video-slide {
  width: 100%;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.65);
  transition: border-color .3s, box-shadow .3s;
}
.video-slide:hover {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.28), 0 26px 52px -18px rgba(255, 215, 0, 0.16);
}

.video-frame { position: relative; aspect-ratio: 16 / 9; }
.video-thumb { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.video-duration {
  position: absolute;
  right: .6rem;
  bottom: .55rem;
  background: rgba(0, 0, 0, 0.78);
  color: var(--cnt-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem;
  padding: .15rem .45rem;
  border-radius: .3rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.video-play {
  /* full-bleed overlay on the 16:9 thumbnail — Flexbox centers the yellow
     play button perfectly both vertically and horizontally */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  transition: background .25s;
}
.video-play:hover { background: rgba(0, 0, 0, 0.25); }
.video-play-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: var(--cnt-accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.35), 0 12px 28px rgba(255, 215, 0, 0.3);
  transition: transform .25s;
}
.video-play-btn:hover { transform: scale(1.08); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-title-block { padding: .85rem .95rem .6rem; }
.video-title-block .eyebrow {
  font-size: .625rem;
  color: var(--cnt-accent);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
}
.video-title-block h3 {
  font-size: 1rem;
  line-height: 1.35;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* navigation arrows — yellow ring buttons.
   Swiper's base `.swiper { overflow: hidden }` clips anything painted outside
   the carousel box, so the arrows are anchored INSIDE the empty control band
   reserved by `.video-swiper`'s bottom padding (the old `top: calc(100% + .5rem)`
   put them fully below the box, where they were clipped away).
   `margin: 0` neutralises Swiper's `margin-top: -nav-size/2` offset.
   The offsets below are declared explicitly (mirrored left/right) so the pair
   stays locked symmetrically at every breakpoint, independent of Swiper's
   `--swiper-navigation-sides-offset` default. Flex centering is restated here
   so the arrow glyph is always dead-centre in the ring, even if Swiper's own
   button rules ever change. */
.video-nav { position: static; }
.video-swiper { position: relative; }
.video-swiper .swiper-button-prev::after,
.video-swiper .swiper-button-next::after { display: none; }
.video-swiper .swiper-button-prev,
.video-swiper .swiper-button-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  top: auto;                    /* was calc(100% + .5rem) → clipped by overflow */
  bottom: .25rem;               /* centres the 3rem button in the 3.5rem band */
  margin: 0;
  transform: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d6d6dc;
  border-radius: 9999px;
  transition: all .22s ease;
}
.video-swiper .swiper-button-prev {
  left: .625rem;                /* mirrored twin of the next button's right offset */
  right: auto;
}
.video-swiper .swiper-button-next {
  right: .625rem;
  left: auto;
}
.video-swiper .swiper-button-prev:hover,
.video-swiper .swiper-button-next:hover {
  color: var(--cnt-accent);
  border-color: rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.10);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35);
}

/* pagination bullets */
.video-swiper .swiper-pagination { bottom: -0.25rem; }
.video-swiper .swiper-pagination-bullet {
  width: .55rem;
  height: .55rem;
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
  transition: all .22s;
}
.video-swiper .swiper-pagination-bullet-active {
  background: var(--cnt-accent);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.55);
  transform: scale(1.25);
}

/* ---------- 5. Photo gallery masonry + hover glow ---------- */
.masonry {
  column-count: 3;
  column-gap: 1.25rem;
}
@media (max-width: 1023px) { .masonry { column-count: 2; } }
@media (max-width: 639px)  { .masonry { column-count: 1; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  display: block;
}
.masonry-figure {
  position: relative;
  border-radius: .9rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.masonry-figure img {
  width: 100%;
  display: block;
  transition: transform .5s ease, filter .3s;
}
.masonry-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: .9rem;
  border: 2px solid rgba(255, 215, 0, 0);
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  pointer-events: none;
  transition: border-color .3s, box-shadow .3s;
}
.masonry-figure:hover::after {
  border-color: rgba(255, 215, 0, 0.75);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.4), 0 0 34px rgba(255, 215, 0, 0.22);
}
.masonry-figure:hover img { transform: scale(1.06); }

.masonry-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .6rem .85rem .55rem;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.92), rgba(10, 10, 12, 0));
  color: #ffffff;
  font-size: .8125rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.masonry-figure:hover .masonry-caption { opacity: 1; transform: translateY(0); }
.masonry-caption .loc {
  display: block;
  font-size: .6875rem;
  color: var(--cnt-accent);
  letter-spacing: .05em;
}
.masonry-caption .meta {
  display: block;
  font-size: .625rem;
  color: #8e8e96;
  letter-spacing: .04em;
}

/* ---------- 6. Lightbox ---------- */
.lb-stage { position: relative; margin: 0; border-radius: 1rem; }
.lb-media { animation: lb-in .3s ease; max-width: calc(100vw - 12rem); }
.lb-caption {
  margin-top: .75rem;
  text-align: center;
  color: #e4e4e7;
  font-size: .9375rem;
  line-height: 1.5;
}
.lb-caption .loc {
  display: block;
  font-size: .75rem;
  color: var(--cnt-accent);
  letter-spacing: .06em;
}
.lb-nav {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #d6d6dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .22s;
  flex: none;
}
.lb-nav:hover {
  color: var(--cnt-accent);
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.35);
}
@keyframes lb-in {
  from { opacity: .2; transform: scale(.96); }
  to   { opacity: 1;  transform: scale(1); }
}

/* ---------- 7. Modals (reader, tip) ---------- */
.modal-backdrop {
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(6px);
}
.modal-panel {
  backdrop-filter: blur(2px);
  animation: modal-pop .28s ease-out;
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.modal-open { overflow: hidden; }

/* reader modal typography */
#articleBody .am-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
#articleBody .am-hero img { width: 100%; height: 100%; object-fit: cover; }
#articleBody .am-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.05));
}
#articleBody .am-meta {
  font-size: .8rem;
  color: #9c9ca4;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
#articleBody .am-meta .sep::before { content: "\00b7"; }
#articleBody .am-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #dcdce2;
  margin-bottom: 1rem;
}
#articleBody .am-share-bar {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .9rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: .875rem;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--cnt-accent);
  color: #000;
  font-weight: 700;
  font-size: .875rem;
  padding: .6rem 1.1rem;
  border-radius: .625rem;
  transition: all .2s;
}
.copy-btn.copied { background: #0f9d58; color: #fff; }

/* ---------- 8. Tip FAB ---------- */
#tipFab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(255, 215, 0, 0.45);
  animation: fab-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* ---------- 9. Accessibility & motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  /* the loop distance is measured in pixels, so this only slows the strips
     down - the restart itself stays seamless */
  .ticker-track, .marquee-track { animation-duration: 60s; }
  .skeleton::after, .animate-ping, #tipFab::after { animation: none; }
  .masonry-figure img, .video-play-btn { transition: none; }
}

@media (max-width: 767px) {
  .video-slide { border-radius: .75rem; }
  .video-play-btn { width: 3.25rem; height: 3.25rem; }
  .lb-media { max-width: calc(100vw - 7rem); }
}

/* ---------- 10. Component helpers used by app.js ---------- */
/* video title overlay on the thumbnail (spec: title overlay) */
.video-frame-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5rem .7rem .55rem;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.9), rgba(10, 10, 12, 0));
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  opacity: .92;
}

/* separator dot used inside meta lines */
.sep::before { content: "\00b7"; margin: 0 .1rem; }

/* sticky header gets a deeper shadow once the page scrolls */
.header-scrolled { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45); }

/* event date badge — solid yellow block with day + month */
.date-badge {
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: .75rem;
  background: var(--cnt-accent);
  color: #000;
  border: 1px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.22);
  display: flex;
}
.date-badge-day { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.date-badge-mon { font-size: .6rem; font-weight: 700; letter-spacing: .1em; line-height: 1; }

/* image fallback marker (branded advert riddles broken CDN thumbs) */
.img-fallback { object-fit: cover; }