/* Smart Course Page — styles.css
 * Matches tamkein.net-style Udemy/Coursera course landing page.
 * All layout uses CSS logical properties for automatic RTL support.
 * @copyright 2025 Mohammad Nabil <mohammad@smartlearn.education>
 * @license   https://www.gnu.org/licenses/gpl-3.0.html GNU GPL v3 or later
 */

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
    --scp-primary:         #1a73e8;
    --scp-primary-hover:   #1557b0;
    --scp-secondary:       #ffffff;
    --scp-secondary-hover: #f1f3f4;
    --scp-success:         #22c55e;
    --scp-warning:         #f59e0b;
    --scp-dark:            #0d1b3e;
    --scp-hero-overlay:    rgba(10, 20, 55, 0.80);
    --scp-surface:         #ffffff;
    --scp-surface-alt:     #f8f9fa;
    --scp-text:            #1e293b;
    --scp-text-muted:      #64748b;
    --scp-border:          #e2e8f0;
    --scp-radius:          12px;
    --scp-radius-sm:       8px;
    --scp-radius-pill:     50px;
    --scp-shadow:          0 1px 8px rgba(0,0,0,0.07);
    --scp-shadow-lg:       0 8px 32px rgba(0,0,0,0.13);
    --scp-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --scp-star:            #f59e0b;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.scp-wrapper {
    font-family: var(--scp-font-sans);
    color: var(--scp-text);
    line-height: 1.6;
    padding-block-end: 3rem;
}

/* Global overflow protection */
.scp-wrapper *,
.scp-wrapper *::before,
.scp-wrapper *::after {
    box-sizing: border-box;
}

.scp-wrapper img {
    max-width: 100%;
    height: auto;
}

.scp-wrapper iframe,
.scp-wrapper video,
.scp-wrapper canvas {
    max-width: 100%;
}

.scp-wrapper .scp-card,
.scp-wrapper .scp-hero__content,
.scp-wrapper .scp-sidebar__inner {
    word-break: break-word;
    overflow-wrap: break-word;
}

/*
 * Fix CSS Grid / Flex min-width:auto bug.
 * Grid/flex children default to min-width:auto and REFUSE to shrink below
 * their content size. This causes canvases, iframes, images, and other
 * intrinsically-sized elements to push their containers wider than the
 * viewport on mobile.  Setting min-width:0 lets them shrink properly;
 * overflow:hidden then clips any remaining excess.
 */
.scp-hero__inner > *,
.scp-layout > *,
.scp-charts-grid > * {
    min-width: 0;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.scp-hero {
    position: relative;
    background-color: var(--scp-dark);
    background-size: cover;
    background-position: center;
    padding-block: 2.5rem 2.5rem;
    padding-inline: 2rem;
    overflow: hidden;
    margin-block-end: 0;
}

.scp-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--scp-hero-overlay);
}

/* Two-column inner: left (text) + right (video card) */
.scp-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: center;
    max-width: 1200px;
    margin-inline: auto;
}

.scp-hero__content {
    color: #fff;
}

/* Breadcrumb */
.scp-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    margin-block-end: 1rem;
    flex-wrap: wrap;
}
.scp-breadcrumb__link {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color .2s;
}
.scp-breadcrumb__link:hover { color: #fff; }
.scp-breadcrumb__sep { color: rgba(255,255,255,.5); }
.scp-breadcrumb__current { color: rgba(255,255,255,.9); font-weight: 500; }

/* Badge */
.scp-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .25rem .85rem;
    border-radius: var(--scp-radius-pill);
    margin-block-end: .75rem;
    border: 1px solid rgba(255,255,255,.25);
}

.scp-hero__title {
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: 800;
    line-height: 1.25;
    margin-block: 0 .875rem;
    color: #fff;
}

.scp-hero__summary {
    font-size: .975rem;
    opacity: .88;
    margin-block-end: 1.25rem;
    max-width: 600px;
}

/* Rating / meta row */
.scp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    font-size: .85rem;
    margin-block-end: 1.25rem;
}
.scp-meta__sep { opacity: .4; }

.scp-stars { color: var(--scp-star); font-size: 1rem; letter-spacing: .05em; }
.scp-stars__filled { color: var(--scp-star); }

.scp-rating__score {
    font-weight: 700;
    color: var(--scp-star);
    font-size: .95rem;
}
.scp-rating__count { opacity: .8; }
.scp-hero__students,
.scp-hero__updated { opacity: .85; }

/* Instructor row */
.scp-hero__instructor {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-block-start: .25rem;
}
.scp-hero__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.5);
    flex-shrink: 0;
}
.scp-hero__instructor-name {
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
}

/* Hero video/image card (right side) */
.scp-hero__video-card {
    position: relative;
    border-radius: var(--scp-radius);
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    aspect-ratio: 16/9;
}
.scp-hero__video-card iframe,
.scp-hero__video-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.scp-hero__image-card {
    position: relative;
    border-radius: var(--scp-radius);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.scp-hero__image-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.scp-hero__video-label {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    color: #fff;
    padding: 1.5rem .875rem .625rem;
    font-size: .82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ── Main layout ────────────────────────────────────────────────────────────── */
.scp-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 2rem;
    padding-block-start: 2rem;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.scp-tabs {
    display: flex;
    border-block-end: 2px solid var(--scp-border);
    margin-block-end: 1.5rem;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    background: var(--scp-surface);
    z-index: 10;
    padding-block-start: .25rem;
}
.scp-tabs::-webkit-scrollbar { display: none; }

.scp-tab {
    background: none;
    border: none;
    border-block-end: 3px solid transparent;
    padding: .75rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--scp-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
    margin-block-end: -2px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.scp-tab:hover { color: var(--scp-primary); }
.scp-tab--active,
.scp-tab[aria-selected="true"] {
    color: var(--scp-primary);
    border-block-end-color: var(--scp-primary);
}
.scp-tab__count {
    font-size: .78rem;
    color: var(--scp-text-muted);
}
.scp-tab__stars {
    font-size: .78rem;
    color: var(--scp-star);
    letter-spacing: .03em;
}
.scp-tab--reviews { gap: .5rem; }

/* ── SubTabs (Nested inside panels) ─────────────────────────────────────────── */
.scp-subtabs {
    display: flex;
    gap: .5rem;
    margin-block-end: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.scp-subtabs::-webkit-scrollbar { display: none; }

.scp-subtab {
    background: var(--scp-surface);
    border: 1px solid var(--scp-border);
    border-radius: var(--scp-radius-pill);
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--scp-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.scp-subtab:hover {
    color: var(--scp-text);
    border-color: var(--scp-primary);
    background: var(--scp-surface-alt);
}
.scp-subtab--active,
.scp-subtab[aria-selected="true"] {
    background: var(--scp-primary);
    color: #fff;
    border-color: var(--scp-primary);
    box-shadow: 0 2px 8px rgba(26,115,232,.25);
}

.scp-subpanel[hidden] { display: none; }
.scp-subpanel:focus { outline: none; }

/* ── Panels ─────────────────────────────────────────────────────────────────── */
.scp-panel[hidden] { display: none; }
.scp-panel:focus { outline: none; }
.scp-panel {
    overflow: hidden;
    min-width: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.scp-card {
    background: var(--scp-surface);
    border: 1px solid var(--scp-border);
    border-radius: var(--scp-radius);
    padding: 1.5rem;
    margin-block-end: 1.25rem;
    box-shadow: var(--scp-shadow);
    overflow: hidden;
    min-width: 0;
}
.scp-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-block: 0 1.1rem;
    color: var(--scp-text);
}
.scp-card--empty {
    color: var(--scp-text-muted);
    text-align: center;
    padding-block: 2.5rem;
}

/* ── Intro / Show more ──────────────────────────────────────────────────────── */
.scp-intro-text--collapsed {
    max-height: 160px;
    overflow: hidden;
    position: relative;
}
.scp-intro-text--collapsed::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--scp-surface));
}
.scp-showmore {
    background: none;
    border: none;
    color: var(--scp-primary);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    padding: .35rem 0;
    margin-block-start: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: opacity .2s;
}
.scp-showmore:hover { opacity: .75; }

/* ── Skills / What you'll learn ─────────────────────────────────────────────── */
.scp-skills-grid { display: flex; flex-direction: column; gap: .5rem; }
.scp-skills-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
}
.scp-skill {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9rem;
}
.scp-skill__check {
    color: var(--scp-success);
    flex-shrink: 0;
    margin-block-start: .15em;
    display: flex;
}

/* ── Subjects covered (vertical list) ──────────────────────────────────────── */
.scp-subjects-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.scp-subject-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.5;
}
.scp-subject-icon {
    color: var(--scp-primary);
    font-size: .95rem;
    flex-shrink: 0;
    margin-block-start: .1em;
    font-weight: 700;
}
.scp-subject-text {
    color: var(--scp-text);
    flex: 1;
    word-break: break-word;
}

/* ── Requirements list (warning icon) ──────────────────────────────────────── */
.scp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.scp-list__item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding-block: .3rem;
    font-size: .9rem;
    border-block-end: 1px solid var(--scp-border);
}
.scp-list__item:last-child { border-block-end: none; }
.scp-list__icon {
    color: var(--scp-warning);
    flex-shrink: 0;
    margin-block-start: .15em;
    display: flex;
}

/* ── Content summary ────────────────────────────────────────────────────────── */
.scp-content-summary {
    font-size: .875rem;
    color: var(--scp-text-muted);
    margin-block-end: 1rem;
}

/* ── Accordion ──────────────────────────────────────────────────────────────── */
.scp-accordion { border: 1px solid var(--scp-border); border-radius: var(--scp-radius-sm); overflow: hidden; }
.scp-accordion__item { border-block-end: 1px solid var(--scp-border); }
.scp-accordion__item:last-child { border-block-end: none; }

.scp-accordion__trigger {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    background: var(--scp-surface-alt);
    border: none;
    padding: .875rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--scp-text);
    cursor: pointer;
    text-align: start;
    transition: background .2s;
}
.scp-accordion__trigger:hover { background: #eef2fb; }
.scp-accordion__trigger[aria-expanded="true"] { background: #e8f0fe; }
.scp-accordion__trigger[aria-expanded="true"] .scp-accordion__icon {
    transform: rotate(90deg);
}
.scp-accordion__icon {
    font-size: .7rem;
    color: var(--scp-primary);
    transition: transform .25s;
    flex-shrink: 0;
}
.scp-accordion__name { flex: 1; }
.scp-accordion__count {
    font-size: .78rem;
    color: var(--scp-text-muted);
    font-weight: 400;
    margin-inline-start: auto;
    white-space: nowrap;
}
.scp-accordion__panel[hidden] { display: none; }
.scp-accordion__panel {
    padding: .75rem 1rem;
    background: var(--scp-surface);
}
.scp-activity-list { list-style: none; padding: 0; margin: 0; }
.scp-activity {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-block: .4rem;
    border-block-end: 1px solid var(--scp-border);
    font-size: .875rem;
}
.scp-activity:last-child { border-block-end: none; }
.scp-activity__icon { flex-shrink: 0; }
.scp-activity__name { color: var(--scp-text); text-decoration: none; }
.scp-activity__name:hover { color: var(--scp-primary); text-decoration: underline; }

/* ── Instructor card ────────────────────────────────────────────────────────── */
.scp-instructor-card__header { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem; }
.scp-instructor-card__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.scp-instructor-card__name { font-size: 1.05rem; font-weight: 700; margin: 0; }
.scp-instructor-card__bio { font-size: .9rem; color: var(--scp-text-muted); }

/* ── Certificate card ───────────────────────────────────────────────────────── */
.scp-card--certificate img { max-width: 100%; border-radius: var(--scp-radius-sm); }

/* ── Reviews panel ──────────────────────────────────────────────────────────── */
.scp-reviews-summary {
    text-align: center;
    padding-block: 2rem;
}
.scp-reviews-summary__score {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--scp-text);
    margin-block-end: .5rem;
}
.scp-reviews-summary__stars {
    font-size: 1.75rem;
    color: var(--scp-star);
    letter-spacing: .1em;
    margin-block-end: .5rem;
}
.scp-reviews-summary__count {
    font-size: .9rem;
    color: var(--scp-text-muted);
}

/* ── Booking slots table ──────────────────────────────────────────────────── */

.scp-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 1rem;
}

.scp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    text-align: left;
}

.scp-table th,
.scp-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--scp-border);
}

.scp-table th {
    font-weight: 600;
    color: var(--scp-text-muted);
    background: var(--scp-surface-alt);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scp-table tbody tr {
    transition: background-color .2s ease;
}

.scp-table tbody tr:hover {
    background-color: var(--scp-surface-alt);
}

.scp-badge {
    display: inline-flex;
    align-items: center;
    padding: .25em .6em;
    font-size: .75rem;
    font-weight: 600;
    border-radius: var(--scp-radius-pill);
    background-color: var(--scp-primary);
    color: #fff;
    white-space: nowrap;
}

.scp-badge--seats {
    background-color: #10b981; /* Emerald green for positive items like available seats */
    color: #fff;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.scp-sidebar {
    position: sticky;
    top: 1rem;
}
.scp-sidebar__inner {
    background: var(--scp-surface);
    border: 1px solid var(--scp-border);
    border-radius: var(--scp-radius);
    box-shadow: var(--scp-shadow-lg);
    overflow: hidden;
}

/* Mobile-only media (hidden on desktop since video is in hero) */
.scp-sidebar__media--mobile-only { display: none; }
.scp-sidebar__course-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.scp-video-embed { position: relative; padding-block-end: 56.25%; height: 0; }
.scp-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.scp-video-local { width: 100%; aspect-ratio: 16/9; display: block; }

/* CTA buttons */
.scp-sidebar__cta {
    padding: 1rem 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.scp-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: .875rem 1.25rem;
    border-radius: var(--scp-radius-sm);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .1s, box-shadow .2s;
}
.scp-btn--primary {
    background: var(--scp-primary);
    color: #fff;
    border: 2px solid var(--scp-primary);
}
.scp-btn--primary:hover {
    background: var(--scp-primary-hover);
    border-color: var(--scp-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(26,115,232,.3);
}
.scp-btn--secondary {
    background: #fff;
    color: var(--scp-text);
    border: 2px solid var(--scp-border);
}
.scp-btn--secondary:hover {
    background: var(--scp-surface-alt);
    border-color: #c0c8d8;
}

/* Highlights */
.scp-highlights {
    border-block-start: 1px solid var(--scp-border);
    padding: .875rem 1.25rem;
    margin-block-start: .75rem;
}
.scp-highlight {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-block: .4rem;
    font-size: .875rem;
    border-block-end: 1px solid var(--scp-surface-alt);
}
.scp-highlight:last-child { border-block-end: none; }
.scp-highlight__icon { color: var(--scp-primary); flex-shrink: 0; display: flex; align-items: center; }
.scp-highlight__label { color: var(--scp-text-muted); min-width: 72px; font-weight: 500; }
.scp-highlight__value { font-weight: 700; margin-inline-start: auto; text-align: end; color: var(--scp-text); }

/* Includes */
.scp-includes {
    border-block-start: 1px solid var(--scp-border);
    padding: .875rem 1.25rem 1.25rem;
}
.scp-includes__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--scp-text-muted);
    margin-block: 0 .625rem;
}
.scp-includes__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.scp-includes__item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.scp-includes__icon { color: var(--scp-success); display: flex; align-items: center; flex-shrink: 0; }
.scp-includes__count { font-weight: 700; color: var(--scp-primary); min-width: 1.5rem; text-align: end; }

/* ── Enrol section ──────────────────────────────────────────────────────────── */
.scp-enrol-section {
    margin-block-start: 2rem;
    border-block-start: 2px solid var(--scp-border);
    padding-block-start: 2rem;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 2rem;
}
.scp-enrol-section__inner { max-width: 600px; margin-inline: auto; }

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

/* Prevent horizontal overflow on all screens */
.scp-wrapper {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Tablet (≤ 960px) ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .scp-hero__inner { grid-template-columns: 1fr; }
    .scp-hero__preview { display: none; }
    .scp-sidebar__media--mobile-only { display: block; }
    .scp-layout {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
        gap: 1.25rem;
    }
    .scp-sidebar {
        position: static;
        order: -1;
    }
    .scp-hero { padding-inline: 1rem; }
}

/* ── Mobile (≤ 640px) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Hero */
    .scp-hero {
        padding-block: 1.5rem;
        padding-inline: .75rem;
    }
    .scp-hero__title {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    .scp-hero__summary {
        font-size: .875rem;
        margin-block-end: 1rem;
    }
    .scp-hero__meta {
        font-size: .78rem;
        gap: .25rem .5rem;
    }
    .scp-hero__instructor-name {
        font-size: .82rem;
    }
    .scp-hero__avatar {
        width: 36px;
        height: 36px;
    }
    .scp-breadcrumb {
        font-size: .75rem;
    }

    /* Main layout */
    .scp-layout {
        padding-inline: .625rem;
        padding-block-start: .75rem;
        gap: 1rem;
    }

    /* Tabs */
    .scp-tabs {
        gap: 0;
        margin-block-end: 1rem;
        padding-inline: 0;
    }
    .scp-tab {
        padding: .6rem .65rem;
        font-size: .78rem;
    }
    .scp-tab__count,
    .scp-tab__stars { font-size: .7rem; }

    /* Subtabs */
    .scp-subtabs {
        gap: .35rem;
        margin-block-end: 1rem;
    }
    .scp-subtab {
        padding: .35rem .75rem;
        font-size: .78rem;
    }

    /* Cards */
    .scp-card {
        padding: 1rem .875rem;
        margin-block-end: 1rem;
        border-radius: var(--scp-radius-sm);
    }
    .scp-card__title {
        font-size: 1.05rem;
        margin-block-end: .875rem;
    }

    /* Skills grid — single column */
    .scp-skills-row { grid-template-columns: 1fr; }

    /* Accordion */
    .scp-accordion__trigger {
        padding: .75rem .625rem;
        font-size: .825rem;
        gap: .5rem;
    }
    .scp-accordion__count { font-size: .72rem; }
    .scp-accordion__panel { padding: .5rem .625rem; }
    .scp-activity {
        font-size: .82rem;
        gap: .45rem;
    }

    /* Sidebar */
    .scp-sidebar__inner {
        border-radius: var(--scp-radius-sm);
    }
    .scp-sidebar__cta {
        padding: .75rem .875rem 0;
    }
    .scp-btn {
        padding: .75rem 1rem;
        font-size: .9rem;
    }

    /* Highlights */
    .scp-highlights {
        padding: .75rem .875rem;
    }
    .scp-highlight {
        font-size: .82rem;
        padding-block: .3rem;
    }
    .scp-highlight__label {
        min-width: auto;
        font-size: .8rem;
    }
    .scp-highlight__value {
        font-size: .82rem;
    }

    /* Includes */
    .scp-includes {
        padding: .75rem .875rem 1rem;
    }
    .scp-includes__title { font-size: .75rem; }
    .scp-includes__item { font-size: .82rem; }

    /* Instructor card */
    .scp-instructor-card__header {
        gap: .625rem;
    }
    .scp-instructor-card__avatar {
        width: 48px;
        height: 48px;
    }
    .scp-instructor-card__name { font-size: .95rem; }
    .scp-instructor-card__bio { font-size: .85rem; }

    /* Reviews */
    .scp-reviews-summary {
        padding-block: 1.25rem;
    }
    .scp-reviews-summary__score {
        font-size: 3rem !important;
    }
    .scp-reviews-summary__stars {
        font-size: 1.25rem !important;
    }

    /* Review card inline style overrides */
    .scp-review-card {
        padding-top: 1rem !important;
    }
    .scp-review-card__header {
        gap: .625rem !important;
    }
    .scp-review-card__avatar {
        width: 32px !important;
        height: 32px !important;
    }
    .scp-review-card__avatar-fallback {
        width: 32px !important;
        height: 32px !important;
    }
    .scp-review-card__author {
        font-size: .9rem !important;
    }
    .scp-review-card__body {
        font-size: .875rem !important;
    }

    /* Booking slots table */
    .scp-booking-activity {
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
    }
    .scp-booking-topic-name {
        font-size: .95rem !important;
    }
    .scp-booking-activity-name {
        font-size: .875rem !important;
    }
    .scp-table th,
    .scp-table td {
        padding: .5rem .625rem;
        font-size: .8rem;
    }
    .scp-table th {
        font-size: .72rem;
    }

    /* Enrol section */
    .scp-enrol-section {
        padding-inline: .75rem;
        padding-block-start: 1.25rem;
        margin-block-start: 1.25rem;
    }

    /* Charts */
    .scp-chart-container {
        height: 250px;
    }

    /* Intro show-more */
    .scp-intro-text--collapsed {
        max-height: 120px;
    }
}

/* ── Very small screens (≤ 380px) ─────────────────────────────────────────── */
@media (max-width: 380px) {
    .scp-hero__title { font-size: 1.15rem; }
    .scp-hero { padding-inline: .5rem; }
    .scp-layout { padding-inline: .5rem; }
    .scp-card { padding: .75rem .625rem; }
    .scp-tab { padding: .5rem .5rem; font-size: .72rem; }
    .scp-btn { padding: .65rem .75rem; font-size: .85rem; }
    .scp-highlight {
        flex-wrap: wrap;
        gap: .25rem;
    }
    .scp-highlight__value {
        margin-inline-start: 0;
        width: 100%;
        text-align: start;
    }
}

/* ── RTL overrides ─────────────────────────────────────────────────────────── */
[dir="rtl"] .scp-hero__content { text-align: start; }
[dir="rtl"] .scp-highlight__value { text-align: start; }
[dir="rtl"] .scp-breadcrumb__sep { transform: scaleX(-1); display: inline-block; }

/* ── Charts Grid ─────────────────────────────────────────────── */
.scp-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 1rem;
}

@media (min-width: 900px) {
    .scp-charts-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.scp-chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
}