/* ============================================================
   BADGES / CREDENTIALS STRIP — centered, wrapping logo row.

   Fills: local-includes/_badges.cfm — ONE shared file, not
   per-town, so this strip is identical on every geo page.
   Source badges are 144x144.

   Variables come from service-area.css. Loaded by
   css-service-area.cfm.
   ============================================================ */
/* ONE ROW ON DESKTOP. Six badges at the old 160px cell + 40px gap needed 1160px, and
   Bootstrap's .container gives ~1140px of content at the lg breakpoint — so the strip
   wrapped a badge onto a second line. The container is widened for THIS SECTION ONLY,
   and only at lg and up, so every narrower breakpoint keeps Bootstrap's own widths. */
@media (min-width: 1200px) {
    .geo-badges-section > .container {
        width: 1320px;
        max-width: calc(100% - 30px);
    }
}
.geo-badges {
    display: flex;
    /* nowrap is what guarantees the single row; the cells below shrink to fit rather
       than wrapping. Restored to wrap under 992px, where six across is too tight. */
    flex-wrap: nowrap;
    /* stretch, NOT center: equal-height cells are what let every caption start on the
       same line. With center, a 3-line caption re-centred its whole figure and pushed
       that badge's logo out of line with the rest. */
    align-items: stretch;
    justify-content: center;
    gap: 0 30px;
}
/* Each badge is a <figure> so the logo can carry a caption. Column layout so the logo
   sits in a fixed-height band and the caption always begins directly below it, at the
   same height in every cell. */
.geo-badge {
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    max-width: 200px;
}
/* The BBB badge is the only one whose img + figcaption are nested inside an <a>, which
   would otherwise be a single flex child and collapse the column. Make the link the
   column instead, so that badge aligns exactly like the other five. */
.geo-badge a {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Fixed square box + object-fit:contain. The box never changes shape and contain never
   stretches the source to fill it, so a badge can letterbox but can NEVER distort, at
   any cell width. All current sources are square, so they fill it exactly. */
.geo-badges img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
/* Sizing text is normally the host's job, not ours. This is the documented exception: a badge
   caption is a geo-only element no host stylesheet has ever heard of, so there is nothing to
   inherit and something has to set it. Colour is deliberately left alone so it picks up the
   client's own body colour. */
.geo-badge figcaption {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}
/* The BBB badge is the only one that links out; keep the caption looking like a caption
   rather than a blue link, and let the whole figure respond to the hover. NOTE: display
   is set in the column rule above (flex) — do not put display:block back here, it would
   collapse that badge's column and drop its logo out of line with the other five. */
.geo-badge a {
    text-decoration: none;
    color: inherit;
}
.geo-badge a:hover img,
.geo-badge a:focus img {
    opacity: .85;
}
.geo-badge a:hover figcaption,
.geo-badge a:focus figcaption {
    text-decoration: underline;
}
/* Below lg the single row stops being readable, so wrapping comes back. Cells go back to
   sizing on their content; align-items:stretch still keeps each wrapped row's captions
   on a common line. */
@media (max-width: 991px) {
    .geo-badges {
        flex-wrap: wrap;
        gap: 24px 30px;
    }
    .geo-badge {
        flex: 0 1 auto;
        max-width: 160px;
    }
}
@media (max-width: 767px) {
    .geo-badges {
        gap: 16px 24px;
    }
    .geo-badges img {
        width: 84px;
        height: 84px;
    }
    .geo-badge {
        max-width: 130px;
    }
    .geo-badge figcaption {
        font-size: 11px;
    }
}