/* ══════════════════════════════════════════════════════════
   NEWS — News cards and grid
   Shared — used on index and news listing pages
══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   SECTION WRAPPER
───────────────────────────────────── */
.news-section {
  max-width:90rem; margin:0 auto; padding:3rem 1.25rem;
}
@media (min-width:56.01rem) {
  .news-section { padding:4.5rem 2rem; }
}

/* ─────────────────────────────────────
   NEWS GRID (3-col, hero spans 2 rows)
───────────────────────────────────── */
/* ─── Empty state ─── */
.news-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem; padding: 6rem 1.25rem; text-align: center;
  background: var(--off-black);
}
.news-empty svg { width: 3rem; height: 3rem; stroke: var(--faint); opacity: .5; }
.news-empty-title {
  font-family: 'Teko', sans-serif;
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
}
.news-empty-sub {
  font-size: 1.2rem; color: var(--white);
  max-width: 24rem; line-height: 1.6;
}

.news-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:auto auto;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  width:100%; box-sizing:border-box;
  overflow:hidden;
}

/* ─────────────────────────────────────
   NEWS CARDS — base
───────────────────────────────────── */
.news-card {
  background:var(--off-black); position:relative;
  overflow:hidden; cursor:pointer;
}

/* ─────────────────────────────────────
   BACKGROUND IMAGE LAYER
   Add <div class="news-card-bg" style="background-image:url(...)">
   as the first child of every .news-card.
   Without an image it is invisible; the card gradient fallback shows.
───────────────────────────────────── */
.news-card-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform .45s ease;
  background-position: top;
}
.news-card:hover .news-card-bg { transform:scale(1.05);  }

/* ─────────────────────────────────────
   GRADIENT SCRIM — sits above bg image,
   below all text content
───────────────────────────────────── */
.news-card::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Strong bottom-to-top scrim keeps text readable over any photo */
  background:
    linear-gradient(to top,
      rgba(var(--rgb-black),.97)  0%,
      rgba(var(--rgb-black),.80)  30%,
      rgba(var(--rgb-black),.35)  60%,
      rgba(var(--rgb-black),.05) 100%
    );
}

/* ─────────────────────────────────────
   HERO CARD
   Left two columns, two rows. Content
   anchored to bottom-left.
───────────────────────────────────── */
.news-card-hero {
  grid-column:1 / 3;
  grid-row:1 / 3;
  min-height:clamp(22rem, 40vw, 32.5rem);
  padding:2rem;
  display:flex; flex-direction:column; justify-content:flex-end;
}

/* Hero scrim: primarily left→right + bottom→top to keep left side dark */
.news-card-hero::after {
  background:
    linear-gradient(to right,  rgba(var(--rgb-black),.85) 0%, rgba(var(--rgb-black),.35) 55%, transparent 100%),
    linear-gradient(to top,    rgba(var(--rgb-black),.97) 0%, rgba(var(--rgb-black),.65) 35%, rgba(var(--rgb-black),.1) 70%, transparent 100%);
}

/* Red left-edge bar — z-index:2 to sit above scrim */
.news-card-hero::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:.25rem; background:var(--red); z-index:2;
}

/* ─────────────────────────────────────
   SMALL SIDEBAR CARDS
   Content anchored to bottom.
   Gradient fallback for when no image.
───────────────────────────────────── */
.news-card-small {
  min-height:8rem; display:flex; flex-direction:column;
  justify-content:flex-end; padding:1rem 1.125rem;
}

/* Fallback gradient background (visible when no .news-card-bg image) */
.news-card-small:not(:has(.news-card-bg[style])) {
  background:linear-gradient(135deg,var(--news-card-dark),var(--off-black));
}
.news-card-small:nth-child(even):not(:has(.news-card-bg[style])) {
  background:linear-gradient(135deg,var(--surface-darker),var(--surface));
}

/* Small card scrim: stronger overall + CI texture layered on top */
.news-card-small::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    var(--ci-texture),
    linear-gradient(to top,
      rgba(var(--rgb-black),.97)  0%,
      rgba(var(--rgb-black),.82)  40%,
      rgba(var(--rgb-black),.45)  70%,
      rgba(var(--rgb-black),.1)  100%
    );
  background-size: 18.75rem 18.75rem, cover;
}

/* ─────────────────────────────────────
   CONTENT — sits above scrim (z-index:2)
   Exclude .news-card-bg and .news-hero-media
   (both are absolute-positioned bg layers)
───────────────────────────────────── */
.news-card > *:not(.news-card-bg):not(.news-hero-media) {
  position:relative; z-index:2;
}

/* ─────────────────────────────────────
   CARD CONTENT ELEMENTS
───────────────────────────────────── */
.news-meta { display:flex; align-items:center; gap:.5rem; margin-bottom:.625rem; }
/* ─── Chips ─────────────────────────────────────────────── */
.news-chip {
  display:inline-flex; align-items:center;
  font-family:'Teko',sans-serif;
  font-size: 1rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.18rem .55rem .16rem;
  white-space:nowrap;
  line-height:1.4;
}

/* Type chips — solid accent colour */
.chip-match-report  { background:var(--red);           color:var(--white); }
.chip-match-preview { background:var(--chip-blue);     color:var(--white); }
.chip-final-score   { background:var(--chip-orange);   color:var(--white); }
.chip-transfer      { background:var(--chip-teal);     color:var(--white); }
.chip-matchday      { background:var(--chip-blue-dim); color:var(--white); }
.chip-fan-info      { background:var(--chip-green);    color:var(--white); }
.chip-club-news     { background:var(--chip-gray-bg);  color:var(--white); border:1px solid var(--chip-gray-border); }
.chip-press         { background:var(--chip-gray-dim); color:var(--chip-gray-text); border:1px solid var(--chip-gray-border2); }
.chip-lippe         { background:linear-gradient(90deg,var(--chip-purple),var(--chip-blue)); color:var(--white); }

/* Team chips — secondary, with subtle fill so they're readable */
.news-chip-team {
  font-size: 1rem; letter-spacing:.12em;
}
.chip-youth { background:var(--chip-youth-bg);   border:1px solid var(--chip-youth-border); color:var(--white); }
.chip-women { background:var(--chip-women-bg);   border:1px solid var(--chip-women-border); color:var(--white); }
.chip-club  { background:var(--chip-club-bg);    border:1px solid var(--chip-club-border);  color:var(--white); }

.news-time { font-size: 1.2rem; color:var(--subtle); font-weight:500; }

.news-headline {
  font-family:'Teko',sans-serif;
  font-weight:900; text-transform:uppercase;
  letter-spacing:.03em; line-height:1.05;
  color:var(--white);
  text-shadow:0 1px 4px rgba(var(--rgb-pure-black),.6);
}
.news-card-hero .news-headline { font-size:clamp(1.375rem,5vw,2.375rem); margin-bottom:.75rem; }
.news-card-small .news-headline { font-size:1.125rem; }

.news-excerpt {
  font-size: 1.2rem; color:var(--gray-100);
  line-height:1.6; max-width:32.5rem; margin-bottom:.75rem;
  text-shadow:0 1px 3px rgba(var(--rgb-pure-black),.5);
  display:none;
  overflow:hidden;
}
@media (min-width:40.01rem) {
  .news-excerpt {
    display:-webkit-box;
    -webkit-line-clamp:3;
    line-clamp:3;
    -webkit-box-orient:vertical;
  }
}


/* Large score watermark (decorative, behind headline but above scrim) */
.news-score-bg {
  position:absolute; top:1.25rem; right:1.25rem; z-index:2;
  font-family:'Teko',sans-serif;
  font-size:3.5rem; font-weight:900;
  color:rgba(var(--rgb-white),.07); line-height:1;
  pointer-events:none; user-select:none;
}

/* ─────────────────────────────────────
   HERO — blurred backdrop + contained image
   Portrait images: full image centered, blurred
   sides fill the gap. Landscape: image fills
   the card, backdrop barely visible.
───────────────────────────────────── */
.news-hero-media {
  position:absolute; inset:0; z-index:0; overflow:hidden;
}

/* Blurred backdrop — same image, cover-filled, softened */
.news-hero-blur {
  position:absolute;
  inset:-8%;          /* overshoot so blur edges never show */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(28px);
  opacity:.55;
  transition:transform .45s ease;
}
.news-card:hover .news-hero-blur { transform:scale(1.06); }

/* Actual image — contained and centered */
.news-hero-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  transition:transform .45s ease;
}
.news-card:hover .news-hero-img { transform:scale(1.03); }