/*
 * /recommended — growth plan Part 13 / D24.
 *
 * Deliberately restrained. There are no product images on this page and there never will be
 * (displaying Amazon imagery outside the Product Advertising API breaches the Operating
 * Agreement), so the visual weight has to come from typography, the level badge and the icon
 * treatment — the same approach /beginner takes with emoji instead of image files.
 *
 * Every colour resolves through Bootstrap's CSS variables so dark mode is inherited rather
 * than re-declared; the theme is set before paint by the inline script in _Layout.
 */

.rec-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.rec-category-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-top: 3px solid transparent !important;
}

.rec-category-card:hover,
.rec-category-card:focus-visible {
    transform: translateY(-3px);
    border-top-color: var(--bs-primary) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
}

.rec-category-card:hover .rec-category-icon {
    background: var(--bs-primary);
    color: #fff;
}

.rec-pick {
    border-left: 3px solid var(--bs-border-color) !important;
    transition: border-left-color 0.15s ease;
}

.rec-pick:hover {
    border-left-color: var(--bs-primary) !important;
}

/* The concession and the free link are the two fields that make this page worth reading, so
   they are set apart from the editorial paragraph rather than running on from it. */
.rec-notfor {
    font-size: 0.925rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--bs-tertiary-bg);
}

.rec-free {
    font-size: 0.925rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--bs-success-bg-subtle);
}

.rec-other:hover {
    background: var(--bs-tertiary-bg);
}

/* The hub's browsable index. Rows are separated by a rule rather than boxed, so 37 of them read
   as a list somebody can scan rather than as 37 competing cards. */
.rec-row + .rec-row {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.rec-index-group:first-of-type {
    border-top: 0 !important;
}

.rec-index-group .rec-category-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8rem;
}

/* The filter hides with [hidden]; this only softens the transition for anyone who lands on a
   card mid-filter. No motion under reduced-motion — the retention layer's rule, applied here
   because a filter that animates is a filter that draws the eye toward whatever is beside it. */
.rec-pick-col,
.rec-category-col {
    transition: opacity 0.12s ease;
}

.rec-hidden {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .rec-category-card,
    .rec-pick,
    .rec-pick-col,
    .rec-category-col {
        transition: none;
    }

    .rec-category-card:hover,
    .rec-category-card:focus-visible {
        transform: none;
    }
}