/**
 * category-grid.css
 *
 * Category navigation grid styles — overrides and extensions for [go_categories].
 * Loaded alongside experience-grid.css (as a dependency) on pages that contain
 * the [go_categories] shortcode or the CategoryGridVcElement.
 *
 * Scope: .go-cat-grid — applied to the root element by CategoriesShortcode.
 * Cards use the shared .go-exp-grid__card structure but are visually distinct:
 * - Color accent strip via --go-cat-color custom property
 * - Larger image ratio (landscape)
 * - Experience count badge
 * - Hover lifts the card slightly
 */

/* ─── Root ─────────────────────────────────────────────────────────────── */

.go-cat-grid {
    --go-cat-color: #0067b0; /* fallback — overridden per-card via inline style */

    /* Container queries: adapts to element width, not viewport.
     * Required in Elementor/Divi grid columns and Gutenberg narrow blocks.
     * Progressive enhancement: media queries still apply as baseline. */
    container: go-cat-grid / inline-size;
}

/* ─── Image link fill ─────────────────────────────────────────────────── */

/* Card is display:flex flex-direction:column — ensure image link stretches
 * to full card width and doesn't leave fractional gaps.
 * font-size/line-height: 0 eliminates the classic inline-image descender gap
 * that WordPress themes introduce via img { vertical-align: baseline }. */
.go-cat-grid .go-exp-grid__card-image-link {
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
}

.go-cat-grid .go-exp-grid__card-image {
    display: block;
    vertical-align: top;
}

/* ─── Image wrapper color accent ───────────────────────────────────────── */

.go-cat-grid .go-exp-grid__card-image-wrap {
    /* aspect-ratio inherits 4/3 from experience-grid.css base — intentional.
     * Thumb dimensions (400×300) match the 4:3 ratio: no placeholder gap possible. */
    background-color: var(--go-cat-color, var(--goe-surface-subtle, #f3f4f6));
    overflow: hidden;
    position: relative;
}

.go-cat-grid .go-exp-grid__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.go-cat-grid .go-exp-grid__card:hover .go-exp-grid__card-image,
.go-cat-grid .go-exp-grid__card:focus-within .go-exp-grid__card-image {
    transform: scale(1.04);
}

/* Color strip at bottom of image when no image is present */
.go-cat-grid .go-exp-grid__card-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--go-cat-color, #0067b0) 0%,
        color-mix(in srgb, var(--go-cat-color, #0067b0) 70%, #fff) 100%
    );
}

/* ─── Card body ─────────────────────────────────────────────────────────── */

.go-cat-grid .go-exp-grid__card {
    border-radius: var(--goe-radius-card);
    overflow: hidden;
    box-shadow: var(--goe-shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--goe-surface);
}

.go-cat-grid .go-exp-grid__card:hover,
.go-cat-grid .go-exp-grid__card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--goe-shadow-card-hover);
}

/* ─── Experience count badge ────────────────────────────────────────────── */

.go-category-card__count {
    display: inline-block;
    margin: 0 0 0.5rem;
    padding: 0.1rem 0.6rem;
    border-radius: 100px;
    background-color: rgba(44, 110, 73, 0.12); /* fallback */
    background-color: color-mix(in srgb, var(--go-cat-color, #0067b0) 12%, transparent);
    color: var(--go-cat-color, #0067b0);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

/* ─── CTA button — tinted with category color ───────────────────────────── */

.go-cat-grid .go-exp-grid__card-body > .go-exp-grid__card-cta {
    display: inline-block;
    /* margin-top: auto pushes CTA to card bottom (same as experience cards).
     * align-self: flex-start prevents it stretching full card width. */
    margin-top: auto;
    align-self: flex-start;
    padding: 0.45rem 1rem;
    border-radius: 4px;
    background-color: var(--go-cat-color, #0067b0);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.go-cat-grid .go-exp-grid__card-body > .go-exp-grid__card-cta:hover,
.go-cat-grid .go-exp-grid__card-body > .go-exp-grid__card-cta:focus {
    opacity: 0.88;
    text-decoration: none;
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .go-cat-grid .go-exp-grid__card-image {
        transition: none;
    }
    .go-cat-grid .go-exp-grid__card:hover .go-exp-grid__card-image,
    .go-cat-grid .go-exp-grid__card:focus-within .go-exp-grid__card-image {
        transform: none;
    }
}

/* ─── Responsive tweaks ─────────────────────────────────────────────────── */

/* No aspect-ratio overrides needed — 4:3 base (from experience-grid.css) works at all widths. */