/* ============================================
   Category Preview Page (rd-cp-category-*)
   Mobile-first, breakpoints at 600px / 1024px
   ============================================ */



/* --- Hero Section --- */
.rd-cp-category-hero {
    position: relative;
    padding: var(--rd-spacing-huge) 0 var(--rd-spacing-x-big);
    background-color: var(--rd-base-fg-bg-overlay);
    background-size: cover;
    background-position: center bottom;
    color: var(--rd-font-light);
}

/* Dark overlay: solid on the left for legibility, revealing the image on the right */
.rd-cp-category-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--rd-base-fg-bg-overlay) var(--rd-spacing-x-huge), var(--rd-base-fg-bg-overlay) 100%);
}

.rd-cp-category-hero .container {
    position: relative;
}

.rd-cp-category-hero-label {
    display: block;
    font-size: var(--rd-fontsize-6);
    margin-bottom: var(--rd-spacing-sm);
}


.rd-cp-category-hero-count {
    margin-bottom: var(--rd-spacing-big);
}

.rd-cp-category-hero-subtitle {
    margin-bottom: var(--rd-spacing-lg);
}

/* --- Partner Logos --- */
.rd-cp-category-logos {
    padding: var(--rd-spacing-md) 0;

    .partner_logos.container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* --- Section headings ---
   One definition for every h2 on the page. The Figma desktop frame styles all of them
   with Headline/H1 Bold (28px / 132%); previously these were split across four rules and
   rendered at 22-24px. Below 640px the shared reset in PublicPage.css takes them to 22px,
   which is what the mobile frame shows for the FAQ and course-grid titles. */
.rd-cp-category-seo-intro h2,
.rd-cp-category-seo-extended h2,
.rd-cp-category-courses-title,
.rd-cp-category-testimonials h2,
.rd-cp-category-faq h2 {
    font-size: var(--rd-fontsize-11);
    font-weight: var(--rd-fontweights-open-sans-0);
    margin-bottom: var(--rd-spacing-x-big);
}

/* --- Course Grid Section --- */
.rd-cp-category-courses {
    background-color: var(--rd-list-default-dark);
    padding: var(--rd-spacing-lg) 0;
}

/* --- SEO prose sections ---
   No type rules here on purpose. A .rd-cp-category-seo-block block used to sit at this
   spot, but no template ever rendered that class, so its max-width: 800px and
   line-height: 1.7 never applied. Both contradict the Figma frames, which run body copy
   across the full 1140px column, so they were removed rather than wired up. List and
   paragraph formatting belongs to .rd-prose (Prose.css). */

/* --- Testimonials --- */
/* The wave background + vertical spacing come from .rd-homepage-library. */
.rd-cp-category-testimonials-list {
    display: flex;
    gap: var(--rd-spacing-x-big);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--rd-spacing-md);
}

.rd-cp-category-testimonials-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    padding: var(--rd-spacing-x-big);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rd-cp-category-testimonials-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--rd-fontsize-6);
    font-weight: var(--rd-fontweights-open-sans-0);
    margin-bottom: var(--rd-spacing-sm);
}

.rd-cp-category-testimonials-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--rd-spacing-sm);
}

.rd-cp-category-testimonials-quote {
    font-size: var(--rd-fontsize-4);
    line-height: 1.6;
    margin: 0 0 var(--rd-spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rd-cp-category-testimonials-name {
    font-size: var(--rd-fontsize-3);
    font-style: normal;
    color: var(--rd-gray-500);
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

@media (min-width: 640px) {

    .rd-cp-category-hero {
        padding: var(--rd-spacing-xx-lg) 0;
        background-size: cover;
        background-position: center right;

        >.container>* {
            max-width: 85%;
        }

    }

    /* Dark overlay: solid on the left for legibility, revealing the image on the right */
    .rd-cp-category-hero::before {
        background: linear-gradient(to right, var(--rd-base-fg-bg-overlay) 0%, var(--rd-base-fg-bg-overlay) 65%, transparent 130%);
    }

    .rd-cp-category-courses {
        padding: var(--rd-spacing-xxx-lg) 0;
    }

    .rd-cp-category-logos {
        padding: var(--rd-spacing-lg) 0;
    }
}

@media (min-width: 1024px) {

    .rd-cp-category-hero {
        padding: var(--rd-spacing-xx-lg) 0;
        background-size: cover;
        background-position: center right;

        >.container>* {
            max-width: 60%;
        }

    }

    /* Dark overlay: solid on the left for legibility, revealing the image on the right */
    .rd-cp-category-hero::before {
        background: linear-gradient(to right, var(--rd-base-fg-bg-overlay) 0%, var(--rd-base-fg-bg-overlay) 55%, transparent 100%);
    }

    .rd-cp-category-testimonials-card {
        flex: 0 0 340px;
    }
}