/**
 * Niagara Transit — [route_list] widget v3 (.nt-route-list.nt-corridors)
 *
 * Corridor cards, colour-keyed buttons, foot-anchored "Serves" chips.
 * Design source of truth: docs/salient-reference/route-list-v3-mockup.html
 * Section 2 ("Top-flowed buttons, anchored Serves"), locked 2026-08-17.
 * Cards are ALWAYS white — place the element on a wash (#F0F0EE) section.
 *
 * Per-route button colours arrive as inline custom properties from the PHP
 * (enqueue-snippet.php): --nt-rl-tint (10% route colour / 90% white),
 * --nt-rl-tint-hover (18%), --nt-rl-border (the route colour).
 */

.nt-route-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .nt-route-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .nt-route-list {
    grid-template-columns: 1fr;
  }
}

/* No padding:0 here — every direct li IS a .nt-corridor card, whose own
   !important padding must win (a padding:0 on this higher-specificity
   selector would beat it). */
.nt-route-list > li {
  list-style: none !important;
  margin: 0 !important;
}

/* Salient's content-area list styling injects markers two ways; kill both
   (chip lis too — but those keep their own padding, so don't zero it). */
.nt-route-list li::marker {
  content: none;
}

.nt-route-list li::before {
  content: none !important;
  display: none !important;
}


.nt-corridor {
  background: #ffffff;
  border-radius: 12px;
  /* !important: the card IS a .nt-route-list > li, whose Salient-marker
     reset zeroes padding with !important — this must win over that. */
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.nt-corridor-muni {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #00677f;
}

.nt-corridor h3.nt-corridor-name {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 2px 0 4px;
  padding: 0;
}

.nt-corridor-endpoints {
  font-size: 0.9rem;
  color: #3d3d46;
  margin: 0 !important;
}

.nt-corridor-routes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
}

.nt-corridor-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--nt-rl-tint, #f0f0ee);
  border: 1px solid var(--nt-rl-border, #00677f);
  border-radius: 8px;
  padding: 11px 14px;
  text-decoration: none;
  color: #000014;
}

.nt-corridor-btn:hover {
  background: var(--nt-rl-tint-hover, #e6e6e2);
}

.nt-corridor-btn:focus-visible {
  outline: 3px solid #f0a500;
  outline-offset: 2px;
}

.nt-corridor-btn::after {
  content: "\2192";
  margin-left: auto;
  font-weight: 700;
  color: #07495f;
}

.nt-route-pill {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  border-radius: 5px;
  padding: 8px 10px;
}

.nt-corridor-btn-label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nt-corridor-period {
  font-size: 0.85rem;
  font-weight: 700;
}

.nt-corridor-days {
  font-size: 0.8rem;
  color: #3d3d46;
}

/* "Serves" zone — anchored to the card's foot so slack space lands between
   the buttons and the chips, and chip zones bottom-align across a row. */
.nt-corridor-foot {
  margin-top: auto;
  border-top: 1px solid #e4e2dc;
  padding-top: 12px;
}

/* The anchored foot still needs breathing room above its hairline when this
   card is the row's tallest (margin-top:auto collapses to 0 there). */
.nt-corridor-routes:not(:last-child) {
  padding-bottom: 16px;
}

.nt-corridor-foot-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #3d3d46;
  margin-bottom: 8px;
}

.nt-corridor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nt-corridor-chip {
  font-size: 0.75rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #d3d1cb;
  border-radius: 100px;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  color: #3d3d46;
}

.nt-route-list-notice {
  background: #ffffff;
  border: 1px solid #d3d1cb;
  border-radius: 12px;
  padding: 16px 20px;
  color: #3d3d46;
  max-width: 68ch;
}