/* ================================================================
   Homepage Rhythm — global section spacing, container, title scale,
   and entrance animation primitives.
   Light: Claude Design System  |  Dark: Binance Design System
   Depends on: design-system.css (must be enqueued before this file)
   ================================================================ */

:root {
    /* Derived from --bn-space-section (80px). Fluidly collapses on tablet/mobile. */
    --bn-section-y: clamp(40px, 6vw, 80px);
    /* Single ease curve shared by every homepage hover/enter motion. */
    --bn-ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Section rhythm ───────────────────────────────────────────────
   `.home-widget` is the wrapper that the parent theme prints around
   every dynamic_sidebar('home-center') item. Using the adjacent-sibling
   selector means we never get a leading margin on the first widget,
   which keeps the hero flush with the header. */
.home-widget + .home-widget {
    margin-top: var(--bn-section-y);
}

/* Defensive: clear any stale margin/padding the parent theme or older
   child rules attached to `.home-widget` directly. We let the rhythm
   rule above own all vertical spacing. */
.home-widget {
    margin-top: 0;
    margin-bottom: 0;
}

.home-widget > *:first-child {
    margin-top: 0;
}

/* ── Container unification ───────────────────────────────────────
   Every widget eventually wraps content in `.container`. Pin the
   max-width to a "big tech" width and use a fluid horizontal padding
   so the gutter scales smoothly on every screen. */
.home-widget > .container,
.home-widget > section.container,
.home-widget section.container,
.home-widget .home-widget > section.container {
    max-width: 1280px;
    padding-inline: clamp(16px, 4vw, 40px);
}

/* ── Section title scale ─────────────────────────────────────────
   Three-rung type ladder that all home widgets share. Sizes use clamp()
   for fluid scaling between mobile and desktop without a discrete
   breakpoint. Letter-spacing is tightened slightly at large sizes for
   that "display type" feel. */
.bn-section-title {
    font-family: var(--bn-font-display, Inter, system-ui, sans-serif);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 600;
    line-height: var(--bn-lh-heading, 1.2);
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--bn-ink, #141413);
}

[data-bs-theme="dark"] .bn-section-title {
    color: var(--bn-on-dark, #ffffff);
}

.bn-section-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s var(--bn-ease-out);
}

.bn-section-title a:hover {
    color: var(--bn-primary);
}

.bn-section-desc {
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-body-md, 14px);
    font-weight: 400;
    line-height: var(--bn-lh-body, 1.5);
    color: var(--bn-muted, #5e5d59);
}

[data-bs-theme="dark"] .bn-section-desc {
    color: var(--bn-muted, #707a8a);
}

.bn-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--bn-space-md, 16px);
    padding-block: 0 var(--bn-space-lg, 24px);
}

.bn-section-header-left {
    display: flex;
    align-items: baseline;
    gap: var(--bn-space-md, 16px);
    flex-wrap: wrap;
    min-width: 0;
}

.bn-section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: var(--bn-fs-body-md, 14px);
    font-weight: 500;
    color: var(--bn-muted, #5e5d59);
    text-decoration: none;
    transition: color 0.2s var(--bn-ease-out);
    flex-shrink: 0;
}

.bn-section-more:hover,
.bn-section-more:focus-visible {
    color: var(--bn-primary, #c96442);
}

.bn-section-more svg {
    transition: transform 0.2s var(--bn-ease-out);
}

.bn-section-more:hover svg,
.bn-section-more:focus-visible svg {
    transform: translateX(3px);
}

/* ── Entrance animation (gated by .bn-rise) ──────────────────────
   The script `home-rise.js` adds `.bn-rise` to every visible direct
   child of `.home-widget`, then flips `.is-in` once the element
   crosses an IntersectionObserver threshold. We keep the motion small
   (12px) and fast (400ms) so it reads as "settled into place" rather
   than "swooping in". Always honors prefers-reduced-motion. */
.bn-rise {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.4s var(--bn-ease-out),
        transform 0.4s var(--bn-ease-out);
    /* Wave 7.3.16: will-change is only useful while the entrance is in
     * progress. After .is-in lands the element is static, so we drop the
     * compositor hint there. */
    will-change: opacity, transform;
}

.bn-rise.is-in {
    will-change: auto;
}

.bn-rise.is-in {
    opacity: 1;
    transform: none;
}

/* When IO is unsupported or JS hasn't run yet for any reason, never
   leave content invisible. The `.bn-rise-ready` flag is set on <html>
   by home-rise.js as soon as it boots, so absence == "no JS yet". */
html:not(.bn-rise-ready) .bn-rise {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .bn-rise {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .bn-section-more svg {
        transition: none;
    }
}

/* ── Legacy `clamp()` fallback ───────────────────────────────────
   iOS 14 and a few older Android Chromiums don't fully resolve clamp()
   inside font-size. The @supports query below is true everywhere
   modern, so the fallback rules only apply on those legacy engines. */
@supports not (font-size: clamp(1px, 1px, 1px)) {
    :root {
        --bn-section-y: 64px;
    }
    .bn-section-title {
        font-size: 28px;
    }
    .home-widget > .container,
    .home-widget > section.container,
    .home-widget section.container {
        padding-inline: 24px;
    }
    @media (max-width: 767.98px) {
        :root { --bn-section-y: 40px; }
        .bn-section-title { font-size: 22px; }
        .home-widget > .container,
        .home-widget > section.container,
        .home-widget section.container { padding-inline: 16px; }
    }
}

/* ── Responsive overrides ────────────────────────────────────────
   Tablet/mobile keep the rhythm but tighten the section header gap
   so titles stay paired with the "more" link rather than wrapping
   into separate visual rows on narrow screens. */
@media (max-width: 767.98px) {
    .bn-section-header {
        padding-block: 0 var(--bn-space-md, 16px);
        gap: var(--bn-space-sm, 12px);
    }

    .bn-section-header-left {
        gap: var(--bn-space-sm, 12px);
    }
}