/**
 * @file
 * "Who we are" page layout (About us section).
 * Depends on the theme's brand tokens; local fallbacks included so the page
 * renders correctly even if base tokens are not yet loaded.
 */

.page-whoweare {
  --ww-blue: var(--swalim-color-blue, #116AAB);
  --ww-blue-deep: var(--swalim-color-blue-deep, #1C4767);
  --ww-blue-wash: var(--swalim-color-blue-pale, #E5ECF4);
  --ww-orange: var(--swalim-color-accent, #F58320);
  --ww-sand: var(--swalim-sand, #F5F1EA);
  --ww-ink: var(--swalim-ink, #16232E);
  --ww-ink-soft: var(--swalim-ink-soft, #4A5B69);
  --ww-rule: var(--swalim-rule, #D6DEE5);
  --ww-measure: 64ch;

  color: var(--ww-ink);
  font-size: 17px;
  line-height: 1.65;
}

.swalim-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Hero ---------- */
.whoweare-hero {
  position: relative;
  overflow: hidden;
  background: var(--ww-blue-deep);
  color: #fff;
}
.whoweare-hero__art,
.whoweare-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.whoweare-hero__art { opacity: .55; }
.whoweare-hero__photo img { object-fit: cover; opacity: .38; }

.whoweare-hero__inner {
  position: relative;
  padding: 76px 24px 60px;
}
.whoweare-hero__crumb {
  font-size: 14px;
  color: #A9C8E2;
  margin-bottom: 18px;
}
.whoweare-hero__crumb a { color: #A9C8E2; text-decoration: none; }
.whoweare-hero__crumb a:hover { text-decoration: underline; }

.whoweare-hero__title {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.015em;
  max-width: 15ch;
}
.whoweare-hero__rule {
  width: 72px;
  height: 4px;
  background: var(--ww-orange);
  margin: 22px 0 20px;
}
.whoweare-hero__lead {
  margin: 0;
  max-width: 46ch;
  font-family: Lora, Georgia, serif;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.55;
  color: #E8F1F8;
}

/* ---------- Body sections (authored in the node body) ---------- */
.whoweare-body .ww-section { padding: 64px 0; }
.whoweare-body .ww-section--sand { background: var(--ww-sand); }
.whoweare-body .ww-section--wash { background: var(--ww-blue-wash); }
.whoweare-body .ww-section--intro { padding: 56px 0 8px; }

.whoweare-body h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.whoweare-body h2 + p,
.whoweare-body h2 + .ww-prose { margin-top: 18px; }
.whoweare-body .ww-prose { max-width: var(--ww-measure); }
.whoweare-body .ww-prose > p:last-child { margin-bottom: 0; }
.whoweare-body .ww-section--intro p { font-size: 19px; max-width: var(--ww-measure); }

/* ---------- Text + media split ---------- */
.whoweare-body .ww-split {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 48px;
  align-items: start;
}
.whoweare-body .ww-split--flip .ww-split__media { order: -1; }
.whoweare-body figure { margin: 0; }
.whoweare-body figure img { width: 100%; height: auto; display: block; }
.whoweare-body figcaption {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ww-rule);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ww-ink-soft);
}

/* ---------- Thematic areas ---------- */
.whoweare-body .ww-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 34px;
  background: var(--ww-rule);
  border: 1px solid var(--ww-rule);
}
.whoweare-body .ww-area { background: #fff; padding: 28px 26px; }
.whoweare-body .ww-area__icon { display: block; margin-bottom: 14px; color: var(--ww-blue); }
.whoweare-body .ww-area h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; }
.whoweare-body .ww-area p { margin: 0; font-size: 16px; color: var(--ww-ink-soft); }

/* ---------- Portal links ---------- */
.whoweare-body .ww-portals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.whoweare-body .ww-portals a {
  display: inline-block;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--ww-rule);
  border-left: 3px solid var(--ww-orange);
  font-weight: 700;
  font-size: 15px;
  color: var(--ww-ink);
  text-decoration: none;
}
.whoweare-body .ww-portals a:hover { color: var(--ww-blue); border-color: var(--ww-blue); border-left-color: var(--ww-orange); }
.whoweare-body .ww-portals span { display: block; font-weight: 400; font-size: 13px; color: var(--ww-ink-soft); }

/* ---------- Pull quote ---------- */
.whoweare-body .ww-pull {
  margin: 0 0 34px;
  padding-left: 26px;
  border-left: 4px solid var(--ww-orange);
  max-width: 52ch;
}
.whoweare-body .ww-pull p {
  margin: 0;
  font-family: Lora, Georgia, serif;
  font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.45;
  color: var(--ww-blue-deep);
}

/* ---------- Closing call to action ---------- */
.whoweare-cta { padding: 44px 0; background: var(--ww-blue-deep); color: #fff; }
.whoweare-cta__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.whoweare-cta h2 { margin: 0; font-size: 24px; }
.whoweare-cta p { margin: 6px 0 0; color: #C4DAEC; }

.swalim-btn {
  display: inline-block;
  padding: 13px 26px;
  background: var(--ww-orange);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.swalim-btn:hover { background: #CF6717; }

.page-whoweare a:focus-visible,
.swalim-btn:focus-visible { outline: 3px solid var(--ww-orange); outline-offset: 3px; }

@media (max-width: 820px) {
  .whoweare-body .ww-split { grid-template-columns: 1fr; gap: 28px; }
  .whoweare-body .ww-split--flip .ww-split__media { order: 0; }
  .whoweare-body .ww-areas { grid-template-columns: 1fr; }
  .whoweare-body .ww-section { padding: 48px 0; }
  .whoweare-hero__inner { padding: 56px 24px 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-whoweare * { animation: none !important; transition: none !important; }
}

/* Force white text on the dark blue bands: the base theme colours headings
   directly, which beats inheritance from the band. */
.page-whoweare .whoweare-hero,
.page-whoweare .whoweare-hero h1,
.page-whoweare .whoweare-hero__title,
.page-whoweare .whoweare-cta,
.page-whoweare .whoweare-cta h2 { color: #fff; }
.page-whoweare .whoweare-hero__lead { color: #E8F1F8; }
.page-whoweare .whoweare-hero__crumb,
.page-whoweare .whoweare-hero__crumb a { color: #A9C8E2; }
.page-whoweare .whoweare-cta p { color: #C4DAEC; }
.page-whoweare .swalim-btn { color: #fff; }