/* ---------------------------------------------------------------------------
   Directory landing pages — /bus-companies/{state}/{city}/
   Deliberately plain: these pages exist to be read by somebody who searched
   "charter bus companies in <their town>", so the company list is the page.
   --------------------------------------------------------------------------- */

.cc-wrap { padding: 32px 0 72px; max-width: 980px; }

.cc-crumb { font-size: 14px; color: var(--slate); margin-bottom: 18px; }
.cc-crumb a { color: var(--blue-deep); text-decoration: none; }
.cc-crumb a:hover { text-decoration: underline; }
.cc-crumb span { opacity: .5; margin: 0 4px; }

.cc-wrap h1 { font-family: Sora, system-ui, sans-serif; font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15; color: var(--navy-800); margin: 0 0 14px; }
.cc-lede { font-size: 17px; line-height: 1.65; color: var(--slate); max-width: 68ch; margin: 0 0 26px; }
.cc-lede b { color: var(--ink); }

.cc-h2 { font-family: Sora, system-ui, sans-serif; font-size: 21px; color: var(--navy-800);
  margin: 38px 0 10px; }

/* ------------------------------------------------------------------ the CTA */
.cc-cta { display: flex; gap: 24px; align-items: center; justify-content: space-between;
  background: var(--navy-800); color: #fff; border-radius: 14px; padding: 22px 26px; margin: 26px 0 8px; }
.cc-cta h2 { font-family: Sora, system-ui, sans-serif; font-size: 19px; margin: 0 0 6px; color: #fff; }
.cc-cta p { margin: 0; font-size: 15px; line-height: 1.6; color: #D9E2EC; max-width: 62ch; }
.cc-cta .btn { flex: 0 0 auto; background: var(--gold); color: var(--navy-900);
  border: 0; font-weight: 700; padding: 13px 22px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.cc-cta .btn:hover { background: var(--blue-light); }

/* -------------------------------------------------------- the company list */
.cc-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.cc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 14px;
  align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.cc-name { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cc-meta { font-size: 13px; color: var(--slate); white-space: nowrap; }
.cc-veh { font-size: 12px; font-weight: 600; color: var(--navy-700);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; }
.cc-act { font-size: 13px; font-weight: 600; color: var(--blue-deep); text-decoration: none; white-space: nowrap; }
.cc-act:hover { text-decoration: underline; }

/* ------------------------------------------------------- grids and chips */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cc-card { display: block; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); text-decoration: none; transition: border-color .15s, transform .15s; }
.cc-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.cc-card b { display: block; color: var(--navy-800); font-size: 16px; margin-bottom: 3px; }
.cc-card span { font-size: 13px; color: var(--slate); }

.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip { font-size: 14px; color: var(--navy-700); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; text-decoration: none; }
.cc-chip b { color: var(--slate); font-weight: 600; font-size: 12px; margin-left: 3px; }
.cc-chip:hover { border-color: var(--gold); }

.cc-small { columns: 2; column-gap: 32px; list-style: none; padding: 0; margin: 12px 0 0; font-size: 14px; line-height: 1.85; }
.cc-small li { break-inside: avoid; }

.cc-back { margin-top: 40px; font-size: 15px; }
.cc-back a { color: var(--blue-deep); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 760px) {
  .cc-wrap { padding: 22px 0 56px; }
  .cc-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cc-cta .btn { width: 100%; text-align: center; }
  .cc-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 4px; }
  .cc-meta, .cc-act { white-space: normal; }
  .cc-veh { justify-self: start; }
  .cc-small { columns: 1; }
}