/* ============================================================================
   Supported carriers and providers (Pages/SupportedCarriers/Index.cshtml, /supported-carriers/).
   Ported from "Carrier and Provider Support.dc.html": a dark page. Hero backdrop is "Hero Backdrop" with
   pattern "Constellation", tone Dark. Shared pieces (.hero, .subnav, .section, .cta-panel, .btn, ...) live in site.css.
   Razor only, no JS: the design's client-side carrier search is replaced by the full static grid.

   The "Dark page primitives" block below is duplicated in about.css (the About page is the same dark family).
   Shared CSS candidates for site.css: .hero--dark + .hero__glow--dark, .subnav--dark, .section--dk / --dk-2 /
   --rule-top-dk, .btn--gold, .btn--ghost-dark, .dk-tile*, .icon-well--gold, .cta-panel--dark.
   ============================================================================ */

/* ---- Dark page primitives (shared CSS candidates; same block in about.css) ---- */

.hero--dark .hero__title { color: #fff; font-size: 68px; line-height: 1.03; }
.hero--dark .hero__lead { color: var(--dk-text); margin-top: 26px; max-width: 720px; }

/* ---- One platform ---- */
.carriers-one { padding: 104px 32px 88px; }
.carriers-one__split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.carriers-facts { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dk-tile--row { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 24px 26px; }
.dk-tile--row .icon-well { flex: none; width: 38px; height: 38px; font-size: 14px; }
.dk-tile__note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--dk-text); }

/* ---- The list ---- */
.carriers-list { padding: 96px 32px; }
.carriers-list__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.carriers-list__intro { max-width: 640px; min-width: 0; }
.carriers-list__date { margin: 14px 0 0; font-size: 14.5px; color: var(--dk-dim); }
.carriers-list__find { min-width: 300px; flex: 0 1 360px; }
.carriers-list__count { margin: 10px 0 0; padding-left: 6px; font-size: 13px; color: var(--dk-dim); }

/* Search pill (revealed by the carrier-search island; hidden in markup until it can filter). */
.carrier-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--dk-line);
    transition: border-color .15s;
}
.carrier-search:focus-within { border-color: rgba(250, 175, 66, .5); }
.carrier-search__field { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.carrier-search__icon { display: flex; color: var(--gold); font-size: 14px; }
.carrier-search__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
}
.carrier-search__input::placeholder { color: var(--dk-dim); }
.carrier-search__input::-webkit-search-cancel-button { display: none; }
.carrier-search__clear {
    flex: none;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--dk-dim);
    font-size: 12px;
    transition: color .15s;
}
.carrier-search__clear:hover { color: #fff; }

/* Shown when a search matches nothing - the design offered a way out rather than an empty grid. */
.carriers-empty {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid rgba(250, 175, 66, .28);
    border-radius: var(--r-card);
    background: rgba(250, 175, 66, .07);
    padding: 28px 30px;
}
.carriers-empty__text { flex: 1; min-width: 260px; margin: 0; font-size: 16px; line-height: 1.6; color: #ffd694; }
.carriers-grid {
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.carrier-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--dk-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    padding: 14px;
    transition: border-color .15s, background-color .15s;
}
.carrier-card:hover { border-color: rgba(250, 175, 66, .38); background: rgba(250, 175, 66, .07); }
.carrier-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 12px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .85);
}
.carrier-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.carrier-card__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.carrier-card__initials {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--dk-dim);
}
.carrier-card__name { min-width: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: #fff; text-wrap: pretty; }

/* ---- Don't see your carrier? ---- */
.carriers-talk { padding: 88px 32px; }
.carriers-talk__panel {
    border: 1px solid var(--dk-line);
    border-radius: var(--r-card-lg);
    background:
        radial-gradient(60% 90% at 12% 0%, rgba(112, 190, 68, .14) 0%, rgba(112, 190, 68, 0) 70%),
        rgba(255, 255, 255, .04);
    padding: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
}
.carriers-talk__copy { min-width: 0; }
.carriers-talk__title { font-size: 34px; line-height: 1.14; font-weight: 700; color: #fff; }
.carriers-talk .lead { margin-top: 16px; max-width: 640px; }
.btn--green-ghost { background: rgba(112, 190, 68, .16); border-color: rgba(112, 190, 68, .42); color: var(--green-l); font-weight: 700; }
.btn--green-ghost:hover { background: rgba(112, 190, 68, .26); color: #b6e59a; }

/* ---- Demo panel ---- */
.carriers-demo { padding: 16px 32px 112px; }

/* ---- Responsive ---- */
@media (max-width: 959px) {
    
    .hero--dark .hero__title { font-size: 48px; }
    .carriers-one { padding: 72px 24px 56px; }
    .carriers-one__split { grid-template-columns: 1fr; }
    .carriers-list { padding: 72px 24px; }
    .carriers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carriers-talk { padding: 64px 24px; }
    .carriers-talk__panel { grid-template-columns: 1fr; gap: 24px; padding: 32px 28px; }
    .carriers-talk__title { font-size: 28px; }
    .carriers-demo { padding: 8px 24px 72px; }
    .cta-panel--dark { padding: 64px 28px 72px; }
}
@media (max-width: 559px) {
    .hero--dark .hero__title { font-size: 38px; }
    /* The search takes the full row rather than holding a 300px floor it cannot fit. */
    .carriers-list__find { min-width: 0; flex: 1 1 100%; }
    .carriers-one { padding: 56px 20px 40px; }
    .carriers-facts { grid-template-columns: 1fr; }
    .carriers-list { padding: 56px 20px; }
    .carriers-grid { grid-template-columns: 1fr; }
    .carriers-talk { padding: 48px 20px; }
    .carriers-talk__panel { padding: 26px 20px; }
    .carriers-talk .btn { width: 100%; }
    .carriers-demo { padding: 8px 20px 56px; }
    .cta-panel--dark { padding: 48px 20px 56px; }
}