/* ═══════════════════════════════════════════
   BJF — Layout: Sections & Grids
   ═══════════════════════════════════════════ */

/* ── HERO ── */

/*
 * The hero uses three stacked gradients to recreate the logo's
 * faceted, overlapping-colour depth effect:
 *   1. Base layer: deep indigo → violet → plum diagonal sweep
 *   2. Mid facet:  periwinkle blue wash from top-right (cool counterpoint)
 *   3. Accent:     cerise glow from bottom-left edge
 * These blend exactly as the logo's polygon facets do.
 */
.hero {
  position: relative;
  background:
    linear-gradient(rgba(45, 9, 51, 0.65), rgba(45, 9, 51, 0.65)),
    url('../images/hero-background.png') center center / cover no-repeat;
  color: var(--bjf-white);
  overflow: hidden;
  padding: var(--space-24) 0 var(--space-24);
}

.hero__bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/*
 * Facet shapes: clipped polygons that mimic the logo's
 * geometric overlay planes — visible as subtle tonal shifts.
 */
.hero__shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.04);
  clip-path: polygon(0% 0%, 100% 20%, 80% 100%, 0% 85%);
}

.hero__shape--1 {
  width: 680px;
  height: 680px;
  top: -200px;
  right: -100px;
  background: rgba(142, 160, 196, 0.10); /* periwinkle facet */
  clip-path: polygon(20% 0%, 100% 0%, 100% 70%, 40% 100%);
  border-radius: 0;
}

.hero__shape--2 {
  width: 420px;
  height: 420px;
  bottom: -120px;
  left: 15%;
  background: rgba(184, 56, 112, 0.10); /* cerise facet */
  clip-path: polygon(0% 30%, 80% 0%, 100% 100%, 10% 100%);
  border-radius: 0;
}

.hero__shape--3 {
  width: 240px;
  height: 300px;
  top: 40px;
  right: 380px;
  background: rgba(196, 168, 216, 0.12); /* lavender facet */
  clip-path: polygon(50% 0%, 100% 40%, 60% 100%, 0% 60%);
  border-radius: 0;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-16);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-10);
}


.hero__content h1 {
  color: var(--bjf-white);
  margin: var(--space-4) 0 var(--space-6);
}

.hero__content h1 em {
  font-style: italic;
  color: #D4B8E8; /* lighter lavender — lifted from logo facet, WCAG AA on dark bg */
  font-weight: 700;
}

.hero__lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin-bottom: var(--space-10);
  max-width: 50ch;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* ── STORY SECTION ── */
.story-section {
  background: var(--bjf-white);
}

.story-left .section-body + .section-body {
  margin-top: 1rem;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* ── PHOTO HERO SECTION ── */

/*
 * PHOTO SECTION — Community images
 *
 * The overlay uses the same layered gradient logic as the logo —
 * a plum base with a periwinkle counter-wash and cerise warmth.
 * This tints the photo without losing the BJF brand feel.
 *
 * Replace the background-image URLs with your real photography.
 * Recommended: warm, candid images of older people in community settings.
 */

.photo-banner {
  position: relative;
  min-height: 480px;
  background:
    linear-gradient(rgba(45, 9, 51, 0.65), rgba(45, 9, 51, 0.65)),
    url('../images/background-image-2.png') center center / cover no-repeat;
  background-color: var(--bjf-indigo);
  display: flex;
  align-items: center;
}

.photo-banner--right {
  background:
    /* Lavender bloom — centre left */
    radial-gradient(
      ellipse 45% 50% at 10% 50%,
      rgba(196, 168, 216, 0.30) 0%,
      transparent 60%
    ),
    /* Cerise warmth — top right */
    radial-gradient(
      ellipse 50% 40% at 100% 0%,
      rgba(184, 56, 112, 0.40) 0%,
      transparent 55%
    ),
    /* Flipped directional — text on right */
    linear-gradient(
      to left,
      rgba(62, 24, 80, 0.88) 0%,
      rgba(107, 49, 144, 0.58) 45%,
      rgba(122, 38, 96, 0.18) 100%
    ),
    url('../images/community-photo-2.jpg') center center / cover no-repeat;
  background-color: var(--bjf-indigo);
}

.photo-banner__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-10);
}

.photo-banner__content {
  max-width: 540px;
  color: var(--bjf-white);
}

.photo-banner--center .photo-banner__content {
  text-align: center;
  margin: 0 auto;
}

.photo-banner--center .photo-banner__content p {
  margin-left: auto;
  margin-right: auto;
}

.photo-banner__content h2 {
  color: var(--bjf-white);
  margin-bottom: var(--space-5);
}

.photo-banner__content p {
  color: rgba(255,255,255,0.84);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
  max-width: 48ch;
}


/* ── IMAGE GRID SECTION ── */
.image-grid-section {
  background: var(--bjf-warm);
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.image-grid__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bjf-purple-tint);
}

.image-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder state while no real images */
.image-grid__item--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  background: linear-gradient(135deg, var(--bjf-purple-tint), var(--bjf-purple-pale));
  border: 2px dashed var(--bjf-purple-soft);
}

.image-grid__item--placeholder .placeholder-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bjf-purple-mid);
  text-align: center;
  padding: 0 var(--space-4);
}

.image-grid__item--placeholder svg {
  width: 32px;
  height: 32px;
  stroke: var(--bjf-purple-soft);
  fill: none;
  stroke-width: 1.5;
}

/* ── IMPACT STRIP ── */
/*
 * Three-layer gradient matching logo facets:
 * periwinkle top-right, cerise bottom-left, violet-to-plum base.
 */
.impact-strip {
  background:
    linear-gradient(rgba(45, 9, 51, 0.65), rgba(45, 9, 51, 0.65)),
    url('../images/hero-background.png') center center / cover no-repeat;
  color: var(--bjf-white);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.impact-strip::before {
  display: none; /* removed dot pattern — gradient does the work now */
}

.impact-strip__inner {
  position: relative;
  z-index: 2;
}

.impact-strip__header {
  text-align: center;
  margin-bottom: var(--space-12);
}


.impact-strip__header h2 {
  color: var(--bjf-white);
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* ── THE DIFFERENCE YOU CAN MAKE ── */
.you-section {
  background: var(--bjf-cream);
}

.you-section .section-body {
  font-size: var(--text-sm);
}

.you-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-16);
  align-items: start;
  margin-top: var(--space-10);
}

.donation-examples {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.donation-widget {
  text-align: center;
}

/* ── SERVICES SECTION ── */
.services-section {
  background: var(--bjf-warm);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

/* ── QUOTES SECTION ── */
.quotes-section {
  background: var(--bjf-white);
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

/* ── STAKE SECTION ── */
.stake-section {
  background: var(--bjf-cream);
}

.stake-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-16);
  align-items: start;
}

.stake-right {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}

.stake-right .btn {
  margin-top: var(--space-5);
}

/* ── HELP SECTION ── */
.help-section {
  background: var(--bjf-warm);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

/* ── JUSTGIVING SECTION ── */
.jg-section {
  background: var(--bjf-white);
}

.jg-section__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.jg-section__inner p {
  color: var(--bjf-text-muted);
  max-width: none;
}

/* ── FINAL CTA SECTION ── */
.cta-section {
  position: relative;
  background:
    linear-gradient(rgba(45, 9, 51, 0.65), rgba(45, 9, 51, 0.65)),
    url('../images/hero-background.png') center center / cover no-repeat;
  color: var(--bjf-white);
  text-align: center;
  padding: var(--space-24) 0;
  overflow: hidden;
}

.cta-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 
 * Optional: set a background photo on the CTA section 
 * Uncomment and provide a real image path:
 *
 * .cta-section {
 *   background:
 *     linear-gradient(rgba(35,10,65,0.82), rgba(59,20,102,0.85)),
 *     url('../images/cta-community.jpg') center / cover no-repeat;
 * }
 */

.cta-section__inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-10);
}


.cta-section h2 {
  color: var(--bjf-white);
  margin-bottom: var(--space-5);
}

.cta-section h2 em {
  font-style: italic;
  color: rgba(255,255,255,0.75);
}

.cta-section__lead {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  margin-bottom: var(--space-10);
  max-width: none;
}

.cta-section__secondary {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
}

.cta-section__secondary a {
  color: rgba(255,255,255,0.8);
}