/* =========================================================================
   ADAPTED FOR HOMESPHERE 2026 — this is no longer the pristine bundle.
   The untouched original is kept at hspublic/brand-wall-portable/.
   Changes: grid width aligned to the site content measure, headline and
   CTA typography matched to the rest of the page, and the CTA changed from
   ORANGE SOLID to a WHITE ghost/outlined button with an orange hover fill
   (brand rule: one solid orange button per page, which on these pages is the
   hero sign-up CTA; white rather than orange at rest because an orange
   outline sits too close in value to this navy ground).
   Re-installing the bundle over this file WILL undo them.

   Brand wall — three-layer twinkling grid + centered content.

   All colors are inlined hex values (no CSS custom properties) so this
   drop-in works on any theme. If you already have a token system, feel free
   to swap #132F4F / #1a3860 / #F27E1E / etc. for your CSS variables.

   Palette used:
     Navy primary       #132F4F   (section ground)
     Navy tile bg       #1a3860   (dim tile baseline)
     Navy tile ink      #375375   (dim tile label color)
     Cream card         #EDE7DA   (never used here, reserved)
     Orange (CTA)       #F27E1E
     White              #FFFFFF
   ========================================================================= */

.hs-brand-wall-section {
    background-color: #132F4F;
    padding: 16px 32px;
    width: 100%;
    box-sizing: border-box;
}

/* The GRID drives this box's height (see below), so the veil — which is
   inset:0 here — always covers the tiles exactly. Previously the grid was
   absolutely positioned and the height came from a fixed min-height; when
   the wall was widened the tiles grew, the 3 rows totalled 479px against a
   460px box, and 10px of tile stuck out past the veil top and bottom. */
.hs-brand-wall {
    position: relative;
    isolation: isolate;
    display: block;
    /* 1300px centred in the 1440 canvas puts the tile grid at left=70,
       flush with .hs-sol-grid in the sections above (measured, not
       guessed). If a row's max_content_width changes, re-check this. */
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Layer 1 — the tile grid (background). */
.hs-brand-wall__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: max-content;
    gap: 13px;
    padding: 0;
    pointer-events: none;
    z-index: 0;
}
.hs-brand-wall__grid .hs-brand-wall__tile {
    aspect-ratio: 1 / 1;                          /* square */
}
.hs-brand-wall__tile {
    aspect-ratio: 1 / 1;
    background: #1a3860;                          /* dim baseline */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #375375;
    font-weight: 600;
    text-align: center;
    padding: 4px;
    overflow: hidden;
    transition: background 0.9s ease, color 0.9s ease, opacity 0.34s ease;
}
.hs-brand-wall__tile span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.02em;
}
/* Mid-rotation: the tile fades out, its brand is swapped, it fades back in.
   Lives here rather than in the JS so reduced-motion can neutralise it. */
.hs-brand-wall__tile.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .hs-brand-wall__tile { transition: none; }
    .hs-brand-wall__tile.is-swapping { opacity: 1; }
}

/* When JS lights a tile up, force text/icons to white for legibility. */
.hs-brand-wall__tile.is-lit { color: #ffffff; }
.hs-brand-wall__tile.is-lit .hs-brand-wall__logo { filter: none; opacity: 1; }

/* Actual logo images sitting on a tile. Fit inside with breathing room. */
.hs-brand-wall__logo {
    max-width: 78%;
    max-height: 78%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(0.7);            /* soften logo to match tile dimness */
    opacity: 0.85;
    transition: filter 0.9s ease, opacity 0.9s ease;
}

/* Layer 2 — radial veil that darkens the center so the H2 + CTA read
   while background tiles stay visible around the edges. */
.hs-brand-wall__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 58% 74% at 50% 50%,
        rgba(19, 47, 79, 0.95) 0%,
        rgba(19, 47, 79, 0.74) 52%,
        rgba(19, 47, 79, 0.5)  100%
    );
}

/* Layer 3 — foreground content: H2 + CTA. */
.hs-brand-wall__content {
    position: absolute;
    inset: 0;
    margin: auto;
    height: max-content;
    z-index: 2;
    text-align: center;
    padding: 0;
    width: 100%;
    max-width: 1180px;   /* wide enough to hold the stat line on one row at 40px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
/* Matches the page H2: Inter 600 / 40px / 1.1. The original used rem-based
   sizing, which lands at ~17.5px here because this site's root font-size is
   10px — px-based clamp is immune to that. Extra specificity beats BB's
   global `.fl-builder-content h2` rule. No text-wrap: normal wrapping. */
.hs-brand-wall h2.hs-brand-wall__headline {
    margin: 0;
    color: #ffffff;
    font-size: clamp(26px, 2.9vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-family: inherit;
    text-wrap: wrap;   /* `normal` is NOT a valid text-wrap value — it gets dropped */
}
.hs-brand-wall__headline p { margin: 0; }

.hs-brand-wall__cta {
    display: flex;
    justify-content: center;
}
/* THREE classes on purpose. BB's global is
   `.fl-builder-content a:not(.fl-builder-submenu-link)` — :not() carries
   its argument's specificity, so that rule is (0,2,1) and a two-class
   selector (0,2,0) still loses to it. This is (0,3,0). */
/* GHOST, not solid. Orange solid is reserved for the ONE primary CTA on a
   page — on the solutions pages that is the hero's sign-up button — so a
   solid brand-wall CTA made two. Matches the site's .hs-btn--ghost variant:
   transparent ground, orange-light text, 1.5px orange border, weight 700.
   Colours stay inlined hex per this file's convention (see the palette note
   at the top); orange-light is #F0912F.
   Size is kept at the banner's 16px / 15px 30px rather than the standard
   14px — this is a full-bleed section CTA under a 40px headline, not a
   button inside a card. */
.hs-brand-wall .hs-brand-wall__cta .hs-brand-wall__cta-link {
    display: inline-block;
    background: transparent;
    /* WHITE at rest, not orange. An orange outline on this navy ground reads
       muddy — orange is a warm mid-tone and the band is a dark cool one, so
       the two sit too close in value for the outline to feel crisp. White has
       the contrast the ghost treatment needs here. The ORANGE stays as the
       hover fill, so the brand accent is still what the button resolves to. */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 30px;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid #ffffff;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Hover fills solid — a hover state is not a resting solid, so the
   one-solid-button rule still holds. */
.hs-brand-wall .hs-brand-wall__cta .hs-brand-wall__cta-link:hover,
.hs-brand-wall .hs-brand-wall__cta .hs-brand-wall__cta-link:focus-visible {
    background: #F27E1E;
    border-color: #F27E1E;
    color: #ffffff;
}

/* --- STRIP variant -----------------------------------------------------
   One row of tiles dropped inside a card that already carries its own
   heading and CTA, so no section ground, no veil and no overlay content —
   just the grid, still driven by the same twinkle JS (its DOM contract is
   .hs-brand-wall > .hs-brand-wall__tile, both of which survive here).

   Column flow rather than a fixed template, so the row fits whatever
   tile_count is passed without a per-count rule. */
.hs-brand-wall--strip,
.hs-brand-wall--block { max-width: none; }
/* BLOCK: same bare wall, wrapped over `cols` columns instead of one row —
   for sitting beside copy in the same footprint a device mockup would take. */
.hs-brand-wall--block .hs-brand-wall__grid {
    grid-template-columns: repeat(var(--hs-wall-cols, 3), 1fr);
    gap: 10px;
}
.hs-brand-wall--strip .hs-brand-wall__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
}
/* tiles are far smaller here than on the full wall, where 8 across 1300px
   gives ~150px each; lift the label a little so it stays legible */
.hs-brand-wall--strip .hs-brand-wall__tile,
.hs-brand-wall--block .hs-brand-wall__tile {
    font-size: 9px;
    border-radius: 8px;
    line-height: 1.15;
}
/* The full wall keeps names on one line with an ellipsis, which it can afford
   at ~150px per tile. These are ~81px, so "Honeywell Home" clipped to
   "Honeywell Ho…". Wrap instead — the variant then holds whatever names an
   editor puts in, rather than depending on them being short. */
.hs-brand-wall--strip .hs-brand-wall__tile span,
.hs-brand-wall--block .hs-brand-wall__tile span {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

/* Mobile — 4-column grid. Desktop is 8x2 = 16 tiles; on mobile show 8
   (4x2) so the wall stays two rows at every width. */
@media (max-width: 767px) {
    .hs-brand-wall-section {
        padding: 24px 16px;
    }
    .hs-brand-wall {
        overflow: hidden;
    }
    .hs-brand-wall__grid {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 10px;
        row-gap: 10px;
    }
    .hs-brand-wall__tile:nth-child(n+9) { display: none; }
    /* the strip is one row at every width, so it sheds tiles instead of
       wrapping — five stay legible on a phone, eight do not */
    .hs-brand-wall--strip .hs-brand-wall__tile:nth-child(n+6) { display: none; }
}

/* ============================================================
   LIGHT VARIANT — for sitting on cream / warm grounds.
   Opt in by wrapping the shortcode in <div class="hs-brand-wall--light">.
   Works with variant="strip" (a single row of tiles) and variant="block"
   (a grid). Recolors the tile chip, the placeholder label, and the logo
   filter so it reads on light instead of navy.
   ============================================================ */
.hs-brand-wall--light .hs-brand-wall__tile {
    background: rgba(15, 43, 80, 0.06);
    color: rgba(15, 43, 80, 0.45);
    box-shadow: inset 0 0 0 1px rgba(15, 43, 80, 0.06);
}
.hs-brand-wall--light .hs-brand-wall__tile.is-lit {
    color: var(--hs-navy-primary, #132F4F);
    box-shadow: inset 0 0 0 1px rgba(15, 43, 80, 0.14);
}
.hs-brand-wall--light .hs-brand-wall__logo {
    /* Darken the greyscale logo instead of the navy-tile brighten. */
    filter: grayscale(1) brightness(0) opacity(0.5);
    opacity: 1;
    transition: filter 0.9s ease;
}
.hs-brand-wall--light .hs-brand-wall__tile.is-lit .hs-brand-wall__logo {
    filter: none;
    opacity: 1;
}

/* Light + strip: compact chip tiles, not the full square footprint that
   the dark full-wall uses. */
.hs-brand-wall--light.hs-brand-wall--strip .hs-brand-wall__tile,
.hs-brand-wall--light .hs-brand-wall--strip .hs-brand-wall__tile {
    aspect-ratio: auto;
    height: 64px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    /* ⚠️ THE TILE'S padding is the one that governs logo size, not the
       logo's. The logo is sized `width:100%`, and 100% resolves against the
       tile's CONTENT box — so tile padding shrinks the logo before any rule
       on the logo itself gets a say. 8px/14px here was costing 28px of a
       108px chip; putting padding on the logo as well simply double-padded
       it. Breathing room lives here, once. */
    padding: 6px 8px;
}
/* ⚠️ EXPLICIT width/height, not max-*. Measured: the chip is 108x64 but the
   logo was rendering 50x29 — 21% of the tile — and NEITHER cap was binding
   (80% of 108 = 86, 60% of 64 = 38). The marks are dimensionless SVGs, all
   `viewBox="0 0 175 100"` with no width/height attributes, so WordPress emits
   `width="1" height="1"` on the <img>; with CSS `width: auto` the browser
   sizes against that intrinsic value instead of growing to the cap. A cap can
   only ever shrink an image — it cannot make a small one bigger.

   Giving the box a real size and letting `object-fit: contain` do the fitting
   takes the same marks to ~80x46, a little over twice the area, with no
   distortion and no cropping.

   ⚠️ `contain`, never `cover`. `cover` would fill the chip by CROPPING the
   logo — fine for photography, wrong for a trademark.

   ⚠️ The padding is the logo's breathing room inside the chip, so it has to be
   `box-sizing: border-box` or it adds to the 100% and overflows. Whitespace
   baked into the artwork's own viewBox sits INSIDE this, which is why the
   marks still do not touch the edges. */
.hs-brand-wall--light.hs-brand-wall--strip .hs-brand-wall__logo,
.hs-brand-wall--light .hs-brand-wall--strip .hs-brand-wall__logo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    /* ⚠️ NO padding here — see the tile rule above. Padding on the logo is
       inside the box it is already being sized against, so it shrinks the
       mark twice over. */
    padding: 0;
    box-sizing: border-box;
    object-fit: contain;
}
/* Constrain the strip width on wide viewports so 8 tiles are visibly small. */
.hs-brand-wall--light .hs-brand-wall--strip { max-width: none; }

/* ============================================================
   LIGHT variant — kill the twinkle color-flash and the swap fade.
   The rotation JS still cycles logos through the pool, but every
   visual change happens instantly. Tiles hold a single quiet colour
   at all times.
   ============================================================ */
.hs-brand-wall--light .hs-brand-wall__tile {
    transition: none !important;
}
.hs-brand-wall--light .hs-brand-wall__tile.is-lit {
    /* Beat the JS-set inline background — keep the resting chip colour. */
    background: rgba(15, 43, 80, 0.06) !important;
    color: rgba(15, 43, 80, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 43, 80, 0.06) !important;
}
.hs-brand-wall--light .hs-brand-wall__tile.is-swapping {
    opacity: 1 !important;
}
/* Logo colour treatment: a warm desaturated tone that reads as darker
   cream rather than pure black. Applies at rest AND during .is-lit. */
.hs-brand-wall--light .hs-brand-wall__logo,
.hs-brand-wall--light .hs-brand-wall__tile.is-lit .hs-brand-wall__logo {
    filter: brightness(0.15) sepia(0.4) saturate(0.6) opacity(0.7) !important;
    opacity: 1 !important;
    transition: none !important;
}