/* Coverage: corridor route tables with live load counts, borders, hubs. */

a.corridor-list__name { color: var(--color-text); text-decoration: none; }
a.corridor-list__name:hover { color: var(--gm-green); text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Corridors ---------------------------------------------------------------------- */
.corridors { display: grid; gap: var(--space-8); }

.corridor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--gm-white);
  border: var(--hairline);
  scroll-margin-top: 88px;
}
@media (min-width: 1024px) { .corridor { grid-template-columns: 320px minmax(0, 1fr); } }

.corridor__head { padding: var(--space-6); border-bottom: var(--hairline); background: var(--gm-white); }
@media (min-width: 1024px) {
  .corridor__head { padding: var(--space-8); border-bottom: 0; border-right: var(--hairline); border-top: 3px solid var(--gm-green); margin-top: -1px; }
}
.corridor__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.corridor__note { margin: 0 0 var(--space-6); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.corridor__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
@media (min-width: 1024px) {
  .corridor__facts { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--hairline); }
  .corridor__facts > div { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--hairline); }
}
.corridor__facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.corridor__facts dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; }
@media (max-width: 1023px) { .corridor__facts { grid-template-columns: auto auto auto; justify-content: start; gap: var(--space-8); } }

/* --- Route rows ------------------------------------------------------------------ */
.route-rows { list-style: none; margin: 0; padding: 0; }
.route-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--hairline);
}
.route-row:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .route-row { grid-template-columns: minmax(0, 1fr) minmax(0, 300px) 128px; gap: var(--space-6); padding: var(--space-4) var(--space-8); min-height: 72px; }
}

.route-row__path { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); margin: 0; min-width: 0; }
@media (min-width: 768px) { .route-row__path { grid-column: auto; } }
.route-row__place { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.route-row__rule { position: relative; flex: 1 1 auto; min-width: 16px; max-width: 160px; height: 2px; background: var(--gm-line); }
.route-row__rule .line-draw { position: absolute; inset: 0; height: 2px; }
.route-row__rule::after {
  content: "";
  position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--gm-green);
  border-right: 2px solid var(--gm-green);
  transform: translateY(-50%) rotate(45deg);
}

/* Fixed columns so the figures line up row to row. */
.route-row__facts { display: grid; grid-template-columns: 76px 56px auto; justify-content: start; gap: var(--space-4); margin: 0; }
@media (min-width: 768px) { .route-row__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.route-row__facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.route-row__facts dd { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; }
.route-row__none { color: var(--color-text-muted); }

.route-row__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--gm-green);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gm-green);
  text-decoration: none;
  white-space: nowrap;
}
.route-row__link:hover { background: var(--gm-green); color: var(--gm-white); }
.route-row__link--quiet { border-color: var(--color-border); color: var(--color-text-muted); }
.route-row__link--quiet:hover { background: transparent; border-color: var(--gm-steel); color: var(--color-text); }
.route-row__link .icon { display: none; transform: rotate(-90deg); }

/* Narrow phones: the button shrinks to a 44px chevron beside the figures;
   its text stays for screen readers. */
@media (max-width: 559px) {
  .route-row { padding: var(--space-4) var(--space-5); }
  .route-row__path { gap: var(--space-2); }
  .route-row__place { font-size: var(--text-sm); }
  .corridor__facts { gap: var(--space-5); }
  .route-row__link { width: 44px; padding: 0; }
  .route-row__link .icon { display: block; }
  .route-row__link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --- Border crossings ---------------------------------------------------------------- */
.border-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.border-table th,
.border-table td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--hairline); text-align: left; vertical-align: top; }
.border-table thead th { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid var(--gm-ink); padding-top: 0; }
.border-table tbody th { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); }
.border-table td { color: var(--color-text-muted); }

@media (max-width: 767px) {
  .border-table table,
  .border-table tbody,
  .border-table tr,
  .border-table th,
  .border-table td { display: block; }
  .border-table thead { display: none; }
  .border-table tbody { border-top: 2px solid var(--gm-ink); }
  .border-table tr { padding: var(--space-4) 0; border-bottom: var(--hairline); }
  .border-table tbody th { padding: 0 0 var(--space-2); border: 0; font-size: var(--text-md); }
  .border-table td { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) 0; border: 0; }
  .border-table td::before { content: attr(data-label); font-size: var(--text-xs); color: var(--color-text-muted); padding-top: 2px; }
  .border-table td { color: var(--color-text); }
}

/* --- Hubs ------------------------------------------------------------------------------- */
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.hub--lead { grid-column: 1 / -1; }
@media (min-width: 640px) { .hub-grid { gap: var(--space-8) var(--space-5); } }
@media (min-width: 1024px) {
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub--lead { grid-column: 1 / 3; grid-row: 1 / 3; }
  .hub--lead .hub__media { position: relative; flex: 1 1 auto; min-height: 0; }
  .hub--lead .hub__media picture,
  .hub--lead .hub__media .img-placeholder { position: absolute; inset: 0; }
  .hub--lead .hub__media .site-img { position: absolute; inset: 0; height: 100% !important; aspect-ratio: auto !important; }
}
.hub { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.hub__media .site-img,
.hub__media .img-placeholder { border-radius: var(--radius-media); }
.hub__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-4);
  align-items: baseline;
  padding-top: var(--space-4);
}
.hub__city { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-md); color: var(--color-text); }
.hub--lead .hub__city { font-size: var(--text-xl); }
.hub__country { grid-row: 2; font-size: var(--text-sm); color: var(--color-text-muted); }
.hub__status { grid-column: 2; grid-row: 1 / 3; align-self: center; }
/* Two narrow columns on a phone: status drops under the country. */
@media (max-width: 639px) {
  .hub:not(.hub--lead) .hub__caption { grid-template-columns: minmax(0, 1fr); }
  .hub:not(.hub--lead) .hub__status { grid-column: 1; grid-row: auto; margin-top: var(--space-1); font-size: var(--text-xs); }
}
.hub__note { grid-column: 1 / -1; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text); }