/* =====================================================================
   Woulfe's K9 — Why choose us
   Depends on tokens.css and reveal.css.

   Replaces the inherited `[wk9_why_choose_us]` component, which repeated one
   paw icon across all eight cells — eight identical marks say nothing, so
   they are numbered instead. See DESIGN-SYSTEM.md §9.

   A shared hairline grid rather than eight separate cards. By this point the
   page has already spent panels on the training rows, cards on the
   testimonials and cards again on the FAQs; another set of bordered boxes
   would read as more of the same. One rounded panel divided by hairlines is
   a different object, and it suits a list of short claims — it reads as a
   spec sheet, which is what this is.
   ===================================================================== */

.wk9-why {
    /* Anchor target — the sticky bar would otherwise land on the heading. */
    scroll-margin-top: calc(var(--wk9-header-offset, 108px) + var(--k9-space-4));
    position: relative;
    box-sizing: border-box;
    padding: var(--k9-section-y) 0;
    background: var(--k9-surface);
    color: var(--k9-text);
    font-family: var(--k9-font-body);
    isolation: isolate;
    overflow: hidden;

    /* Full-bleed out of whatever container it is dropped into. */
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.wk9-why *,
.wk9-why *::before,
.wk9-why *::after { box-sizing: border-box; }

.wk9-why__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(65% 50% at 50% 100%, var(--k9-ink-800) 0%, transparent 70%);
}

.wk9-why__intro,
.wk9-why__grid,
.wk9-why__foot {
    width: min(var(--k9-container), calc(100% - (var(--k9-gutter) * 2)));
    margin-left: auto;
    margin-right: auto;
}

/* Intro ---------------------------------------------------------------- */

.wk9-why__intro {
    max-width: 760px;
    margin-bottom: var(--k9-space-12);
    text-align: center;
}

.wk9-why__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--k9-space-3);
    margin: 0 0 var(--k9-space-4);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
}

.wk9-why__eyebrow-rule {
    display: block;
    width: 32px;
    height: 1px;
    flex: 0 0 32px;
    background: var(--k9-text-faint);
}

.wk9-why__heading {
    margin: 0;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-display-lg);
    line-height: var(--k9-leading-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
    text-wrap: balance;
}

.wk9-why__lede {
    margin: var(--k9-space-4) auto 0;
    max-width: 56ch;
    font-size: var(--k9-text-body-lg);
    line-height: var(--k9-leading-snug);
    color: var(--k9-text-muted);
}

/* Grid ----------------------------------------------------------------- */

/* The 1px gap IS the rule: the grid's own background shows through between
   the cells, so eight boxes become one panel divided into eight. Cheaper
   than eight borders and, unlike borders, the lines never double up. */
.wk9-why .wk9-why__grid {
    /* Width and centring live HERE, not only in the shared rule above: this
       selector is two classes and would otherwise reset the auto margins that
       centre it, dragging the grid to the left of its own heading. */
    width: min(var(--k9-container), calc(100% - (var(--k9-gutter) * 2)));
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--wk9-why-cols, 4), minmax(0, 1fr));
    gap: 1px;
    background: var(--k9-line);
    border: 1px solid var(--k9-line);
    border-radius: var(--k9-radius-xl);
    overflow: hidden;
}

/* margin:0 is load-bearing. BeTheme puts a bottom margin on content list
   items, which makes each cell smaller than its grid area — the grid's own
   background then shows through underneath as a thick grey band instead of
   the 1px rule. See DESIGN-SYSTEM.md §12, rule 9. */
.wk9-why .wk9-why__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--k9-space-3);
    padding: clamp(var(--k9-space-5), 2vw, var(--k9-space-8));
    background: var(--k9-surface);
    transition: background var(--k9-duration-fast) var(--k9-ease);
}

.wk9-why .wk9-why__item:hover { background: var(--k9-surface-card); }

/* Display numerals, set faint. They are an index, not a ranking — the point
   is the rhythm down the grid, so they must not outweigh the titles. */
.wk9-why__num {
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-sm);
    letter-spacing: var(--k9-tracking-display);
    color: var(--k9-text-faint);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.wk9-why__title {
    margin: 0;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-md);
    line-height: var(--k9-leading-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
    text-wrap: balance;
}

.wk9-why__text {
    margin: 0;
    font-size: var(--k9-text-body-sm);
    line-height: var(--k9-leading-snug);
    color: var(--k9-text-muted);
}

/* Foot ----------------------------------------------------------------- */

.wk9-why__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--k9-space-3);
    margin-top: var(--k9-space-12);
}

.wk9-why__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-3);
    min-height: 52px;
    padding: 0 var(--k9-space-6);
    border: 1px solid transparent;
    border-radius: var(--k9-radius-pill);
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background var(--k9-duration-fast) var(--k9-ease),
        border-color var(--k9-duration-fast) var(--k9-ease),
        transform var(--k9-duration-fast) var(--k9-ease);
}

.wk9-why__cta svg { transition: transform var(--k9-duration) var(--k9-ease); }
.wk9-why__cta:hover { background: var(--k9-action-hover); }
.wk9-why__cta:hover svg { transform: translate(3px, -3px); }
.wk9-why__cta:active { transform: translateY(1px); }

.wk9-why__cta:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
}

.wk9-why__cta--ghost {
    background: transparent;
    border-color: var(--k9-line-strong);
    color: var(--k9-text);
}

.wk9-why__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--k9-text-faint);
}

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

/* The column count arrives as an inline style (--wk9-why-cols, from the admin
   setting), and an inline custom property beats any stylesheet rule — so the
   breakpoints set grid-template-columns itself rather than the variable.
   Before this the grid stayed four across on phones and clipped every title. */
@media (max-width: 1080px) {
    .wk9-why .wk9-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk9-why__intro { margin-bottom: var(--k9-space-10); }
    .wk9-why__foot { margin-top: var(--k9-space-10); }
}

/* Phones: still two across (eight cells stacked one per row is a very long
   scroll), with tighter padding and a smaller title so words like
   "EXPERIENCED" fit whole. */
@media (max-width: 600px) {
    .wk9-why .wk9-why__item {
        padding: var(--k9-space-5) var(--k9-space-4);
        gap: var(--k9-space-2);
    }
    .wk9-why__title { font-size: var(--k9-text-title-sm); overflow-wrap: anywhere; }
    .wk9-why__text { font-size: var(--k9-text-caption); }
    .wk9-why__foot { width: min(var(--k9-container), calc(100% - (var(--k9-gutter) * 2))); }
    .wk9-why__cta { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 340px) {
    .wk9-why .wk9-why__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .wk9-why .wk9-why__item,
    .wk9-why__cta,
    .wk9-why__cta svg { transition: none; }
}