/* ==========================================================================
   Clearwater: Environmental Policy
   Split hero (globe cut-out + bubbles) -> the page's one deep section with wave
   edges: the policy statement beside a water window, then the facts -> the nine
   commitments as one frosted glass matrix over aqua light and bubbles (a row per
   area: the area cell, then its three commitments) -> glass link cards -> footer.
   Built only from clearwater/css/theme.css tokens; page classes are prefixed .env-
   ========================================================================== */

/* Hero --------------------------------------------------------------------- */
/* The globe PNG also has a 4px transparent strip on its left: zoom from left of centre. */
.env-hero__frame > img { transform-origin: 30% 0; scale: 1.1; }

/* Deep statement -------------------------------------------------------------- */
.env-statement__text .eyebrow { margin-bottom: 1.25rem; }
.env-statement__second { max-width: 40rem; margin-top: 1.5rem; }
.env-statement__media { position: relative; }
.env-statement__media > .bubbles {
  --bubbles-size: clamp(6rem, 4rem + 4vw, 9rem);
  top: clamp(-4rem, -2rem - 2vw, -2.5rem);
  right: -1.5rem;
  z-index: 3;
}
.env-statement__media > .frame { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); }
.env-facts { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 900px) {
  .env-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The commitments matrix ------------------------------------------------------ */
.env-stage { position: relative; }
.env-stage::before {
  content: "";
  position: absolute;
  inset: 6% -3% -4% -3%;
  z-index: 0;
  background:
    radial-gradient(28% 42% at 12% 22%, rgba(34, 195, 214, .5), transparent 70%),
    radial-gradient(26% 40% at 88% 78%, rgba(14, 127, 192, .4), transparent 70%),
    radial-gradient(24% 34% at 54% 50%, rgba(127, 227, 210, .55), transparent 70%);
  pointer-events: none;
}
.env-stage__bubbles--a { --bubbles-size: clamp(8rem, 5rem + 7vw, 13rem); top: clamp(-5rem, -3rem - 2vw, -3rem); right: clamp(-4rem, -2rem - 2vw, -1.5rem); }
.env-stage__bubbles--b { --bubbles-size: clamp(6rem, 4rem + 4vw, 9rem); bottom: clamp(-5rem, -3rem - 2vw, -3rem); left: clamp(-4.5rem, -2.5rem - 2vw, -2rem); }

/* One sheet, one row per area; hairlines come from the 1px gaps showing the sheet */
.env-matrix { z-index: 1; grid-template-columns: minmax(0, 1fr); counter-reset: commitment; }
.env-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.env-list {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.env-area {
  background:
    linear-gradient(160deg, rgba(14, 127, 192, .14), rgba(34, 195, 214, .05) 70%),
    rgba(255, 255, 255, .55);
}
.env-area__title { font-size: var(--fs-h3); }

.env-cell { counter-increment: commitment; }
.env-cell::before {
  content: counter(commitment, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .4rem;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 12px 24px -12px rgba(14, 127, 192, .8), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.env-cell__title { font-size: var(--fs-h4); line-height: 1.3; }

/* Tablet: the area cell becomes a full-width row heading over its three commitments */
@media (max-width: 1179.98px) {
  .env-row { grid-template-columns: minmax(0, 1fr); }
  .env-list { grid-column: 1 / -1; }
  .env-area {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .35rem 1.25rem;
    align-items: center;
  }
  .env-area > .icon-chip { grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 759.98px) {
  .env-list { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: the theme turns cells into compact rows; the number sits in the left column */
@media (max-width: 639.98px) {
  .env-cell::before { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
}

/* Related pages ----------------------------------------------------------------- */
.env-related__stage { position: relative; }
.env-related__stage::before {   /* soft aqua light so the glass cards have something to frost */
  content: "";
  position: absolute;
  inset: -10% -4% -12%;
  z-index: 0;
  background:
    radial-gradient(30% 60% at 18% 40%, rgba(34, 195, 214, .28), transparent 70%),
    radial-gradient(30% 60% at 82% 60%, rgba(14, 127, 192, .22), transparent 70%);
  pointer-events: none;
}
.env-related__bubbles { --bubbles-size: clamp(7rem, 5rem + 5vw, 11rem); top: clamp(-5.5rem, -3rem - 2vw, -3.5rem); right: -1rem; }
.env-related__grid { position: relative; z-index: 1; }

/* Workaround for a theme issue (reported to the orchestrator): in the mobile menu the
   links shrink to their text while the current-page dot is pinned 1.1rem from the right,
   so on this page's long label the dot sits on the "y". Let the links fill the row, as
   the theme's justify-content: space-between intends. */
@media (max-width: 999.98px) {
  .site-nav__link { display: flex; }
}