/* The award badge band (template-parts/award-badges.php): homepage and thank-you page. Moved out
   of page-home.css when the thank-you page needed the same band. */

.badges{display:flex;gap:18px;justify-content:center;padding:28px 0 28px}
.badges img{height:64px}

/* The badges are their own band between the hero and "Often imitated" now, not a tail on the
   hero, so the padding is the band's rather than a gap under the logos. */
/* No bottom padding of its own, and the band that follows tightens its top: the captions hang
   out of the flow into that space, which is only ever used when someone is hovering. */
.badgeband { padding: 72px 20px 0; background: #fff; }
.badges { flex-wrap: wrap; align-items: flex-start; gap: 4px; padding: 0; }

/* Each badge is a shield plus the award it is for. Greyscale at rest so six shields in six house
   styles sit in one row. Pale grey at rest: six saturated shields pulled harder than the heading
   they sit under, and this band is reassurance, not the argument. Full colour under the pointer,
   where the reader has already picked one out.

   The caption is always in the DOM -- opacity, not display -- so a screen reader gets the award
   without a hover it cannot perform, and it is positioned OUT of the flow so the band does not
   have to reserve four lines of blank space for a label nobody is looking at. Nothing can shift
   when one appears, because it never occupied the row to begin with. */
.badge-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 116px;
}
.badges img {
    height: 64px;
    /* Greyscale AND transparency: grayscale(1) alone left the darker shields heavier than the
       pale ones, which is the difference the eye reads as "this one matters more". .55 is where
       they read as a texture under the hero rather than as six marks. */
    filter: grayscale(1);
    opacity: .55;
    transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}
.badge-item__label {
    position: absolute;
    top: 100%;
    /* Wider than the column it belongs to: at 116px the longest caption ran to three lines and
       the third one landed on the "Often imitated" heading below. Two lines is what the band's
       bottom clearance allows, and this width is what keeps every caption to two. */
    left: -26px;
    right: -26px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    color: #616b76;
    text-align: center;
    opacity: 0;
    transition: opacity .18s ease;
}
.badge-item:hover img {
    filter: none;
    opacity: 1;
    transform: translateY(-2px);
}
.badge-item:hover .badge-item__label { opacity: 1; }

/* Touch has no hover, so the captions and the colour are simply always on. */
@media (hover: none) {
    .badge-item__label { opacity: 1; }
    .badges img { filter: none; opacity: 1; }
}
/* Always-on captions cannot hang out of the flow: once the row wraps, each one lands on the
   shield below it. In the flow, with a column wide enough to hold a caption in two lines. */
@media (hover: none), (max-width: 600px) {
    .badges { gap: 22px 12px; }
    .badge-item { width: 150px; }
    .badge-item__label { position: static; }
}