@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

/* ============================================
   ILFORD inCOLOUR 2026 — news.css
   News page only

   @import must stay on line 1 — any rule above it
   and the browser drops it silently.
   ============================================ */

.vlt-page-title { display: none; }
.vlt-main { padding-top: 0; }

/* ============================================
   HERO
   ============================================ */
.ic-nhero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  max-height: 560px;
  padding: 80px 20px;
  color: #fff;
  overflow: hidden;
  background: #150c33 url('/wp-content/uploads/2026/07/news-page.jpg') center center / cover no-repeat;
}

.ic-nhero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(18,9,44,.94) 0%,
    rgba(18,9,44,.86) 40%,
    rgba(18,9,44,.6) 70%,
    rgba(18,9,44,.42) 100%
  );
}

/* ---------- Paint decor ---------- */
.ic-nhero .ic-splat { z-index: 2; }

.ic-nhero__splat-1 {
  --splat-w: 210px; --splat-h: 210px;
  --splat-r: -22deg; --splat-o: .5;
  top: 10%; left: -80px;
}
.ic-nhero__splat-2 {
  --splat-w: 180px; --splat-h: 180px;
  --splat-r: 28deg; --splat-o: .45;
  bottom: 8%; right: -70px;
}

.ic-nhero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 900px;
}

.ic-nhero__eyebrow {
  font-family: 'Fredoka', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: .9rem !important;
  font-weight: 600;
  color: var(--ic-yellow);
  margin-bottom: 12px !important;
}

.ic-nhero__title {
  color: #fff !important;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.5px;
  margin-bottom: 14px !important;
}
.ic-nhero__title em {
  font-family: 'Kaushan Script', cursive !important;
  font-style: normal;
  font-weight: 400;
  color: var(--ic-yellow);
}

.ic-nhero__lead {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 0 !important;
  opacity: .95;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .ic-nhero {
    min-height: auto;
    max-height: none;
    padding: 60px 20px;
    background-position: 60% center;
  }
  .ic-nhero::before {
    background: linear-gradient(160deg, rgba(18,9,44,.94) 0%, rgba(18,9,44,.82) 100%);
  }
  .ic-nhero__splat-2 { display: none; }
}

@media (max-width: 520px) {
  .ic-nhero__splat-1 { --splat-w: 120px; --splat-h: 120px; --splat-o: .4; left: -68px; }
}

/* ============================================
   ARTICLE
   D2-style breakout layout: narrow text column,
   images + pull-quote spill wider. Three-track grid
   — narrow centre, wide breakout, full bleed.
   Drip lives here as .ic-drip--top.
   ============================================ */
.ic-article {
  position: relative;
  background: #fff;
  padding: 128px 20px 90px;
  overflow: hidden;
}

.ic-article__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    1fr
    minmax(0, 680px)
    1fr;
  row-gap: 22px;
}

/* default: everything sits in the narrow centre track */
.ic-article__body > * {
  grid-column: 2;
}

/* ---------- Paint decor ----------
   In the side tracks, clear of the narrow column. */
.ic-article__splat-1 {
  --splat-w: 240px; --splat-h: 240px;
  --splat-r: -24deg; --splat-o: .85;
  top: 150px; left: -60px;
}
.ic-article__splat-2 {
  --splat-w: 210px; --splat-h: 210px;
  --splat-r: 28deg; --splat-o: .8;
  top: 40%; right: -55px;
}
.ic-article__splat-3 {
  --splat-w: 220px; --splat-h: 220px;
  --splat-r: -32deg; --splat-o: .8;
  bottom: 20%; left: -58px;
}
.ic-article__splat-4 {
  --splat-w: 240px; --splat-h: 240px;
  --splat-r: 16deg; --splat-o: .85;
  bottom: -55px; right: -55px;
}

/* ---------- Standfirst ---------- */
.ic-article__standfirst {
  font-size: 1.35rem !important;
  line-height: 1.6 !important;
  font-weight: 600;
  color: var(--ic-navy) !important;
  margin-bottom: 12px !important;
}

/* ---------- Body copy ---------- */
.ic-article__body p {
  font-size: 1.08rem;
  line-height: 1.9;
  color: #2c2c2c;
  margin-bottom: 0 !important;
}

/* ---------- Breakout image ---------- */
.ic-article__wide {
  grid-column: 1 / -1;
  width: min(900px, 100%);
  justify-self: center;
  margin: 20px 0 !important;
}
.ic-article__wide img {
  width: 100%;
  border-radius: var(--ic-radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  display: block;
}
.ic-article__wide figcaption {
  margin-top: 10px;
  font-size: .85rem;
  color: #888;
  text-align: center;
}

/* ---------- Framed image + hover zoom ----------
   The frame carries the corners + shadow and clips
   the image, so it can scale gently on hover without
   the shadow being cropped. */
.ic-article__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--ic-radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.ic-article__frame img {
  width: 100%;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transition: transform .55s ease;
}
.ic-article__frame:hover img { transform: scale(1.045); }

/* ---------- Paired breakout (two walls side by side) ---------- */
.ic-article__duo {
  width: min(1000px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ic-article__duo figcaption { grid-column: 1 / -1; }

/* ---------- Pull quote (wide divider) ---------- */
.ic-article__quote {
  grid-column: 1 / -1;
  width: min(820px, 100%);
  justify-self: center;
  margin: 34px 0 !important;
  padding: 8px 0 8px 30px;
  border-left: 6px solid var(--ic-red);
  font-family: 'Kaushan Script', cursive !important;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  line-height: 1.35 !important;
  color: var(--ic-navy);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ic-article { padding-top: 106px; }
}

@media (max-width: 768px) {
  .ic-article { padding: 96px 20px 64px; }

  /* collapse the three-track grid — everything full width */
  .ic-article__body { grid-template-columns: 1fr; }
  .ic-article__body > *,
  .ic-article__wide,
  .ic-article__quote { grid-column: 1; width: 100%; }

  .ic-article__body p { font-size: 1rem; line-height: 1.8; }
  .ic-article__standfirst { font-size: 1.18rem !important; }

  .ic-article__splat-1 { --splat-w: 150px; --splat-h: 150px; --splat-o: .7; left: -78px; }
  .ic-article__splat-2 { --splat-w: 135px; --splat-h: 135px; --splat-o: .7; right: -70px; }
  .ic-article__splat-3 { --splat-w: 140px; --splat-h: 140px; --splat-o: .7; left: -72px; }
  .ic-article__splat-4 { --splat-w: 145px; --splat-h: 145px; --splat-o: .7; right: -68px; }
}

@media (max-width: 620px) {
  .ic-article__duo { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 520px) {
  .ic-article { padding-top: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-article__frame img { transition: none; }
  .ic-article__frame:hover img { transform: none; }
}