/* ==========================================================================
   Wealth Building Financial - Homepage
   Loaded only on the homepage (see layouts/partials/headers.html).
   ========================================================================== */

/* Hero ---------------------------------------------------------------------
   The background image is applied by front.js via the CSSOM, because the CSP
   forbids inline style attributes. --hero-position / --hero-mobile-position
   are set the same way. */

.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding: 90px 0;
    background-color: #1a1a1a;
    overflow: hidden;
}

.home-hero-media {
    position: absolute;
    inset: 0;
}

.home-hero-slide {
    position: absolute;
    inset: 0;
    /* The photographs' shadows (a porch in shade) go nearly black under the
       scrim and make the whole band feel closed-in. Screening a dark grey over
       the image lifts those shadows without touching the highlights, so the
       scrim can do its contrast job over an open-looking picture. */
    background-color: #1a1a1a;
    background-blend-mode: screen;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--hero-position, center);
}

/* Crossfade, written for two photographs: the first stays put as an opaque
   base and only the second animates, so the composite is never partly
   transparent and the band never flashes its dark backing colour mid-fade.
   A third photograph would sit on top permanently — give each slide its own
   staggered animation before adding one. */
.home-hero-slide + .home-hero-slide {
    animation: home-hero-crossfade 18s infinite;
}

@keyframes home-hero-crossfade {
    0%, 42% { opacity: 0; }
    50%, 92% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-slide + .home-hero-slide {
        animation: none;
    }
}

/* Scrim: the headline sits over a photograph, so it needs a contrast floor
   rather than one that depends on the image. The falloff is held flat across
   the copy column and only opens up to the right of it. Capping the copy at
   520px is what pays for how light the veil now is: it moved the text off the
   sunlit grass and blossom that used to sit under the end of each line, so
   lifting roughly a fifth of the density off the photograph cost almost
   nothing. White copy measures 4.0:1 against the single brightest pixel under
   the text on either photograph (4.1:1 before) and 5:1 or better against the
   rest of it, with the text-shadow below carrying those worst pixels.

   Those measurements still stand: the panel below composites to 0.56 over the
   text, where the single gradient it replaced ran 0.582 to 0.557.

   It is two layers rather than one because a single gradient cannot do both
   jobs. Anything that is dense behind the text and thin further right has to
   decay somewhere, and the two people in the photograph stand right where it
   decays — the one nearer the text caught noticeably more veil than the one
   beyond them, which read as the photograph being lit unevenly. Splitting the
   two jobs fixes that: a flat veil covers the whole band, so every part of the
   photograph past the text sits under identical density, and a separate panel
   supplies the extra contrast the text needs and then stops.

   The stops are in calc() because the geometry resolves to fixed offsets from
   the centre line, not to percentages. The container is a fixed 1170px and
   centred, so its left edge is (100vw - 1170px) / 2; add 15px of padding and
   the 480px prose cap and the text always ends at 50% - 90px, whatever the
   viewport. Below 1200px Bootstrap narrows the container to 970px and those
   offsets change, hence the override further down.

   What the panel has to clear is not the prose but the button row, which is
   deliberately uncapped so the English labels stay on one line. That row is
   about 523px wide and its 32px of trailing padding is empty, so the last
   glyph sits near 50% - 79px — 11px into the fade, where the panel is still
   at 90% and the difference is unreadable. Fading out by 50% + 20px rather
   than at 50% buys the transition another 20px; the panel is under 0.10 there,
   so the leftmost sliver of the first subject is the only part of the
   photograph that sees anything but the flat veil, and it lands on hair
   rather than a face. 110px of fade, against 60px when the prose cap was
   520px and that edge was visible. */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Flat across the whole band: this is all either subject ever sees. */
    background-color: rgba(14, 26, 46, 0.12);
    /* Contrast panel for the copy, gone before the photograph's subjects. */
    background-image: linear-gradient(
        90deg,
        rgba(14, 26, 46, 0.50) 0,
        rgba(14, 26, 46, 0.50) calc(50% - 90px),
        rgba(14, 26, 46, 0) calc(50% + 20px)
    );
}

/* Bootstrap's container is 970px here, not 1170px, so the copy sits further
   into the frame: the text ends at 50% + 50px instead of 50% - 50px and the
   panel has to reach past the centre line to cover it. The subjects are
   correspondingly more crowded at this width — the same trade the band below
   992px already makes, where the copy crosses them outright. */
@media (min-width: 992px) and (max-width: 1199px) {
    .home-hero::before {
        background-image: linear-gradient(
            90deg,
            rgba(14, 26, 46, 0.50) 0,
            rgba(14, 26, 46, 0.50) calc(50% + 30px),
            rgba(14, 26, 46, 0) calc(50% + 140px)
        );
    }
}

.home-hero .container {
    position: relative;
    z-index: 2;
}

/* The width cap belongs on the prose, not on the whole column: it exists to
   keep the line length readable. Applying it to the column too made the English
   button row (637px of buttons in a 640px box) wrap to two lines while the
   shorter Chinese labels stayed on one. */
.home-hero-copy {
    color: #fff;
    /* Insurance for the lighter scrim: invisible as a shadow, but it keeps the
       glyph edges crisp wherever the photograph brightens behind them. */
    text-shadow: 0 1px 18px rgba(9, 16, 32, 0.75);
}

/* Both photographs place their subjects from just right of centre outwards, so
   the copy is capped short of them: wider than this and the last words of the
   headline land on somebody's face. It also keeps the text in the flattest,
   darkest part of the scrim, where the contrast floor holds.

   520px left the scrim panel only 60px of gap to fade out in, between the end
   of the text and the first subject, and that edge was visible. Pulling the
   cap in by 40px nearly doubles the fade to 110px. Note the coupling: the
   Chinese headline is 14 full-width glyphs, so its size and this cap have to
   move together or it wraps to a one-character second line — see the size
   rule further up. */
.home-hero h1,
.home-hero-lead {
    max-width: 480px;
}

.home-hero h1 {
    margin: 0 0 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.home-hero-subtitle {
    display: block;
    margin-top: 8px;
    color: #7fdcc9;
}

/* Chinese sets full-width at letter-spacing 0, so headline width is exactly
   one em per glyph and either sentence either fits a line or does not — there
   is no gradual reflow. Both are 14 glyphs, which needs 560px at 40px against
   the cap above, and the two glyphs that overflow are the last character and
   its full stop, which line-breaking rules keep together. The result was a
   two-line headline with one character on the second line. 34px puts each
   sentence on one line at 476px, just inside the 480px cap.

   These two numbers are locked together: 14 glyphs must fit the cap, so
   neither the cap nor this size can move without checking the other. At the
   previous 520px cap this was 36px.

   `balance` is the insurance for narrow viewports, where the sentences still
   have to wrap: it splits them near the middle instead of orphaning the tail.
   Scoped to Chinese so the English headline keeps its current line breaks.

   The size override is confined to its own breakpoint rather than sitting
   beside `balance`: two classes and an attribute outrank the plain
   `.home-hero h1` in the responsive blocks below whatever the source order, so
   an unscoped 34px here would hold at phone widths too. */
html[lang^="zh"] .home-hero h1 {
    text-wrap: balance;
}

@media (min-width: 992px) {
    html[lang^="zh"] .home-hero h1 {
        font-size: 34px;
    }
}

.home-hero-lead {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.9);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.home-hero-actions .btn i,
.home-cta .btn i {
    margin-right: 8px;
}

/* Secondary hero action: readable on the scrim without competing with the
   primary button. */
.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    padding: 15px 32px;
    font-size: 17px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-hero-secondary:hover,
.btn-hero-secondary:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

/* Shared section shell ----------------------------------------------------- */

.home-section {
    padding: 76px 0;
}

.home-section-heading {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.home-section-heading h2 {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-primary);
}

.home-section-heading p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* 2. Four questions -------------------------------------------------------- */

.home-concerns {
    background: var(--color-surface-muted);
}

/* Height comes from the stretched column (see the flex rule at the end of this
   file), not from height: 100% — that would swallow the bottom margin and leave
   wrapped rows of cards touching. */
.home-concern-card {
    display: block;
    padding: 32px 24px;
    margin-bottom: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-concern-card:hover,
.home-concern-card:focus {
    text-decoration: none;
    color: inherit;
    transform: translateY(-4px);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

.home-concern-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-secondary) 12%, white);
    color: var(--color-secondary-dark);
    font-size: 24px;
}

.home-concern-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

.home-concern-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-muted);
}

/* 3. Knowledge ------------------------------------------------------------- */

.home-knowledge .knowledge-card {
    text-align: left;
}

.home-knowledge .text-center {
    margin-top: 14px;
}

/* 4. Why ------------------------------------------------------------------- */

.home-why {
    background: var(--color-primary);
    color: #fff;
}

.home-why-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.home-why-inner h2 {
    margin: 0 0 28px;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.home-why-inner p {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.86);
}

.home-why-inner p:last-child {
    margin-bottom: 0;
}

/* 5. Approach -------------------------------------------------------------- */

/* Four one-line claims stacked full width in a 760px column left most of the
   band empty on either side and gave each claim the visual weight of a form
   row. Two columns of proper cards fills the band and lets each claim read as
   a statement rather than a list item. */
/* Sized from the copy rather than picked by eye. Each card spends 106px of its
   width on chrome — 26px of padding either side, the 36px icon disc and its
   16px gap, and the border — so the text column is (width - 18px gap) / 2 -
   106px. Both Chinese descriptions are 25 full-width glyphs at 15px, which is
   exactly 375px, and at the previous 940px the column was 355px: every one of
   them wrapped, by two or three characters. 1040px puts the column at 405px,
   which clears them with 30px to spare and leaves the list visibly narrower
   than the 1170px container, so the section keeps its centred proportion.
   Two columns of this copy need about 980px of container to stay unwrapped,
   which the 970px container between 992 and 1199px just misses — that band
   still wraps, as it did before. */
.home-approach-list {
    display: grid;
    gap: 18px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .home-approach-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-approach-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 26px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-muted-3);
}

/* The tick sits in its own disc, matching the concern cards further up the
   page rather than floating as a bare glyph. */
.home-approach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-secondary) 12%, white);
    color: var(--color-secondary-dark);
    font-size: 14px;
}

.home-approach-text {
    display: block;
    padding-top: 4px;
}

.home-approach-text strong {
    display: block;
    font-weight: 600;
    color: var(--color-primary);
}

/* Only rendered when an item carries a description (see home-landing.html). */
.home-approach-detail {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* 6. Closing CTA ----------------------------------------------------------- */

.home-cta {
    background: var(--color-surface-muted);
    text-align: center;
}

.home-cta h2 {
    margin: 0 0 18px;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-primary);
}

.home-cta p {
    max-width: 660px;
    margin: 0 auto 30px;
    font-size: 17px;
    line-height: 1.85;
    color: var(--color-text-muted);
}

/* Two buttons when `cta.secondary` is set (currently zh only); one button
   still centers correctly since flex with a single child behaves the same
   as the old inline-block button did.

   `align-items` matters here: both buttons carry btn-lg, but only
   .btn-template-main has a btn-lg size rule, so the outline button fell back
   to its smaller padding and came out about 9px shorter. A flex row stretches
   its items by default, which pulled the short button up to full height while
   its padding stayed put — so the extra height landed under the label instead
   of around it, and the text sat high in the box. Centring the row keeps each
   button at its natural height, and the rule below makes those heights equal
   in the first place. */
.home-cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* Match the primary button's btn-lg size so the pair reads as one row, and
   centre each label on both axes so it no longer depends on how the box was
   sized. Scoped to this row: .btn-outline-primary.btn-lg is also the
   knowledge section's "all articles" link, which is deliberately smaller. */
.home-cta-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-cta-actions .btn-outline-primary {
    padding: 15px 35px;
    font-size: 18px;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 991px) {
    .home-hero h1 {
        font-size: 34px;
    }

    /* Below ~992px the hero is barely wider than the photograph, so the copy
       runs across the subjects instead of sitting in the empty half. No copy
       width fixes that at this size, which is why this band stays denser than
       the desktop scrim: the text needs its contrast floor over faces too. */
    .home-hero::before {
        background: linear-gradient(
            100deg,
            rgba(14, 26, 46, 0.74) 0%,
            rgba(14, 26, 46, 0.68) 55%,
            rgba(14, 26, 46, 0.42) 85%,
            rgba(14, 26, 46, 0.28) 100%
        );
    }
}

@media (max-width: 767px) {
    .home-hero {
        /* Content-driven height: a fixed min-height is what previously clipped
           the hero list on small screens. */
        min-height: 0;
        padding: 56px 0 48px;
    }

    .home-hero-slide {
        background-position: var(--hero-mobile-position, center);
    }

    /* Phone: the copy fills the whole width, so the scrim has to be uniform.
       Keep it just light enough that the photograph still reads as a family
       rather than a dark rectangle. */
    .home-hero::before {
        background: linear-gradient(
            180deg,
            rgba(14, 26, 46, 0.66) 0%,
            rgba(14, 26, 46, 0.60) 60%,
            rgba(14, 26, 46, 0.68) 100%
        );
    }

    .home-hero h1 {
        font-size: 27px;
        line-height: 1.4;
    }

    .home-hero-lead {
        font-size: 16px;
        margin-bottom: 26px;
    }

    .home-hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .home-hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    .home-section {
        padding: 52px 0;
    }

    .home-section-heading {
        margin-bottom: 32px;
    }

    .home-section-heading h2,
    .home-why-inner h2,
    .home-cta h2 {
        font-size: 24px;
    }

    .home-why-inner p {
        font-size: 16px;
    }

    .home-approach-list {
        gap: 14px;
    }

    .home-approach-list li {
        font-size: 16px;
        padding: 18px 18px;
        gap: 14px;
    }

    .home-approach-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* Bootstrap 3 columns are floats, so cards in a row end at different heights
   whenever the copy wraps differently. Flex the row on tablet and up. */
@media (min-width: 768px) {
    .home-concerns .row,
    .home-knowledge .row {
        display: flex;
        flex-wrap: wrap;
    }

    .home-concerns .row > [class*="col-"],
    .home-knowledge .row > [class*="col-"] {
        display: flex;
    }
}