/* All six home destinations use the same card layout. */
.hero > *, .mode-panel, .mode-card, .mode-card > div { min-width: 0; }
.mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-panel-head { gap: 12px; flex-wrap: wrap; align-items: center; }
.mode-card:focus-visible { outline: 3px solid #0063ff; outline-offset: -3px; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(32px, 10vw, 60px); }
  .mode-grid { grid-template-columns: minmax(0, 1fr); }
  .mode-card, .mode-card:nth-child(2n) {
    grid-template-columns: 24px minmax(0, 1fr) 30px;
    grid-template-rows: auto auto;
    gap: 12px;
    min-height: 152px;
    padding: 18px 12px;
    align-items: start;
  }
  .mode-number { grid-column: 1; grid-row: 1; align-self: center; padding-top: 0; }
  .mode-card > div { grid-column: 1 / -1; grid-row: 2; }
  .mode-arrow { grid-column: 3; grid-row: 1; }
  .mode-card h2 { max-width: none; }
  .mode-card p { max-width: none; }
}