/* ============================================
   MPYPCP LAYOUT SYSTEM
   Mobile-first • Desktop master container • No stretch above 1600px
   Load after style.css; overrides .container and layout behavior.
   ============================================ */

/* ---------------------------------------------------------------------------
   BREAKPOINTS (min-width) — CSS px (not monitor inches; OS scaling changes both).
   Rough map: 768 tablet • 1024 laptop • 1280–1440 desktop • 1920 FHD • 2560 QHD/32"
   See V3/_dev/RESPONSIVE-DESIGN-PLAN.md + responsive-viewports.css
   --------------------------------------------------------------------------- */
:root {
    --bp-mobile-sm: 320px;
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-laptop: 1024px;
    --bp-desktop: 1280px;
    --bp-desktop-lg: 1440px;
    --bp-desktop-xl: 1600px;
    --bp-wide: 1920px;
    --bp-ultra: 2560px;

    /* Desktop master: content never wider than this; centered above 1600px */
    --container-max: 1500px;
    --container-max-narrow: 1200px;

    /* rem-based spacing (1rem = 16px at 100% zoom) */
    --space-2: 0.125rem;   /* 2px */
    --space-4: 0.25rem;    /* 4px */
    --space-6: 0.375rem;    /* 6px */
    --space-8: 0.5rem;     /* 8px */
    --space-10: 0.625rem;  /* 10px */
    --space-12: 0.75rem;   /* 12px */
    --space-15: 0.9375rem; /* 15px */
    --space-16: 1rem;      /* 16px */
    --space-20: 1.25rem;   /* 20px */
    --space-24: 1.5rem;    /* 24px */
    --space-30: 1.875rem;  /* 30px */
    --space-33: 2.0625rem; /* 33px */
    --space-40: 2.5rem;    /* 40px */
    --space-50: 3.125rem;  /* 50px */
    --space-60: 3.75rem;   /* 60px */
    --space-80: 5rem;      /* 80px */

    /* Responsive typography (clamp: min, preferred, max) */
    --text-xs: clamp(0.75rem, 2vw, 0.8125rem);
    --text-sm: clamp(0.8125rem, 2.2vw, 0.875rem);
    --text-base: clamp(0.875rem, 2.5vw, 1rem);
    --text-lg: clamp(1rem, 2.8vw, 1.125rem);
    --text-xl: clamp(1.125rem, 3vw, 1.25rem);
    --text-2xl: clamp(1.25rem, 3.5vw, 1.5rem);
    --text-3xl: clamp(1.5rem, 4vw, 2rem);
    --text-4xl: clamp(1.75rem, 5vw, 2.5rem);

    --touch-target: 2.75rem;   /* 44px min */
    --touch-target-lg: 3.5rem; /* 56px */
}

/* ---------------------------------------------------------------------------
   GLOBAL LAYOUT FOUNDATION
   --------------------------------------------------------------------------- */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   CONTAINER — Mobile-first, desktop master
   Base: full width, internal padding only.
   1024px+: max-width applied. 1600px+: never wider than --container-max.
   --------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

@media (min-width: 480px) {
    .container {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--space-24);
        padding-right: var(--space-24);
    }
}

/* Desktop layout activates: content constrained */
@media (min-width: 1024px) {
    .container {
        max-width: var(--container-max);
        padding-left: var(--space-30);
        padding-right: var(--space-30);
    }
}

@media (min-width: 1280px) {
    .container {
        padding-left: var(--space-40);
        padding-right: var(--space-40);
    }
}

/* Large screen rule: do NOT stretch; keep centered and controlled */
@media (min-width: 1600px) {
    .container {
        max-width: var(--container-max);
        padding-left: var(--space-50);
        padding-right: var(--space-50);
    }
}

@media (min-width: 1920px) {
    .container {
        padding-left: var(--space-60);
        padding-right: var(--space-60);
    }
}

/* Optional: narrow content areas (e.g. text-heavy pages) */
.container--narrow {
    max-width: var(--container-max-narrow);
}

/* Full-bleed sections: background edge-to-edge, content still in .container */
.section-full-width {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.section-full-width .container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------------------
   SECTIONS — rem-based padding, no fixed heights
   --------------------------------------------------------------------------- */
.section-padding {
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: var(--space-60);
        padding-bottom: var(--space-60);
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: var(--space-80);
        padding-bottom: var(--space-80);
    }
}

/* ---------------------------------------------------------------------------
   MAIN LAYOUT (sidebar + content) — Flexbox, no fixed % widths
   --------------------------------------------------------------------------- */
.main-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-24) 0;
    margin-top: var(--space-40);
}

@media (min-width: 1024px) {
    .main-wrapper {
        flex-direction: row;
        gap: var(--space-30);
        padding: var(--space-30) 0;
        margin-top: var(--space-40);
    }
}

.sidebar {
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .sidebar {
        width: min(25%, 320px);
        max-width: 320px;
        align-self: flex-start;
    }
}

.content-area {
    width: 100%;
    min-width: 0;
    flex-grow: 1;
}

@media (min-width: 1024px) {
    .content-area {
        min-width: 0; /* allow flex shrink */
    }
}

.content-with-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .content-with-sidebar {
        flex-direction: row;
        gap: var(--space-30);
        align-items: flex-start;
    }
}

.full-width-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   HERO / BANNER — Fluid height, no fixed px
   --------------------------------------------------------------------------- */
.hero-slider {
    width: 100%;
    max-width: 100%;
    min-height: clamp(12.5rem, 50vw, 28rem);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Home page hero: height/aspect come from index.html inline — avoid tall 16/9 + clamp() floor fighting mobile */
.hero-slider.home-hero-below-notification {
    min-height: unset;
    aspect-ratio: unset;
}

@media (max-width: 767px) {
    /* Inner pages only — home hero uses index.html min-height + same image crop as desktop */
    .hero-slider:not(.home-hero-below-notification) {
        min-height: clamp(11rem, 45vw, 20rem);
        aspect-ratio: 4 / 3;
        background-attachment: scroll;
    }
}

.hero-text {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------------------
   IMAGES & MEDIA — No overflow, no distortion
   --------------------------------------------------------------------------- */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

img {
    object-fit: contain;
}

/* Preserve aspect where needed */
.media-16-9 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.media-4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
   GRIDS — CSS Grid, no fixed column widths
   --------------------------------------------------------------------------- */
.course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-20);
    width: 100%;
    min-width: 0;
}

.stats-row .container,
.stats-row .stats-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-20);
    width: 100%;
    min-width: 0;
}

@media (min-width: 480px) {
    .stats-row .container,
    .stats-row .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-24);
    }
    .stats-row .container,
    .stats-row .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .course-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-30);
    }
    .stats-row .container,
    .stats-row .stats-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Cards: no fixed heights */
.course-card,
.card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.course-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--background-light-grey, #f9f9f9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    overflow: hidden;
}
.course-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-body {
    padding: var(--space-16);
    flex-grow: 1;
}

.course-desc {
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ---------------------------------------------------------------------------
   FOOTER GRID — Align with container, rem spacing
   --------------------------------------------------------------------------- */
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-24);
    padding-bottom: var(--space-40);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

@media (min-width: 768px) {
    .footer-grid {
        gap: var(--space-30);
        padding-left: var(--space-24);
        padding-right: var(--space-24);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        gap: 40px;
        padding-left: var(--space-30);
        padding-right: var(--space-30);
    }
}

.footer-col {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 480px) {
    .footer-col {
        flex: 1 1 calc(50% - var(--space-24));
    }
}

@media (min-width: 768px) {
    .footer-col {
        flex: 1 1 calc(25% - 30px);
        min-width: min(200px, 100%);
    }
}

/* ---------------------------------------------------------------------------
   WELCOME / CONTENT SECTIONS — rem padding
   --------------------------------------------------------------------------- */
.welcome-sec {
    padding: var(--space-24);
    margin-bottom: var(--space-30);
}

@media (min-width: 768px) {
    .welcome-sec {
        padding: var(--space-33);
    }
}

/* ---------------------------------------------------------------------------
   STATS ROW — Flexbox, no fixed widths
   --------------------------------------------------------------------------- */
.stats-row .container,
.stats-row .stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-20);
}

.stat-box {
    flex: 1 1 100%;
    min-width: 0;
    padding: var(--space-30) var(--space-20);
}

@media (min-width: 480px) {
    .stat-box {
        flex: 1 1 calc(50% - var(--space-20));
    }
}

@media (min-width: 768px) {
    .stat-box {
        flex: 1 1 calc(25% - var(--space-20));
    }
}

/* ---------------------------------------------------------------------------
   UTILITY: Prevent horizontal scroll & overflow
   --------------------------------------------------------------------------- */
.layout-wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

@media (min-width: 1024px) {
    .layout-wrap {
        padding-left: var(--space-30);
        padding-right: var(--space-30);
    }
}

/* Safe scaling: ensure no element forces overflow */
body * {
    min-width: 0;
}

/* Tables: scroll on small screens instead of squashing */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    table {
        min-width: 600px;
    }
}

/* ---------------------------------------------------------------------------
   DISPLAY SCALING (100%, 125%, 150%) — rem-based layout scales with zoom
   --------------------------------------------------------------------------- */
/* All spacing and typography use rem; no changes needed for zoom. */

/* Logo section - compact height, logo size unchanged */
.main-header {
    padding: 8px 0 !important;
}

/* Logo link - home page */
a.logo-img {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}