/* =============================================================
   SFDA v2.1 — sections.css
   Owned by the pickup-outlook unit. Loaded AFTER styles.css and
   v2.css, on /pickup/ and /outlook/** pages only. Every class this
   file defines belongs to those two sections; it never edits
   styles.css or v2.css, only builds on their tokens
   (--bg / --surface / --accent / --ink-3 / --r-lg / --ease-out /
   --section-y / --pad-x). Mobile-first; holds at 390px and 1440px.
   ============================================================= */

/* ---------- Pickup hero photo ----------
   The Week 2 photo is portrait, shot at night: the sky fills the top
   of the frame (good — it's where the title sits) but a naive
   object-position: center 30% crops the group out at narrow widths.
   Push the visible window down so the players stay in frame. */
.pickup-hero .hero__bg img {
  /* The Week 2 photo is portrait (765x1040) in a wide hero, so at desktop widths the image is
     scaled to the width and roughly 70% of its height is cropped away — the Y value decides
     almost everything you see. The group sits between about 26% and 67% of frame height, so
     40% centres the band on faces. (82% put the visible window on the sand below their feet:
     it looked harmless at 390px, where a portrait source in a portrait box is barely cropped
     vertically at all, and only showed up at 1440px.) */
  object-position: center 40%;
}

/* ---------- "Never played? Start here" ---------- */
.starter-grid {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px)  { .starter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .starter-grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } }
.starter-card {
  padding: 1.4rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.starter-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.starter-card p {
  margin-top: 0.6rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- "How a Monday runs" timeline ---------- */
.timeline {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
}
.timeline__item {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.timeline__item:first-child { border-top: 1px solid var(--line-strong); }
.timeline__time {
  flex: 0 0 64px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.timeline__label {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- "Good to know" — links inside reused .keydates rows ----------
   .keydates lives in v2.css as a plain label/value list; it never styled
   an <a> inside .keydates__value because nothing needed one before now. */
.keydates__value a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.keydates__value a:hover { color: var(--accent-2); }

/* ---------- Log entry: players count ----------
   Rendered only when a session has a non-null players value. */
.log-entry__players {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Outlook: index + document ---------- */
.outlook-layout {
  margin-top: 2rem;
}
.outlook-toc {
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.outlook-toc__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
}
.outlook-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.outlook-toc__list a {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.outlook-toc__list a:hover,
.outlook-toc__list a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.outlook-doc { max-width: 68ch; }
.outlook-doc__section { scroll-margin-top: 120px; }
.outlook-doc__section + .outlook-doc__section {
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--line);
}
.outlook-doc .ann__body { margin-top: 1.25rem; }
.outlook-pdf { margin-top: 1.75rem; }

@media (min-width: 960px) {
  .outlook-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .outlook-toc {
    position: sticky;
    top: 120px;
    margin-bottom: 0;
  }
}

/* ---------- Outlook: board contact block ---------- */
.outlook-board {
  margin-top: 2.75rem;
  padding: 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.outlook-board__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.1rem;
}
.outlook-board__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}
.outlook-board__role {
  flex: 0 0 130px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.outlook-board__name { font-weight: 600; color: var(--ink); }
.outlook-board__phone { font-size: 0.92rem; color: var(--ink-2); }
.outlook-board__emails {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.outlook-board__emails a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.outlook-board__emails a:hover { color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
  .outlook-toc__list a { transition: none; }
}