/* Shared card component for rides/stays/flights, used by both the Travel
   hub (app/views/travel/index.html.erb) and Search (app/views/schedule/
   search.html.erb) so the two pages render the exact same markup for the
   same record — same look, same actions, same navigation — instead of two
   independently maintained visual styles for one underlying model.

   Namespaced under .tcard-list / .tcard (not .trv-page's original bare
   .row/.av/etc) since those bare names are already independently reused
   and scoped by several other pages (advice_questions, coordination/
   minimal) — reusing them unscoped here would collide.

   Colors reuse the site-wide --color-* tokens (application.css) rather
   than .trv-page's local short aliases, so this renders correctly on any
   page without needing that page to also define --ink/--fog/etc. */

.tcard-list {
  background: var(--color-neutral-paper);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 16px;
  padding: 2px 22px;
  box-shadow: 0 1px 3px rgba(21, 20, 19, 0.05);
}

.tcard { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 18px 0; border-top: 1px solid var(--color-neutral-fog); }
.tcard:first-child { border-top: 0; }
/* Search's filter JS (schedule_search_controller.js) hides non-matching
   cards via the `hidden` attribute (row.hidden = true), not a class. Same
   specificity as the rule above and same origin (both author rules, so the
   UA stylesheet's [hidden] doesn't apply here) — source order decides, and
   this needs to win. */
.tcard[hidden] { display: none; }

.tcard__avatar { width: 34px; height: 34px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; margin-top: 1px; }
.tcard__avatar--ride { background: var(--color-brand-primary-light); color: var(--color-brand-primary); }
.tcard__avatar--room { background: var(--color-brand-gold-light); color: var(--color-brand-gold); }

.tcard__name-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.tcard__name { font-size: 15.5px; font-weight: 600; color: var(--color-neutral-ink); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; }
a.tcard__name:hover { color: var(--color-brand-primary); }

.tcard__status { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--color-neutral-slate); }
.tcard__status .tcard__dot { width: 6px; height: 6px; border-radius: 99px; }
.tcard__status--looking .tcard__dot { background: var(--color-brand-gold); }
.tcard__status--available .tcard__dot { background: var(--color-semantic-positive); }

.tcard__route { font-size: 14px; color: var(--color-neutral-graphite); margin-top: 3px; }
.tcard__route .tcard__arrow { color: var(--color-neutral-mist); margin: 0 5px; }
.tcard__route-link { color: inherit; text-decoration: none; font-weight: 600; }
.tcard__route-link:hover { color: var(--color-brand-primary); text-decoration: underline; }

.tcard__when { display: flex; align-items: baseline; gap: 7px; margin-top: 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcard__when .tcard__date { font-size: 14px; font-weight: 600; color: var(--color-neutral-ink); }
.tcard__when .tcard__at { font-size: 13px; color: var(--color-neutral-mist); }
.tcard__when .tcard__time { font-size: 14px; font-weight: 600; color: var(--color-neutral-ink); }

.tcard__cost { font-size: 13px; color: var(--color-neutral-stone); margin-top: 5px; }

.tcard__note { font-family: var(--font-serif); font-size: 13.5px; font-style: italic; color: var(--color-neutral-slate); line-height: 1.45; margin-top: 8px; max-width: 42rem; }
.tcard__note span { display: block; margin: 0; }
.tcard__note br { display: none; }

.tcard__reach { border: 1px solid var(--color-neutral-fog); background: #fff; color: var(--color-neutral-graphite); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tcard__reach:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.tcard__reach svg { width: 13px; height: 13px; }

.tcard__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; position: relative; }

.tcard-list form.button_to,
.tflight-list form.button_to { margin: 0; }

/* travel/_reach, travel/_share_menu, and travel/_copy_link_button are
   shared structural partials (already reused across several pages) but
   ship no CSS of their own — each consuming page supplies it. This is this
   component's copy, shared by both the ride/stay card list and the flight
   card list since both render the same three partials. */
.tcard-list .reach,
.tflight-list .reach { border: 1px solid var(--color-neutral-fog); background: #fff; color: var(--color-neutral-graphite); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tcard-list .reach:hover,
.tflight-list .reach:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.tcard-list .reach svg,
.tflight-list .reach svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
  .tcard-list { padding: 2px 16px; }
  .tcard { padding: 16px 0; gap: 12px; }
}

/* ── flights ── */
.tflight-list { background: var(--color-neutral-paper); border: 1px solid var(--color-neutral-fog); border-radius: 16px; padding: 2px 22px; box-shadow: 0 1px 3px rgba(21, 20, 19, 0.05); }
.tflight { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--color-neutral-fog); }
.tflight:first-child { border-top: 0; }
.tflight__airline { display: flex; align-items: center; gap: 11px; min-width: 130px; }
.tflight__logo { width: 34px; height: 34px; border-radius: 8px; background: var(--color-neutral-linen); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--color-neutral-graphite); }
.tflight__name { font-size: 13.5px; font-weight: 600; }
.tflight__stops-label { font-size: 12.5px; color: var(--color-neutral-stone); margin-top: 1px; }
.tflight__times { display: flex; align-items: center; gap: 14px; }
.tflight__times .tflight__t { font-family: var(--font-sans); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tflight__times .tflight__t .tflight__ampm { font-size: 12px; color: var(--color-neutral-stone); font-family: var(--font-sans); font-weight: 500; }
.tflight__times .tflight__seg { flex: 1; min-width: 60px; text-align: center; }
.tflight__times .tflight__dur { font-size: 11.5px; color: var(--color-neutral-stone); }
.tflight__times .tflight__line { height: 1.5px; background: var(--color-neutral-fog); position: relative; margin-top: 5px; }
.tflight__times .tflight__line::after { content: ""; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px; border-radius: 99px; background: var(--color-neutral-mist); }
.tflight__times .tflight__stops { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; margin-top: 6px; padding: 3px 7px; border-radius: 99px; background: var(--color-neutral-cream); border: 1px solid var(--color-neutral-fog); color: var(--color-neutral-graphite); font-size: 11.5px; font-weight: 650; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tflight__ap { font-size: 15px; font-weight: 700; color: var(--color-neutral-graphite); text-align: center; margin-top: 3px; letter-spacing: 0.03em; }
.tflight__date { font-size: 11.5px; color: var(--color-neutral-stone); text-align: center; margin-top: 2px; }
.tflight__times .tflight__t .tflight__dayoff { font-size: 11px; font-weight: 700; color: var(--color-brand-accent); vertical-align: super; margin-left: 2px; font-family: var(--font-sans); }
.tflight__right { text-align: right; }
.tflight__price { font-family: var(--font-sans); font-size: 19px; font-weight: 800; }
.tflight__actions { margin-top: 8px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; position: relative; }
.tflight[hidden] { display: none; }

@media (max-width: 720px) {
  .tflight-list { padding: 2px 16px; }
  /* The 3-column grid (airline / times / price+actions) needs ~480px of
     min-content to avoid overlap — on a phone width that clipped the price
     and any extra_content chip off the right edge with no way to see them.
     Stack into rows instead, each free to use the full card width. */
  .tflight {
    grid-template-columns: 1fr;
    grid-template-areas: "airline" "times" "right";
    padding: 16px 0;
    gap: 10px;
  }
  .tflight__airline { grid-area: airline; min-width: 0; }
  .tflight__times { grid-area: times; }
  .tflight__right { grid-area: right; text-align: left; }
  .tflight__actions { justify-content: flex-start; }
}

/* ─── Stay Reviews & Ratings Direct Inline Badge ─── */
.stay-reviews {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.stay-reviews__pill {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  background: var(--color-brand-gold-light, #FAF2E0);
  border: 1px solid rgba(201, 154, 59, 0.35);
  color: var(--color-brand-gold-dark, #A87E28);
  border-radius: 99px;
  padding: 1.5px 7px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}

.stay-reviews__pill:hover {
  background: #fdf5e6;
  border-color: var(--color-brand-gold, #C99A3B);
  color: var(--color-brand-gold-dark, #8A6417);
  box-shadow: 0 1px 4px rgba(201, 154, 59, 0.18);
  text-decoration: none;
}

.stay-reviews__star {
  color: var(--color-brand-gold, #C99A3B);
  flex-shrink: 0;
}

.stay-reviews__score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: var(--color-neutral-ink, #2A2724);
  letter-spacing: -0.01em;
}

.stay-reviews__count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.625rem;
  color: var(--color-neutral-stone, #78716c);
}

.stay-reviews__label {
  color: var(--color-brand-gold-dark, #A87E28);
  font-weight: 700;
}

.stay-reviews__ext {
  color: var(--color-neutral-stone, #8A847A);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.stay-reviews__pill:hover .stay-reviews__ext {
  color: var(--color-brand-gold-dark, #8A6417);
}

.stay-reviews__secondary {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  font-weight: 650;
  color: var(--color-neutral-stone, #78716c);
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--color-neutral-linen, #F6F4EF);
  border: 1px solid var(--color-neutral-fog, #E3DED5);
  line-height: 1.25;
  transition: all 0.15s ease;
}

.stay-reviews__secondary:hover {
  color: #00AA6C;
  border-color: rgba(0, 170, 108, 0.4);
  background: rgba(0, 170, 108, 0.08);
  text-decoration: none;
}

.stay-reviews__secondary .stay-reviews__ext {
  color: currentColor;
  opacity: 0.7;
}