/* -------------------------------------------------------------
   blocks-extra.css
   Overrides + variants that don't belong in site.css.
   Loaded after site.css so declarations here win at equal specificity.
   ------------------------------------------------------------- */

/* Reset WP body-class collisions.
   Design's own .blog { padding-block: var(--section-y) 0 } was intended for a
   home-page scroller, but WP adds `body.blog` on the posts index, which then
   pushes the whole archive down by a full section. Same trap for .single/.archive/.home. */
body.blog,
body.archive,
body.single,
body.home {
  padding-block: 0;
}

/* Interior hero — centered single-column variant used by archive.php + single.php.
   Reuses .page-hero chrome (background, padding, header offset) but drops the
   image grid in favour of a centered text block. */
.page-hero.is-center {
  text-align: center;
}
.page-hero.is-center .container {
  display: block;
  max-width: 720px;
}
.page-hero.is-center .eyebrow-line,
.page-hero.is-center .lead {
  margin-inline: auto;
}
.page-hero.is-center .lead {
  max-width: 52ch;
}
.page-hero__meta {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--deep);
  opacity: .75;
  margin-top: 1rem;
}
.page-hero__meta > * + *::before {
  content: "·";
  margin: 0 .55rem;
  color: var(--bright);
  opacity: .7;
}

/* Related stories block on single.php — reuses .stories-grid + .story cards. */
.related-stories {
  padding-block: var(--section-y);
  background: var(--sand-soft, #fff8ef);
}
.related-stories__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.related-stories__title {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: none;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  color: var(--deep);
  margin: 0;
}
.related-stories__more {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--magenta);
  text-decoration: none;
}
.related-stories__more:hover { text-decoration: underline; }

/* -------------------------------------------------------------
   Team carousel — layout=carousel on the adsurf-team block.
   Extends the shared .cards__track / .card family with a
   photo-headed member card so many volunteers fit horizontally
   without eating vertical space.
   ------------------------------------------------------------- */
.sec--team-carousel { padding-block: var(--section-y); background: var(--foam-soft, #eaf7f8); }
.sec--team-carousel .sec__head { margin-bottom: 1.4rem; }

/* Section-head alignment variants — a per-block choice on the team block.
   Applied by the render as sec__head--left / sec__head--center. */
.sec__head--left {
  text-align: left;
}
.sec__head--left .eyebrow-line,
.sec__head--left .h2,
.sec__head--left .sec__intro { margin-inline: 0; }
.sec__head--left .sec__intro { max-width: 56ch; }

.sec__head--center {
  text-align: center;
}
.sec__head--center .eyebrow-line,
.sec__head--center .h2,
.sec__head--center .sec__intro { margin-inline: auto; }
.sec__head--center .h2 { max-width: 22ch; }
.sec__head--center .sec__intro { max-width: 56ch; }

.cards__track--team {
  grid-auto-columns: min(80%, 280px);
}

.card--team {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.card--team__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  background: var(--foam);
}
.card--team__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card--team__body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.card--team__name {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--deep);
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.05;
}
.card--team__role {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--magenta);
  margin: 0;
}
.card--team__bio {
  color: #2c565b;
  font-size: .95rem;
  margin: .3rem 0 0;
}

/* -------------------------------------------------------------
   Gravity Forms select dropdowns:
   the Orbital framework (gravity_forms_theme_framework-css) sets
   ID-scoped colour variables that beat plain .gform_wrapper rules,
   so the selected value renders as transparent/blank. Re-assert the
   control colour at the same specificity, and give selects the
   native arrow back (framework hides it on some installs).
   ------------------------------------------------------------- */
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .ginput_container select,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper select {
  color: var(--ink);
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  background-color: #fff;
  /* Orbital forces height: 38px; combined with our .8rem padding + 2px border
     that leaves ~8px for 16px text, chopping glyphs top and bottom. Let the
     element size itself so padding does what it says. */
  height: auto;
  min-height: 0;
  line-height: 1.3;
}
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .ginput_container select option,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper select option {
  color: var(--ink);
  background-color: #fff;
}

/* -------------------------------------------------------------
   Hero media on phone width:
   the tilted 2-photo collage design stays as-is — we just widen
   the pair so it fills the container edge-to-edge instead of
   hugging the right and leaving whitespace on the left. Photo A
   pins to the right at 78%, photo B swings out to the left at
   66% so they overlap in the middle and span the full width.
   ------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero__media { min-height: 320px; }
  .hero__media .photo--tilt-a { right: 0; width: 78%; }
  .hero__media .photo--tilt-b { right: auto; left: 0; width: 66%; }

  .page-hero__media { min-height: 300px; }
  .page-hero__media .photo--a { right: 0; width: 78%; }
  .page-hero__media .photo--b { right: auto; left: 0; width: 66%; }
}

/* -------------------------------------------------------------
   Standard content pages (page.php plain-content branch):
   render at the site's full container width, matching the shape
   of block-composed pages. Prose paragraphs still cap at a
   readable measure so legal-text line lengths don't blow out on
   wide monitors.
   ------------------------------------------------------------- */
.single-page__prose { max-width: none; }
.single-page__prose > p,
.single-page__prose > ul,
.single-page__prose > ol,
.single-page__prose > blockquote { max-width: 72ch; }
.single-page__prose h2,
.single-page__prose h3 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--deep);
  margin: 1.8rem 0 .6rem;
}
.single-page__prose h2 { font-size: 1.6rem; }
.single-page__prose h3 { font-size: 1.25rem; }

/* -------------------------------------------------------------
   Role chips — shown on team member cards (grid + carousel)
   when a person is tagged with one or more groups on the Team CPT.
   ------------------------------------------------------------- */
.role-chips {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.role-chip {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.role-chip--water    { background: rgba(2,138,149,.12);  color: var(--deep);    border-color: rgba(2,138,149,.28); }
.role-chip--volunteer{ background: rgba(255,197,60,.22); color: #7a5300;        border-color: rgba(255,197,60,.55); }
.role-chip--trustee  { background: rgba(199,20,131,.10); color: var(--magenta); border-color: rgba(199,20,131,.28); }

/* Chip row on the grid layout has a bit more breathing room above the name. */
.member .role-chips { margin-bottom: .5rem; }
.card--team__body .role-chips { margin-bottom: .55rem; }

/* -------------------------------------------------------------
   Feature-video facade — mode=feature on the adsurf-video block.
   Shows the poster instantly (single image request); the Vimeo /
   YouTube iframe or self-hosted <video> is only injected on click.
   ------------------------------------------------------------- */
.video-feature--feature {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  margin: 0;
  cursor: pointer;
}
.video-feature--feature .video-feature__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.video-feature--feature .video-feature__poster--empty {
  background: linear-gradient(160deg, #7fd7e6, #028A95);
}
.video-feature--feature:hover .video-feature__poster {
  transform: scale(1.02);
}
.video-feature__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.video-feature__play:hover,
.video-feature__play:focus-visible {
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.05) 100%);
  outline: none;
}
.video-feature__play-icon {
  display: grid;
  place-content: center;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  font-size: clamp(1.6rem, 2vw, 2.4rem);
  padding-left: .35em;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.video-feature__play:hover .video-feature__play-icon,
.video-feature__play:focus-visible .video-feature__play-icon {
  transform: scale(1.06);
}
.video-feature__play-label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  letter-spacing: .04em;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.video-feature--feature .video-feature__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-feature--feature.is-playing { cursor: default; }