/* Journey Plan — public guides hub (/guides).
   Loaded after destination.css (tokens, header, footer, .btn, .chip, .card,
   .eyebrow) and guide.css (.g-state, focus ring, reduced motion), and only by
   the hub's htmlHead, so its rules can stay unscoped. Design of record:
   docs/content/ux/guides-mockup.html, hubPage / gcard. The page is English and
   left-to-right by decision; logical properties are used anyway so nothing
   breaks if that ever changes.
   Mobile first: the base rules are the 360px layout; min-width steps add the
   tablet (601px) and desktop (861px, 961px) layouts. */

/* ── Gutter: 16px on phones (destination.css: 20px to 860px, 32px above) ── */
.wrap { padding: 0 16px; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--ink-2); padding: 12px 0 0;
}
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 600; }

/* ── Hero ─────────────────────────────────────────────────────── */
.g-hub-hero { padding: 20px 0 12px; }
.g-hub-hero h1 {
  font-family: 'Spectral', Georgia, serif; font-size: 31px; font-weight: 600;
  line-height: 1.08; margin-top: 6px; max-width: 820px; text-wrap: balance; overflow-wrap: anywhere;
}
.g-hub-hero .g-lede { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 620px; margin-top: 10px; }

/* ── Chips (base .chip lives in destination.css) ──────────────── */
.g-hub-filters .chip, .g-hub-card-meta .chip {
  display: inline-flex; align-items: center; white-space: nowrap;
}
.g-hub-filters .chip { min-height: 44px; padding: 10px 14px; font-size: 13px; box-shadow: 1px 1px 0 rgba(34,41,58,.1); }
.chip.on { background: var(--ink); color: var(--paper); }
.chip.soft { border-color: var(--line); box-shadow: none; font-weight: 500; color: var(--ink-2); cursor: default; }
.chip.soft:hover { transform: none; box-shadow: none; }

/* ── Filters (grown mode only) ────────────────────────────────── */
/* Rows wrap rather than scroll: the page is server-rendered, so a sideways
   scroller would start at the left and could hide the selected chip. */
.g-hub-filters {
  display: grid; gap: 10px; margin: 18px 0 8px; padding: 12px; min-width: 0;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
}
.g-hub-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.g-hub-filter-label {
  flex: none; flex-basis: 100%; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}

/* Result count under the filters (mockup .resultbar). */
.g-hub-resultbar { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }

/* No match in grown mode: the filters stay above the message, so it sits closer. */
.g-hub-filters + .g-state { padding-top: 30px; }

/* ── Card grid ────────────────────────────────────────────────── */
.ggrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 0 32px; }

.g-hub-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}

/* The photo reserves its box, so the card never jumps when the image arrives. */
.g-hub-card-photo { position: relative; margin: 0; height: 160px; overflow: hidden; background: #e9e3d7; }
.g-hub-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.g-hub-card-credit {
  position: absolute; inset-inline-end: 6px; bottom: 6px; z-index: 2; max-width: calc(100% - 12px);
  font-size: 10.5px; line-height: 1.2; color: #fff; background: rgba(20,24,34,.62);
  padding: 3px 7px; border-radius: 4px;
}
.g-hub-card-credit a { text-decoration: underline; text-underline-offset: 2px; }

.g-hub-card-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.g-hub-card-body .eyebrow { font-size: 11px; }
.g-hub-card h3 { font-family: 'Spectral', Georgia, serif; font-size: 20px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
/* The title link covers the whole card; the credit sits above it (z-index 2) so its links stay clickable. */
.g-hub-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Keyboard focus on the title rings the whole card it stands for. */
.g-hub-card h3 a:focus-visible { outline: none; }
.g-hub-card:has(h3 a:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.g-hub-card-route { font-size: 13px; color: var(--ink-2); }
.g-hub-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.g-hub-card-meta .chip { padding: 3px 9px; font-size: 12px; }

/* Launch mode's "more on the way" card: full row, dashed, no hover lift. */
.g-hub-card.g-hub-card-more {
  grid-column: 1 / -1; display: grid; gap: 10px; align-content: center; justify-items: start;
  padding: 20px; border-style: dashed;
}
.g-hub-card-more .muted { font-size: 13px; color: var(--ink-2); }

.link-red { display: inline-flex; align-items: center; min-height: 44px; color: var(--red); font-weight: 700; }
.link-red:hover { text-decoration: underline; text-underline-offset: 3px; }

/* guide.css pads the footer for the guide page's mobile sticky bar; the hub has none.
   The short empty and no-match states keep the footer at the bottom of the screen. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.site { padding-bottom: 34px; }

/* ── Wider screens ────────────────────────────────────────────── */
@media (min-width: 480px) {
  .wrap { padding: 0 20px; }
}

@media (min-width: 601px) {
  .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 40px; }
  .g-hub-card-photo { height: 170px; }
}

@media (min-width: 861px) {
  .wrap { padding: 0 32px; }
  .crumbs { font-size: 13px; padding-top: 18px; }
  .g-hub-hero { padding: 30px 0 18px; }
  .g-hub-hero h1 { font-size: 44px; }
  .g-hub-hero .g-lede { font-size: 17px; }
  .g-hub-filters { padding: 14px 16px; }
  .g-hub-filter-label { flex-basis: auto; width: 70px; }
}

@media (min-width: 961px) {
  .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mouse-sized chips only where the pointer is fine; touch keeps 44px at every width. */
@media (min-width: 861px) and (pointer: fine) {
  .g-hub-filters .chip { min-height: 0; padding: 7px 14px; }
}

/* Hover lift only where hover exists, so it never sticks after a tap. */
@media (hover: hover) {
  .g-hub-card:hover { transform: translateY(-2px); box-shadow: 3px 5px 0 rgba(34,41,58,.08); }
  .g-hub-card:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
  .g-hub-card.g-hub-card-more:hover { transform: none; box-shadow: 2px 3px 0 rgba(34,41,58,.05); }
}