/* =============================================================================
   iKonX · THE NETWORK · ARTICLE CARD MODULE · network-card.css
   -----------------------------------------------------------------------------
   The premium, per-vertical color-coded article card. Shared by the blog hub
   (blog-index-template.html) and any future Network listing surface (pillar
   "related articles" rails, vertical hubs). ONE card grammar, re-skinned per
   vertical by a single inline custom-property: --card-accent (+ --card-accent-2).

   COLOR-CODING (the core correction): the gallery/blog sample only ever showed
   one pink. Every Network card now wears ITS OWN vertical's accent on the
   top rail, the tag chip, the meta, the title-hover and the hover glow. The
   renderer sets the accent per card via:
       <article class="ncard ncard--{vertical}" style="--card-accent:#XXXXXX;
                --card-accent-2:#YYYYYY">
   so the same card markup color-codes by vertical with ZERO extra CSS per row.
   Fallback accent (when no inline value is set) = Hot Pink, the brand default.

   CHASSIS-CONSISTENT: Pure Black #0A0A1A substrate · Orbitron+Inter · S86 palette
   · radius 16/12/50 · card lift + glow on hover · IO reveal (PE-safe, visible by
   default) · responsive auto-fill grid · NO em dashes (interpunct ·) · no BOM.
   The iKonX logo treatment lives in the card footer (the brand stamp).

   GOVERNING CANONS honored: visible-by-default reveal (no preview void) ·
   prefers-reduced-motion safe · tap targets >=44px · external image refs only.
   ============================================================================= */

/* ----- accent contract (per-card inline override · brand-default fallback) --- */
.ncard {
  --card-accent: #F80476;          /* set inline per vertical by the renderer */
  --card-accent-2: #CE4BC5;        /* 2nd stop for the title-hover gradient    */
  --card-accent-rgb: 248, 4, 118;  /* renderer may set for exact glow rgba()   */
}

/* ----- the responsive grid (auto-fill · never overflows) --------------------- */
.ncards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 30px;
  width: 100%;
}

/* ----- the card shell -------------------------------------------------------- */
.ncard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #111122;
  background-image:
    radial-gradient(ellipse 75% 60% at 82% 14%,
      rgba(var(--card-accent-rgb), 0.16), transparent 64%),
    radial-gradient(ellipse 60% 50% at 12% 90%,
      rgba(206, 75, 197, 0.14), transparent 66%);
  border: 1px solid #1e1e3a;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  /* PE-safe reveal: VISIBLE by default; the index reveal script opts into fade */
  opacity: 1;
  transform: none;
  transition:
    transform .38s cubic-bezier(.2, .8, .2, 1),
    box-shadow .38s ease,
    border-color .38s ease;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .42), 0 6px 18px rgba(0, 0, 0, .3);
}
.ncard > * { position: relative; z-index: 1; }

/* The top accent rail = the per-vertical color signature (the "color code") */
.ncard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg,
    var(--card-accent) 0%, var(--card-accent-2) 100%);
  opacity: .92;
}

/* Hover lift + the glow takes the vertical accent (not always pink) */
.ncard:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--card-accent-rgb), .55);
  box-shadow:
    0 30px 80px rgba(var(--card-accent-rgb), .24),
    0 12px 30px rgba(0, 0, 0, .5);
}

/* ----- thumbnail (16:9-ish OG ratio · accent-tinted placeholder gradient) ---- */
.ncard__thumb {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  position: relative;
  /* container-query context so the watermark glyph sizes to the CARD width
     (uniform fit at 3-up / 2-up / 1-up · independent of viewport width) */
  container-type: inline-size;
  background:
    radial-gradient(ellipse 90% 90% at 30% 20%,
      rgba(var(--card-accent-rgb), .30), transparent 70%),
    linear-gradient(135deg, #0A0A1A, #0F243B);
}
.ncard__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.ncard:hover .ncard__thumb img { transform: scale(1.045); }
/* When there is no thumb image, the gradient placeholder carries the vertical
   accent + a centered glyph treatment (the renderer drops .ncard__glyph in). */
.ncard__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* safe gutter so no glyph ever kisses the card edge */
  padding: 0 7%;
  box-sizing: border-box;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  /* Size to the CARD width (cqw) not the viewport (vw): the longest single
     word ("SPONSORSHIPS", 12 chars) sets the ceiling, so EVERY vertical fits
     fully inside the card at desktop 3-up, tablet 2-up and mobile 1-up.
     ~9cqw keeps the bold Orbitron look big while guaranteeing the 12-char
     word stays on one line within the 86% content box. Clamp floors/ceilings
     it so it never gets tiny on narrow cards or huge on very wide ones. */
  font-size: clamp(26px, 9cqw, 52px);
  letter-spacing: .04em;
  line-height: 1.05;
  text-align: center;
  /* keep multi-word names ("THE NETWORK") on one line; single long words
     ("INFLUENCERS", "SPONSORSHIPS") shrink via cqw rather than clip */
  white-space: nowrap;
  max-width: 100%;
  text-transform: uppercase;
  color: rgba(255, 253, 255, .14);
}

/* ----- body ------------------------------------------------------------------ */
.ncard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
}

/* Vertical/category tag chip · wears the per-vertical accent */
.ncard__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--card-accent);
  background: rgba(var(--card-accent-rgb), .12);
  border: 1px solid rgba(var(--card-accent-rgb), .42);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 13px;
  /* keep the longest chip ("Sponsorships","The Network") on one clean line */
  white-space: nowrap;
  max-width: 100%;
  text-shadow: 0 0 10px rgba(var(--card-accent-rgb), .35);
}
.ncard__tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 0 0 8px var(--card-accent);
}

/* Title · Orbitron · gradient-fills with the vertical accent on hover */
.ncard__title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.28;
  letter-spacing: -.01em;
  margin-bottom: 11px;
  color: #FFFDFF;
}
.ncard__title a { color: inherit; transition: none; }
.ncard:hover .ncard__title a {
  background: linear-gradient(135deg,
    var(--card-accent) 0%, var(--card-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Excerpt */
.ncard__excerpt {
  color: rgba(255, 253, 255, .70);
  font-family: 'Inter', sans-serif;
  font-size: .94rem;
  line-height: 1.55;
  margin-bottom: 16px;
  /* clamp to 3 lines so cards stay even in the grid */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row · read-time + (optional) issue/date · pushed to the bottom */
.ncard__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 14px;
}
.ncard__read { color: rgba(255, 253, 255, .88); }
.ncard__issue {
  background: linear-gradient(90deg, var(--card-accent), var(--card-accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ncard__meta .ncard__dot { color: var(--card-accent); font-weight: 900; }

/* ----- card footer · the iKonX logo treatment (the brand stamp) -------------- */
.ncard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 253, 255, .07);
}
.ncard__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ncard__brand img { height: 18px; width: auto; display: block; opacity: .92; }
.ncard__brand-net {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 253, 255, .42);
}
.ncard__readmore {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--card-accent);
  white-space: nowrap;
}
.ncard:hover .ncard__readmore { text-shadow: 0 0 10px rgba(var(--card-accent-rgb), .5); }

/* Whole-card link affordance (the title is the semantic link; this lets the
   entire card be clickable without nesting interactive elements). */
.ncard__stretch {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 16px;
}
.ncard:focus-within { outline: 2px solid var(--card-accent); outline-offset: 3px; }

/* ----- THE DROP variant (numbered newsletter issues) ------------------------- */
/* The Drop cards share the grammar but lock to the brand pink-magenta-coral so
   they read as the "house newsletter" family, distinct from the colorful
   per-vertical Network set. The renderer adds .ncard--drop. */
.ncard--drop {
  --card-accent: #F80476;
  --card-accent-2: #CE4BC5;
  --card-accent-rgb: 248, 4, 118;
}
.ncard--drop .ncard__tag::before { box-shadow: 0 0 8px #F80476; }

/* ----- IO reveal opt-in (PE-safe · only fades when JS arms html.js-reveal) ---- */
html.js-reveal .ncard { opacity: 0; transform: translateY(22px); }
html.js-reveal .ncard.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .ncard { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ncard__thumb img { transition: none !important; }
}

/* ----- responsive ladder (chassis breakpoints) ------------------------------- */
@media (max-width: 767px) {
  .ncards-grid { grid-template-columns: 1fr; gap: 22px; }
  .ncard__body { padding: 20px 18px 18px; }
  .ncard__title { font-size: 1.12rem; }
}
@media (max-width: 480px) {
  .ncards-grid { gap: 18px; }
}