/* home/ssf.css: the Seattle Science Foundation section of index.html.
   Owns every rule for .h-ssf and its .h-ssf-* children. The old .ssf-bento
   rules in global.css (SSF BENTO GRID) no longer match anything on the
   homepage; .ssf-bridge, __inner, __top, __h2 and __sub still do and are
   tuned here.

   The idea: three offerings in a bento. Each keeps its detail in a recessed
   tray. Pointing at an offering (or tabbing to it) lifts that tray forward
   to the surface and the other two offerings step back, so one detail reads
   at a time. On touch nothing can be pointed at, so every tray is simply
   there to read. No glass: nothing in this section floats over imagery. */

/* ── GROUND ─────────────────────────────────────────────────────────────── */
/* clip instead of hidden: same containment, no scroll container. */
.ssf-bridge.h-ssf { overflow: hidden; overflow: clip; }

/* ── HEADING ROW ────────────────────────────────────────────────────────────
   The heading takes the bento's left column and the line about Rod sits in
   its right column, bottom aligned, so both share edges with the tiles. */
.h-ssf .h-ssf-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.2rem;
  align-items: end;
  margin-bottom: 2.5rem;
}
.h-ssf .ssf-bridge__h2 { margin: 0; }
.h-ssf .h-ssf-sub {
  max-width: 44ch;
  margin: 0;
  padding-bottom: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ── BENTO ──────────────────────────────────────────────────────────────── */
.h-ssf-bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.2rem;
}
/* The cell arrives (base.js), the tile inside it moves: reveal on the
   wrapper, hover on the child. */
.h-ssf-cell { display: flex; min-width: 0; }
.h-ssf-cell--feat { grid-row: 1 / span 2; }

.h-ssf-tile {
  --h-ssf-tray: var(--h-tint-1);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.5rem;
  border-radius: var(--h-r-box);
  background: #fff;
  box-shadow: var(--h-hairline), var(--h-highlight), var(--h-shadow-1);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    translate var(--h-t-content) var(--h-ease),
    scale var(--h-spring-dur) var(--h-spring),
    box-shadow var(--h-t-content) var(--h-ease);
}
/* The featured offering, the free online series, leads on a flat sky tint
   taken from the tokens (no gradient). */
.h-ssf-tile--feat {
  --h-ssf-tray: rgba(255, 255, 255, 0.55);
  padding: 2rem 2rem 1.9rem;
  background: color-mix(in srgb, var(--teal-light) 55%, #fff);
}

.h-ssf-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.h-ssf-tile--feat .h-ssf-lead { max-width: 34rem; }
.h-ssf-tile--feat .h-ssf-title {
  max-width: 14ch;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.h-ssf-lead {
  margin: 0.45rem 0 0;
  max-width: 42ch;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ── THE TRAY: where each offering keeps its detail ──────────────────────────
   At rest it sits a step below the tile's surface (a faint fill and an inner
   shade). Brought forward it becomes a white sheet on the surface. */
.h-ssf-tray {
  display: grid;
  gap: 1rem;
  margin-top: 1.15rem;
  padding: 0.85rem 1rem;
  border-radius: var(--h-r-ctl);
  background: var(--h-ssf-tray);
  box-shadow: inset 0 1px 2px rgba(11, 15, 46, 0.06), inset 0 0 0 1px rgba(11, 15, 46, 0.035);
  transition:
    background-color var(--h-t-content) var(--h-ease),
    box-shadow var(--h-t-content) var(--h-ease),
    translate var(--h-t-content) var(--h-ease);
}
.h-ssf-tile--feat .h-ssf-tray { gap: 1.1rem; padding: 1.15rem 1.2rem 0.95rem; margin: 1.5rem 0 1.6rem; }

.h-ssf-spec { margin: 0; display: grid; }
.h-ssf-spec > div {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.4rem 0;
}
.h-ssf-spec > div + div { border-top: 1px solid var(--border); }
.h-ssf-spec dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-2);
}
.h-ssf-spec dd {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}

/* ── THE YEAR (featured tray) ───────────────────────────────────────────────
   The three rhythms of the online series drawn across one year: a mark for
   every session, so the density of each row is its frequency. Ticks are
   background stripes, one per 1/n of the row, on a hairline track. A teal
   set sweeps across when the offering is brought forward. */
.h-ssf-year { display: grid; gap: 0.3rem; }
.h-ssf-row {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  align-items: center;
  gap: 0.8rem;
}
.h-ssf-rate {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.76rem;
  line-height: 1;
  color: var(--text-2);
  transition: color var(--h-t) var(--h-ease-out);
}
.h-ssf-ticks {
  --h-ssf-n: 12;
  position: relative;
  height: 28px;
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.55) 0 2px, transparent 2px) 0 50% / calc(100% / var(--h-ssf-n)) 14px repeat-x,
    linear-gradient(rgba(11, 15, 46, 0.1), rgba(11, 15, 46, 0.1)) 0 50% / 100% 1px no-repeat;
}
.h-ssf-ticks::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--teal) 0 2px, transparent 2px) 0 50% / calc(100% / var(--h-ssf-n)) 22px repeat-x;
}
.h-ssf-key {
  margin: 0.2rem 0 0 5.4rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-2);
}

/* ── THE WAY IN ─────────────────────────────────────────────────────────── */
.h-ssf-tile .h-ssf-cta { align-self: flex-start; margin-top: auto; }
.h-ssf-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}
/* The arrow points up and out: every offering opens SSF's own site or
   YouTube in a new tab. */
.h-ssf-out {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  transition: translate var(--h-spring-dur) var(--h-spring);
}
.h-ssf-go .h-ssf-out { color: var(--teal-2); }
.h-ssf-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── STATES ─────────────────────────────────────────────────────────────── */
.h-ssf-tile:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 4px; }
.h-ssf-tile:active {
  scale: 0.985;
  transition-duration: var(--h-t-content), var(--h-t-press), var(--h-t-content);
  transition-timing-function: var(--h-ease), var(--h-ease-out), var(--h-ease);
}
.h-ssf-tile--feat:active .h-btn { --b-bg: var(--b-bg-press); }
/* A press brings the detail forward too, the touch side of the pointer
   state, so a tap answers the same way a hover does. */
.h-ssf-tile:active .h-ssf-tray { --h-ssf-tray: #fff; box-shadow: var(--h-hairline), var(--h-shadow-1); transition-duration: var(--h-t-press); }

/* One offering forward: the tile lifts, its tray rises to the surface, the
   other two step back. Keyboard focus does the same as a pointer. */
.h-ssf-tile:focus-visible { translate: 0 -4px; box-shadow: var(--h-hairline-2), var(--h-highlight), var(--h-shadow-3); }
.h-ssf-tile:focus-visible .h-ssf-tray { --h-ssf-tray: #fff; translate: 0 -2px; box-shadow: var(--h-hairline), var(--h-shadow-2); }
.h-ssf-bento:has(.h-ssf-tile:focus-visible) .h-ssf-tile:not(:focus-visible) { scale: 0.985; box-shadow: var(--h-hairline), var(--h-highlight); }

@media (hover: hover) and (pointer: fine) {
  .h-ssf-tile:hover { translate: 0 -4px; box-shadow: var(--h-hairline-2), var(--h-highlight), var(--h-shadow-3); }
  .h-ssf-tile:hover .h-ssf-tray {
    --h-ssf-tray: #fff;
    translate: 0 -2px;
    box-shadow: var(--h-hairline), var(--h-shadow-2);
    transition-delay: 50ms;   /* a pointer only passing across the bento does not lift every tray */
  }
  .h-ssf-bento:has(.h-ssf-tile:hover) .h-ssf-tile:not(:hover) { scale: 0.985; box-shadow: var(--h-hairline), var(--h-highlight); }

  .h-ssf-tile:hover .h-btn { --b-bg: var(--b-bg-hover); --b-shadow: var(--b-shadow-hover); }
  .h-ssf-tile:hover .h-ssf-out { translate: 2px -2px; }

  /* The year: a teal mark sweeps across every session, row after row. */
  .h-ssf-ticks::after {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--h-t-quick) var(--h-ease-std);
  }
  .h-ssf-tile:is(:hover, :focus-visible) .h-ssf-ticks::after {
    clip-path: inset(0 0 0 0);
    transition: clip-path 760ms var(--h-ease) calc(60ms + var(--h-ssf-r, 0) * 90ms);
  }
  .h-ssf-tile:is(:hover, :focus-visible) .h-ssf-rate { color: var(--ink); }
}

/* The year draws itself once, as the tile arrives (base adds .h-in). */
@keyframes h-ssf-draw { from { clip-path: inset(0 100% 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .h-arrive .h-ssf-cell.h-in .h-ssf-ticks {
    animation: h-ssf-draw 1000ms var(--h-ease) calc(380ms + var(--h-ssf-r, 0) * 110ms) backwards;
  }
}

/* ── NARROW DESKTOP, TABLET, PHONE ──────────────────────────────────────────
   Between 901 and 1180px the right column is too narrow for the detail rows,
   so the featured offering takes the full width and the other two sit side
   by side under it. */
@media (min-width: 901px) and (max-width: 1180px) {
  .h-ssf-bento { grid-template-columns: 1fr 1fr; }
  .h-ssf-cell--feat { grid-column: 1 / -1; grid-row: auto; }
  .h-ssf-tile--feat .h-ssf-tray { margin-bottom: 1.4rem; }
}
@media (max-width: 900px) {
  .h-ssf .h-ssf-head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
  .h-ssf-bento { grid-template-columns: 1fr; gap: 1rem; }
  .h-ssf-cell--feat { grid-row: auto; }
  .h-ssf-tile--feat { padding: 1.7rem 1.5rem 1.6rem; }
}
@media (max-width: 420px) {
  .h-ssf-tile { padding: 1.4rem 1.2rem 1.3rem; }
  .h-ssf-tile--feat { padding: 1.5rem 1.2rem 1.4rem; }
  .h-ssf-tray, .h-ssf-tile--feat .h-ssf-tray { padding-inline: 0.85rem; }
  .h-ssf-row, .h-ssf-spec > div { grid-template-columns: 4.3rem 1fr; gap: 0.6rem; }
  .h-ssf-key { margin-left: 0; }
  .h-ssf-tile .h-ssf-cta { align-self: stretch; }
}

/* ── PREFERENCES ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .h-ssf-tile, .h-ssf-tile *, .h-ssf-ticks::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .h-ssf-bento .h-ssf-tile, .h-ssf-bento .h-ssf-tray { translate: none !important; scale: none !important; }
}
@media (forced-colors: active) {
  .h-ssf-tile, .h-ssf-tray { border: 1px solid CanvasText; }
  .h-ssf-ticks, .h-ssf-ticks::after { forced-color-adjust: none; }
}