/* --------------------------------------------------------------------------
   Branch Cards — Home comp y 938–1671 (#F9FBFF): kicker, 40px heading,
   18/30 intro, five 216×297 navy cards (the visitor's branch raised with a
   lime border + "Your location" pill), centred navy + lime buttons.
   -------------------------------------------------------------------------- */

.branch-cards {
    background-color: var(--color-surface);
    background-image: none;
}

.branch-cards__inner { padding-top: 66px; padding-bottom: 64px; }
.branch-cards__kicker { margin-bottom: 14px; }
.branch-cards__intro { max-width: 600px; }

.branch-cards__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 17px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.branch-cards__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 297px;
    padding: 21px 21px 22px;
    border: 1px solid var(--color-navy-border);
    border-radius: var(--radius);
    background-color: var(--color-navy);
}

.branch-cards__card.is-current {
    padding: 20px 20px 21px;           /* 2px lime stroke (comp) — keep the content box */
    border: 2px solid var(--color-lime);
    background-color: var(--color-navy-raised);
}

/* Both badges render on every card; locator.js moves "Your location". */
.branch-cards__pill[hidden],
.branch-cards__state[hidden] { display: none; }

.branch-cards__state {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-lime);
}

.branch-cards__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    border-radius: 11px;
    background-color: var(--color-lime);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-ink);
}

.branch-cards__pill-icon { width: 12px; height: 12px; }

.branch-cards__name {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-white);
}

.branch-cards__address {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-white);
}

.branch-cards__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 18px 0 8px;
    border-bottom: 1px solid var(--color-navy-border);
    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: 0.02em;
    color: var(--color-lime);
    text-decoration: none;
}

.branch-cards__phone:hover { color: var(--color-white); text-decoration: none; }
.branch-cards__phone-icon { flex: none; width: 18px; height: 18px; }

.branch-cards__note {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0.02em;
    color: var(--color-lavender);
}

.branch-cards__visit { margin-top: 18px; color: var(--color-white); }
.branch-cards__visit:hover { color: var(--color-lime); }

.branch-cards__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 40px;
}

/* Line every card's rows up across the grid (name / address / phone / note /
   link), so the phone numbers sit on one line even when an address or link
   wraps to two lines. */
@supports (grid-template-rows: subgrid) {
    .branch-cards__card {
        display: grid;
        grid-row: span 6;
        grid-template-rows: subgrid;
        row-gap: 0;
        align-content: start;
        justify-items: start;
    }
    .branch-cards__pill, .branch-cards__state { grid-row: 1; align-self: start; }
    .branch-cards__name    { grid-row: 2; }
    .branch-cards__address { grid-row: 3; }
    .branch-cards__phone   { grid-row: 4; align-self: end; margin-top: 0; }
    .branch-cards__note    { grid-row: 5; }
    .branch-cards__visit   { grid-row: 6; align-self: end; }
    .branch-cards__grid { row-gap: 17px; }
}

@media (max-width: 1199.98px) {
    .branch-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .branch-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .branch-cards__name { font-size: 22px; }
}

@media (max-width: 479.98px) {
    .branch-cards__grid { grid-template-columns: minmax(0, 1fr); }
    .branch-cards__card { min-height: 0; }
}