/*
 * WFP Homepage Module
 * Hero, featured story grid, section blocks.
 */

/* =============================================================================
   HOMEPAGE HERO
   ============================================================================= */

.wfp-hero {
  position: relative;
  background: var(--contrast);
  color: var(--base-3);
  overflow: hidden;
}

.wfp-hero--with-image {
  min-height: 520px;
  display: flex;
  align-items: flex-end;
}

.wfp-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.45;
}

.wfp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    hsl(0 0% 8% / 0.92) 0%,
    hsl(0 0% 8% / 0.5) 50%,
    hsl(0 0% 8% / 0.1) 100%
  );
}

.wfp-hero__content {
  position: relative;
  padding: var(--space-2xl) 0 var(--space-xl);
  max-width: 760px;
}

.wfp-hero__kicker {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.wfp-hero__title {
  font-size: var(--step-5);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--base-3);
  margin: 0 0 var(--space-s);
}

.wfp-hero__title a {
  color: inherit;
  text-decoration: none;
}

.wfp-hero__title a:hover {
  color: hsl(0 0% 100% / 0.85);
}

.wfp-hero__deck {
  font-size: var(--step-1);
  color: hsl(0 0% 100% / 0.8);
  line-height: 1.45;
  margin: 0 0 var(--space-m);
  max-width: 580px;
}

.wfp-hero__byline {
  font-size: var(--step--1);
  color: hsl(0 0% 100% / 0.6);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.wfp-hero__byline a {
  color: hsl(0 0% 100% / 0.8);
  text-decoration: none;
}

.wfp-hero__byline a:hover {
  color: var(--base-3);
}

/* =============================================================================
   FEATURED STORIES GRID
   ============================================================================= */

.wfp-featured-grid {
  display: grid;
  gap: var(--wfp-grid-gap);
}

/* 2-column: big left + stack right */
.wfp-featured-grid--2col {
  grid-template-columns: 3fr 2fr;
}

.wfp-featured-grid--2col .wfp-story-card:first-child {
  grid-row: span 2;
}

/* 3-column */
.wfp-featured-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* Full-width lead + 3 below */
.wfp-featured-grid--lead {
  grid-template-columns: repeat(3, 1fr);
}

.wfp-featured-grid--lead .wfp-story-card:first-child {
  grid-column: span 3;
}

@media (max-width: 900px) {
  .wfp-featured-grid--2col,
  .wfp-featured-grid--3col {
    grid-template-columns: 1fr 1fr;
  }

  .wfp-featured-grid--2col .wfp-story-card:first-child {
    grid-row: auto;
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .wfp-featured-grid--2col,
  .wfp-featured-grid--3col,
  .wfp-featured-grid--lead {
    grid-template-columns: 1fr;
  }

  .wfp-featured-grid--2col .wfp-story-card:first-child,
  .wfp-featured-grid--lead .wfp-story-card:first-child {
    grid-column: auto;
  }
}

/* =============================================================================
   HOMEPAGE SECTIONS
   ============================================================================= */

.wfp-hp-section {
  padding: var(--space-2xl) 0;
}

.wfp-hp-section + .wfp-hp-section {
  border-top: var(--border);
}

/* Alternating tinted sections */
.wfp-hp-section--tinted {
  background: var(--base-2);
}

/* =============================================================================
   TICKER / BREAKING BAR
   ============================================================================= */

.wfp-breaking-bar {
  background: var(--accent);
  color: var(--base-3);
  padding: var(--space-2xs) 0;
  font-size: var(--step--1);
  font-weight: 600;
}

.wfp-breaking-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.wfp-breaking-bar__label {
  background: var(--base-3);
  color: var(--accent);
  padding: 0.15em 0.6em;
  border-radius: var(--radius-full);
  font-size: var(--step--2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
}

.wfp-breaking-bar a {
  color: inherit;
  text-decoration: none;
}

.wfp-breaking-bar a:hover {
  text-decoration: underline;
}