/* ============================================================
   .uk-problem-solution — proposed canonical problem ↔ solution grid (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the problem/solution comparison block in `public/css/style.css`:

     .problem-grid             -> .uk-problem-solution                  (1fr auto 1fr 3-col grid)
     .problem-card / .solution-card (shared rules)
                               -> .uk-problem-solution-card             (shared chrome)
     .problem-card             -> .uk-problem-solution-card .uk-problem-solution-card--problem  (error tone)
     .solution-card            -> .uk-problem-solution-card .uk-problem-solution-card--solution (success tone)
     .problem-icon / .solution-icon
                               -> .uk-problem-solution-card-icon        (icon slot — composes with .uk-icon-box? — see below)
     .problem-card h3 / .solution-card h3
                               -> .uk-problem-solution-card-title
     .problem-card p / .solution-card p
                               -> .uk-problem-solution-card > p          (default body styling)
     .arrow-connector          -> .uk-problem-solution-arrow             (middle column SVG slot)

   The icon chrome here mirrors `.uk-icon-box` exactly (44-px box,
   tinted bg + border, primary svg) but in error and success tones —
   tones that `.uk-icon-box` doesn't currently expose. Two choices:

     (a) compose with a future `.uk-icon-box --error` / `--success`
         tone (Tier 7 modifier addition), and have the consumer attach
         the icon-box class on each icon slot.

     (b) keep the icon chrome inline here so the canonical works
         without depending on a follow-up.

   Going with (b) for now — keeps this canonical self-contained.
   When Tier 7 adds `--error` / `--success` tones to uk-icon-box,
   this file's icon rules collapse onto `.uk-icon-box` composition.

   Composes with: nothing strict. Author provides inline `<svg>` direct
   children of the icon slot; canonical sizes + tints them.
   ============================================================ */

/* ============================================
   Root — 3-column grid: problem | arrow | solution
   ============================================
   `1fr auto 1fr` keeps the two cards equal-width while letting the
   middle arrow column take exactly the space the SVG needs. Below the
   mobile breakpoint the grid stacks to a single column and the arrow
   rotates to point downward.
   ============================================ */
.uk-problem-solution {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-xl);
    align-items: stretch;
}

/* ============================================
   Card — shared chrome
   ============================================
   `height: 100%` so the two cards land at the same height even when
   the body texts differ in length. Hover lift + tone-coloured border +
   tone-coloured shadow halo applied per role modifier below.
   ============================================ */
.uk-problem-solution-card {
    height: 100%;
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
    .uk-problem-solution-card:hover {
        transform: none;
    }
}

/* ============================================
   Role modifiers — --problem (error tone) / --solution (success tone)
   ============================================
   Each role pulls a tinted surface (5–6% rgba), a tinted border (25%),
   and a tinted hover halo (8–10%). Pair with a matching tone on the
   inner icon slot so the colour story stays coherent within the card.
   ============================================ */
.uk-problem-solution-card--problem {
    background: rgba(var(--color-error-rgb), 0.05);
    border: 1px solid rgba(var(--color-error-rgb), 0.25);
}

.uk-problem-solution-card--problem:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-error-rgb), 0.4);
    box-shadow: 0 8px 32px rgba(var(--color-error-rgb), 0.08);
}

.uk-problem-solution-card--solution {
    background: rgba(var(--color-success-rgb), 0.06);
    border: 1px solid rgba(var(--color-success-rgb), 0.25);
}

.uk-problem-solution-card--solution:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-success-rgb), 0.4);
    box-shadow: 0 8px 32px rgba(var(--color-success-rgb), 0.1);
}

/* ============================================
   Icon slot — 44-px tinted square (mirrors .uk-icon-box --md chrome)
   ============================================
   Tone follows the parent card's role via the descendant selectors
   below, so consumers don't write a separate tone class on the icon
   slot — drop the svg in and it picks up the right colour story.
   ============================================ */
.uk-problem-solution-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-box-md);
    height: var(--icon-box-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
}

.uk-problem-solution-card-icon > svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    color: currentColor;
    stroke: currentColor;
}

.uk-problem-solution-card--problem .uk-problem-solution-card-icon {
    background: rgba(var(--color-error-rgb), 0.12);
    border-color: rgba(var(--color-error-rgb), 0.25);
    color: var(--color-error);
}

.uk-problem-solution-card--solution .uk-problem-solution-card-icon {
    background: rgba(var(--color-success-rgb), 0.12);
    border-color: rgba(var(--color-success-rgb), 0.25);
    color: var(--color-success);
}

/* ============================================
   Title + body
   ============================================ */
.uk-problem-solution-card-title {
    margin: 0 0 var(--space-md);
    color: var(--color-text);
    font-size: var(--font-xl);
    font-weight: 600;
    line-height: var(--line-snug);
}

.uk-problem-solution-card > p {
    margin: 0 0 var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
}

.uk-problem-solution-card > p:last-child {
    margin-bottom: 0;
}

.uk-problem-solution-card > p strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ============================================
   Arrow connector — middle column SVG slot
   ============================================
   The "→" between the two cards. Centered vertically by the grid's
   `align-items: stretch` + the slot's own flex centring. Quiet muted
   colour so the arrow reads as connective tissue rather than emphasis.
   ============================================ */
.uk-problem-solution-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.uk-problem-solution-arrow > svg {
    width: var(--icon-2xl);
    height: var(--icon-2xl);
    color: currentColor;
    stroke: currentColor;
}

/* ============================================
   Mobile — stack to single column, rotate arrow downward
   ============================================
   Below 768 px the 3-col grid collapses. Cards stack; arrow goes from
   pointing-right to pointing-down via a 90° rotation so the visual
   relationship "problem leads to solution" stays intact.
   ============================================ */
@media (max-width: 768px) {
    .uk-problem-solution {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .uk-problem-solution-arrow {
        padding: var(--space-sm) 0;
    }

    .uk-problem-solution-arrow > svg {
        transform: rotate(90deg);
    }
}