/* ============================================================================
   Bradford Island Ferry page
   Scoped to ferry.html. Loads LAST, after bands.css, because everything below
   overrides a component inside a band and has to win.

   This page used to publish the ferry's timetable and its toll table. Both are
   the Delta Ferry Authority's to set and revise, neither had been confirmed by
   the owner, and a published fare that goes stale is the exact defect this site
   was rebuilt to remove (LESSONS.md 2026-08-14 and 2026-08-15). The page now
   says the one thing this business can stand behind: it sells the tickets. The
   toll table, the timetable and the size limits are gone, and with them
   .toll-table, .source-note, .ferry-facts and .ferry-live.
   ========================================================================== */

/* ---- Hero photo ----
   The storefront sign in this shot reads "Bradford Island Ferry Tickets Sold
   here", which is the whole argument of the page.

   62%, not left or centre. Biasing left brings the ferry-ticket sign into
   frame, but the window poster beside it advertises "2 for $5" - an undated
   price in a photograph, which is the one thing this site does not publish
   (LESSONS.md 2026-08-15). The sign is illegible at hero scale anyway, so the
   copy carries that claim and the picture carries the building: the GAS N SAVE
   sign, the eagle and the door.

   Note: js/main.js serves .webp to every modern browser, so if you ever swap
   this image, confirm the .webp is the same picture as the .jpg before trusting
   it. See LESSONS.md 2026-08-15 "the .webp is a different building". */
[data-page="ferry"] .ed-hero__bg {
  background: url('../images/derived/storefront-1200.jpg') 62% center/cover no-repeat;
}
.webp [data-page="ferry"] .ed-hero__bg {
  background: url('../images/derived/storefront-1600.webp') 62% center/cover no-repeat;
}

/* ---- Steps ----
   Every colour comes from the band's own token set rather than the global one,
   so dropping this grid into a different field repaints it as a set instead of
   leaving dark text on a dark board. Same contract as bands.css. */

.step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 2.5vw, 1.4rem);
}

.step-card {
  border-top: 2px solid var(--band-rule);
  padding-top: 1rem;
  min-width: 0;
}

.step-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sign-red);
  margin-bottom: 0.5rem;
}
.band--blue .step-card__num,
.band--ink .step-card__num { color: var(--sign-gold); }

.step-card__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 0.4rem;
  color: var(--band-ink);
}

.step-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--band-ink-soft);
  margin: 0;
}

/* ---- The "not ours" note ----
   Carries the page's one deferral, so it reads as a statement rather than as
   fine print. Gold keyline, same device as .feature__live. */
.ferry-note {
  margin: 0;
  padding: 0.95rem 1.15rem;
  border-left: 3px solid var(--sign-gold);
  background: var(--bg-secondary);
  max-width: 60ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--band-ink-soft);
}
.band--blue .ferry-note,
.band--ink .ferry-note { background: rgba(255, 255, 255, 0.06); }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--band-rule); }

.faq-item summary {
  cursor: pointer;
  padding: 1.05rem 2.25rem 1.05rem 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--band-ink);
  list-style: none;
  position: relative;
  /* 48px tap target per Google/Apple guidance, not WCAG's 24px floor */
  min-height: 48px;
  display: flex;
  align-items: center;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--band-ink-faint);
  border-bottom: 2px solid var(--band-ink-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transition-fast);
}

.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq-item summary:focus-visible {
  outline: 2px solid var(--band-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.faq-item__body {
  padding: 0 0 1.15rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--band-ink-soft);
  margin: 0;
  max-width: 62ch;
}

.faq-item__body a { color: var(--accent); }
.band--blue .faq-item__body a,
.band--ink .faq-item__body a { color: var(--sign-gold); }

/* ---- Desktop ---- */
@media (min-width: 700px) {
  .step-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}