/* ==========================================================================
   Clearwater · Core Values page
   Idea: glass over water. One frosted sheet, split into six cells of
   different widths (a zig-zag of wide and narrow panes), is laid over a
   rounded water window, so the photo blurs through the upper panes.
   The deep wave section carries the long-term goal; a light closing
   statement leads into the CTA card. Tokens and components from theme.css.
   ========================================================================== */

/* Hero ==================================================================== */
.values-hero .page-hero__lede { max-width: 36rem; }
.values-sea { padding-top: calc(var(--section-y) * .45); }


/* Water window + glass sheet ============================================= */
.values-sea__inner { position: relative; }

.values-window {
  aspect-ratio: 21 / 9;
  min-height: 260px;
}
.values-window > img { object-position: 50% 45%; }

.values-sea__bubbles {
  --bubbles-size: clamp(6rem, 4rem + 6vw, 11rem);
  top: clamp(-3rem, -2vw, -1.5rem);
  right: clamp(-1rem, 2vw, 2.5rem);
  z-index: 3;
}

/* The sheet rises over the lower part of the window. Cells use the stronger
   glass because the upper ones carry text over the photo (theme rule). */
.values-sheet {
  z-index: 2;
  width: min(100% - 2 * clamp(0rem, 4vw, 4rem), 1080px);
  margin: calc(-1 * clamp(5rem, 2rem + 9vw, 11rem)) auto 0;
}
.values-sheet .values-cell { background: var(--glass-strong); gap: .8rem; }

.values-cell__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
}
.values-cell__lead {
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.values-cell__text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }

/* Wide panes: bigger title and a statement-sized lead. */
.values-cell--wide .values-cell__title { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.03em; }
.values-cell--wide .values-cell__lead { font-size: var(--fs-statement); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; max-width: 24ch; }
.values-cell--wide .values-cell__text { max-width: 60ch; font-size: var(--fs-body); }
.values-cell__flow { margin-top: .6rem; }

/* 3 columns (zig-zag of wide and narrow panes) from 1200px; 2 columns below,
   where integrity and teamwork run full width and the other four pair up. */
@media (min-width: 1200px) {
  .values-cell--wide { grid-column: span 2; }
}
@media (min-width: 640px) and (max-width: 1199.98px) {
  .values-sheet { --cols: 2; }
  #integrity.values-cell,
  #teamwork.values-cell { grid-column: 1 / -1; }
  /* Passion pairs with innovation here, so it takes the normal pane type. */
  #passion .values-cell__title { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.02em; }
  #passion .values-cell__lead { font-size: var(--fs-lead); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
  #passion .values-cell__text { font-size: var(--fs-sm); }
  #passion > .icon-chip { --chip: 3.25rem; border-radius: 16px; }
}
@media (max-width: 639.98px) {
  .values-window { aspect-ratio: 4 / 3; }
  .values-sheet { width: 100%; margin-top: -4rem; }
  /* Long text: keep the chip above the text instead of the theme's compact row. */
  .values-sheet .values-cell { display: flex; flex-direction: column; gap: .6rem; }
  .values-sheet .values-cell > .icon-chip { margin-bottom: .2rem; }
  .values-cell--wide .values-cell__title { font-size: var(--fs-h3); }
  .values-cell--wide .values-cell__lead { font-size: var(--fs-lead); }
}


/* Deep: long-term goal ===================================================== */
.values-goal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.values-goal .statement { max-width: 26ch; }
.values-sectors {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.values-sectors li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--on-deep-line);
  color: var(--on-deep);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -.01em;
}
@media (max-width: 899.98px) {
  .values-goal__grid { grid-template-columns: minmax(0, 1fr); }
}


/* Closing statement ======================================================= */
.values-daily__inner { position: relative; z-index: 1; }
.values-daily__bubbles {
  --bubbles-size: clamp(5rem, 3rem + 5vw, 8.5rem);
  top: 38%;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
}
@media (max-width: 899.98px) {
  .values-daily__bubbles { display: none; }
}