:root {
  --bg:#0b1830;
  --ink:#ffffff;
  --muted:#9bb0d0;
  --accent:#ff2a54;

  --radius: 18px;
  --inset-gap: clamp(.75rem, 1.6vw, 2.25rem);
  --btn-size: 2.75rem;

  --meta-size: clamp(.7rem, 1.2vw, .875rem);
  --title-size: clamp(1rem, 1.2vw, 1.8rem);
  --shadow: 0;
  --x-anim: 320ms cubic-bezier(.22,.61,.36,1);
}

/* Wrapper */
.news-wrap {
  max-width: 88rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
  padding-inline: clamp(1rem, 3vw, 1.25rem);
  color: var(--ink);
}

/* ===== GRID (your template) =====
   5 columns: 1fr 1fr 1fr 1fr 0fr
   5 rows:    1fr 0 0 0 0
*/
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 0fr;
  grid-template-rows: 1fr repeat(4, 0);
  gap: var(--inset-gap);
  align-items: stretch;
}

/* Safety: let items shrink inside columns; ignore stray children */
.news-grid > * { min-width: 0; }
.news-grid > :not(.news-card) { display: none; }

/* Place items EXACTLY as requested */
.div1 { grid-area: 1 / 1 / 2 / 2; } /* row 1, col 1 */
.div2 { grid-area: 1 / 2 / 2 / 3; } /* row 1, col 2 */
.div4 { grid-area: 1 / 3 / 2 / 5; } /* row 1, col 3 → col 5 (spans 2 cols) */

/* ===== CARD ===== */
.news-card {
  position: relative;
  isolation: isolate; /* prevents overlay from covering following cards on mobile */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  box-sizing: border-box;

  border: 3px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  will-change: transform;
  transition: border-radius var(--x-anim), transform var(--x-anim);
}
.news-card:hover {
  transform: scale(1.03); /* small lift */
}
/* Intrinsic heights (no overlap):
   - Squares for div1 & div2
   - 16:9 for div4
*/
.news-card::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%; /* default 1:1 */
}
.div4.news-card::before {
  padding-top: 56.25%; /* 16:9 for the wide card */
}

/* Media layer */
.news-card .art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.02) contrast(1.02);
}

/* Content overlay */
.news-card .content {
  display: flex;
  flex-direction: column;
  gap: .5em;
  position: absolute;
  inset-inline: var(--inset-gap);
  inset-block-end: var(--inset-gap);
  z-index: 2;
  transition: inset var(--x-anim), transform var(--x-anim);
}

.news-card .meta {
  display: flex;
  color: white;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .04em;
  justify-content: space-between;
  font-size: var(--meta-size);
}

.news-card .title {
  margin: 0;
  font-weight: 800;
  font-size: var(--title-size);
  line-height: 1.18;
  color: white;
}

/* Clickable overlay */
.news-card .news-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ===================== Responsive ===================== */
@media (max-width: 42.5rem) {
  /* Stack on phones */
  .news-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-auto-rows: auto;
  }

  /* Clear explicit areas so items flow one per row */
  .div1, .div2, .div4 { grid-area: unset; }

  /* Equal, reliable height on small screens */
  .news-card::before { padding-top: 120%; }   /* ~5:6 (taller than square for nicer crop) */
  .div4.news-card::before { padding-top: 120%; } /* same height as others on mobile */

  /* Guarantee minimum tap area just in case content is short */
  .news-card { min-height: clamp(260px, 90vw, 520px); }
}