/* railway-ask front bricks (front.go) below the ask column. Reuses ask.css
   pkg/ui/appbar --ui-* tokens (appbar.css, linked first). Item limits are CSS only (nth-child), the markup always
   carries the band maximum: magazine 4/3/5, events 11/11/11, pro 3/4/6 at
   <768 / 768-1199 / >=1200 px. Images keep width/height + aspect-ratio and
   bands reserve no late space, so the slot causes no layout shift. */
.rw-front {
  --pro-bg: #0d1a2b;
  --pro-ink: #eef3f9;
  --pro-muted: #a9b8cb;
  --pro-line: rgba(238, 243, 249, 0.14);
  --pro-accent: #ff8a7a;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 40px;
  color: var(--ui-ink);
}
.rw-front-grid {
  display: grid;
  gap: 28px;
}
.rw-band { min-width: 0; }
.rw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
}
.rw-head h2 {
  margin: 0;
  margin-right: auto;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ui-brand);
}
.rw-more, .rw-feed {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ui-accent-2);
  text-decoration: none;
  white-space: nowrap;
}
.rw-feed { color: var(--ui-muted); font-weight: 600; }
.rw-more:hover, .rw-feed:hover { text-decoration: underline; }
.rw-list { list-style: none; margin: 0; padding: 0; }
.rw-list a {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.rw-list a:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.rw-title { font-weight: 700; line-height: 1.3; }
.rw-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-accent-2);
}
.rw-meta, .rw-summary { font-size: 0.85rem; color: var(--ui-muted); line-height: 1.4; }

/* Magazine: a horizontal scroll-snap row on phones, a grid from 768 px. */
.rw-mag .rw-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
}
.rw-mag .rw-list > li { scroll-snap-align: start; min-width: 0; }
.rw-mag .rw-list > li:nth-child(n+5) { display: none; }
.rw-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ui-radius);
  background: var(--ui-line);
}
.rw-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rw-mag .rw-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Events: one event card ("ride") in three variants, the li data-card
   (front.go eventVariants): featured = the nearest ride with its own
   picture, full width (picture beside the text from 768 px); standard =
   picture cards, 2 columns (3 from 768 px); compact = date-block rows (day
   and short month). Cards keep the date order. The
   picture box always exists: without a picture it holds the flag and date
   on the soft surface, so no card has a broken or empty image. */
.rw-events .rw-more::after { content: "\00a0\2192"; }
.rw-events .rw-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rw-events .rw-list > li { display: grid; min-width: 0; }
.rw-events [data-card="featured"], .rw-events [data-card="compact"] { grid-column: 1 / -1; }
.rw-events .rw-ride {
  grid-template-rows: auto 1fr;
  gap: 0;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}
.rw-events .rw-ride:hover { border-color: var(--ui-accent-2); }
.rw-ride-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--ui-soft);
  overflow: hidden;
}
.rw-ride-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rw-day {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  color: var(--ui-accent-2);
}
.rw-flag {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  width: 24px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--ui-line);
}
.rw-flag--inline { position: static; width: 24px; }
.rw-flag svg { display: block; width: 100%; height: auto; }
/* minmax(0, 1fr): a nowrap place chip must not widen the body column past
   the card, or the title and chips run out of narrow phone cards. */
.rw-ride-body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-width: 0; padding: 10px 12px 12px; }
.rw-date { font-size: 0.85rem; font-weight: 700; color: var(--ui-accent-2); }
.rw-ride .rw-title { overflow-wrap: anywhere; }
.rw-events [data-card="standard"] .rw-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rw-events [data-card="featured"] .rw-ride-media { aspect-ratio: 16 / 9; }
.rw-events [data-card="featured"] .rw-title { font-size: 1.2rem; }
.rw-events [data-card="featured"] .rw-day { font-size: 1.5rem; }
.rw-events [data-card="compact"] .rw-ride { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto; }
.rw-events [data-card="compact"] .rw-ride-media { aspect-ratio: auto; min-height: 72px; }
.rw-events [data-card="compact"] .rw-day { gap: 4px; padding: 6px; font-size: 0.8rem; }
.rw-events [data-card="compact"] .rw-flag--inline { width: 20px; }
.rw-day-num { font-size: 1.6rem; line-height: 1; }
.rw-day-mon { font-size: 0.8rem; font-weight: 700; text-transform: lowercase; }
.rw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rw-chip {
  max-width: 100%;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ui-muted);
  background: var(--ui-soft);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pro: an open dark full-width band, text only. */
.rw-pro {
  margin-top: 36px;
  padding: 28px 0 32px;
  background: var(--pro-bg);
  color: var(--pro-ink);
}
.rw-pro-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.rw-pro .rw-head h2 { color: var(--pro-ink); }
.rw-pro .rw-more { color: var(--pro-accent); }
.rw-pro .rw-feed { color: var(--pro-muted); }
.rw-pro .rw-eyebrow { color: var(--pro-accent); }
.rw-pro .rw-summary { color: var(--pro-muted); }
.rw-pro .rw-list { display: grid; gap: 0; }
.rw-pro .rw-list > li { border-top: 1px solid var(--pro-line); }
.rw-pro .rw-list > li:nth-child(n+4) { display: none; }
.rw-pro .rw-list a { padding: 14px 0; min-height: 44px; }
.rw-pro .rw-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .rw-mag .rw-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
  }
  .rw-mag .rw-list > li:nth-child(n+4) { display: none; }
  .rw-events .rw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rw-events [data-card="featured"] .rw-ride { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto; }
  .rw-events [data-card="featured"] .rw-ride-body { align-content: center; padding: 20px 24px; }
  .rw-pro .rw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .rw-pro .rw-list > li:nth-child(4) { display: list-item; }
}

@media (min-width: 1200px) {
  .rw-front-grid { gap: 40px; }
  .rw-mag .rw-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rw-mag .rw-list > li { grid-column: span 2; }
  .rw-mag .rw-list > li:nth-child(-n+2) { grid-column: span 3; }
  .rw-mag .rw-list > li:nth-child(5) { display: list-item; }
  .rw-pro .rw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rw-pro .rw-list > li:nth-child(n+4) { display: list-item; }
}