/* =========================================================
   WHAT WE DO SECTION
========================================================= */
.wwdSection {
  background-color: #0d1b3e;
  background-image:
    radial-gradient(ellipse 60% 70% at 70% 30%, #f07b2f0d, transparent 65%),
    radial-gradient(circle at 1px 1px, #ffffff0a 1px, transparent 0),
    linear-gradient(180deg, #070f22 0%, #0d1b3e 30%, #070f22 100%);
  color: #fff;
  background-size:
    100% 100%,
    22px 22px,
    100% 100%;
}

.wwdSection__inner {
  position: relative;
  z-index: 1;

  box-sizing: border-box;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 100px clamp(32px, 4.8vw, 80px);

  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
}

.wwdSection__side {
  min-width: 0;
  position: relative;
}

.wwdSection__sideInner {
  position: sticky;
  top: 120px;
  align-self: start;
}

.wwdSection__sideInner > astro-slot,
.wwdSection__sideInner astro-slot {
  display: block;
  width: 100%;
}

/* Disable sticky on tablet/mobile */
@media (max-width: 991px) {
  .wwdSection__sideInner {
    position: relative;
    top: auto;
  }
}

/* =========================================================
   CARDS GRID — 3 across, 4th wraps to the next row
========================================================= */
.wwdSection__cards {
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.wwdSection__cards > astro-slot,
.wwdSection__cards astro-slot {
  display: contents;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991px) {
  .wwdSection__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .wwdSection__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 820px) {
  .wwdSection__inner {
    padding: 65px 30px;
  }

  .wwdSection__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================================================
   EDITOR MODE — drop targets when slots are empty
========================================================= */
.wwdSection__cards:empty {
  min-height: 180px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
}

.wwdSection__side:empty {
  min-height: 120px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
}

/* =========================================================
   LIGHT THEME VARIANT
   Card colours are overridden from here rather than in the
   card component, so the card inherits whichever theme its
   parent section sets.
========================================================= */
.wwdSection--light {
  background-color: #f3f0ec;
  background-image: none;
}

.wwdSection--light::before {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(13, 27, 62, 0.1) 1px,
    transparent 0
  );
  background-size: 22px 22px;
}

/* --- Section Intro in light mode --- */
.wwdSection--light .section-title {
  color: #0d1b3e;
}

.wwdSection--light .section-title-highlight {
  color: #f07b2f;
}

.wwdSection--light .section-subtitle {
  color: rgba(13, 27, 62, 0.5);
}

/* --- Cards in light mode --- */
.wwdSection--light .wwdCard {
  background: #ffffff;
  border-color: rgba(13, 27, 62, 0.08);
}

.wwdSection--light .wwdCard__number {
  color: #e06b1f;
}

.wwdSection--light .wwdCard__title {
  color: #0d1b3e;
}

.wwdSection--light .wwdCard__desc {
  color: rgba(13, 27, 62, 0.78);
}

/* --- Empty-slot drop targets in light mode --- */
.wwdSection--light .wwdSection__cards:empty,
.wwdSection--light .wwdSection__side:empty {
  border-color: rgba(13, 27, 62, 0.25);
}
/* =========================================================
   PER-INSTANCE OVERRIDES
========================================================= */

/* Ways to Engage — tighter card padding */
.wwd--ways-to-engage .wwdCard {
  padding: 24px 24px 28px;
}

/* From Research to Production — wider side column */
.wwd--from-research .wwdSection__inner {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
}