/**
 * OUI Catalogue layout — extends landing.css.
 * Scoped to body.layout-catalogue. Adds card cover-image and subcategory
 * cover band styles on top of the landing design tokens.
 */

body.layout-catalogue {
    background: transparent;
}

/* Make cards stack contents flexibly so the action row can stick to the bottom. */
body.layout-catalogue .oui-landing-page .catalogue-card {
    display: flex;
    flex-direction: column;
}
body.layout-catalogue .oui-landing-page .catalogue-card h3 {
    letter-spacing: -.02em;
}
body.layout-catalogue .oui-landing-page .catalogue-card .text-muted {
    flex: 1;
}

/* Cover image — clickable banner inside the card. */
body.layout-catalogue .oui-landing-page .catalogue-card-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
    background-size: cover;
    background-position: center;
    background-color: rgba(16, 16, 20, .04);
    margin-bottom: .5rem;
    transition: transform .35s ease;
}
body.layout-catalogue .oui-landing-page .catalogue-card:hover .catalogue-card-cover {
    transform: scale(1.02);
}

/* Smaller pill buttons for inside cards. */
body.layout-catalogue .oui-landing-page .btn-soft.btn-sm {
    padding: .55rem .95rem;
    font-size: .85rem;
    font-weight: 800;
}

/* Subcategory cover image — slim band above the cards. */
body.layout-catalogue .oui-landing-page .catalogue-cover {
    margin: 0 0 1.5rem;
    border-radius: clamp(1.4rem, 3vw, 2rem);
    overflow: hidden;
    height: clamp(10rem, 22vw, 16rem);
    box-shadow: 0 24px 70px rgba(16, 16, 20, .06);
    border: 1px solid var(--landing-line);
    background: var(--landing-gradient);
}
body.layout-catalogue .oui-landing-page .catalogue-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    opacity: .9;
}

/* Hero figure — same treatment as product layout, lets a category cover image
   anchor the hero on the right. */
body.layout-catalogue .oui-landing-page .hero-figure {
    border-radius: clamp(1.4rem, 3vw, 2rem);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(16, 16, 20, .12);
    border: 1px solid var(--landing-line);
    background: #fff;
    height: clamp(28rem, 60vh, 44rem);
}
body.layout-catalogue .oui-landing-page .hero-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Eyebrow links inside subcategory titles inherit ink color cleanly. */
body.layout-catalogue .oui-landing-page .catalogue-subcategory h2 a:hover {
    color: var(--landing-deep);
}

@media (max-width: 991px) {
    body.layout-catalogue .oui-landing-page .hero-figure {
        height: clamp(20rem, 50vw, 28rem);
    }
}