/* ==========================================================
   EduPro LMS — Mobile Responsive Stylesheet
   Covers: max-width 1024px (tablet) and max-width 768px (mobile)
   Compatible with GeneratePress theme
   ========================================================== */

/* ─── TABLET: 1025px and below ─────────────────────────── */
@media (max-width: 1024px) {

    /* Remove outer horizontal margin so layouts breathe */
    .edupro-container {
        margin: 20px auto;
        padding: 0 16px;
    }

    /* Course split stacks vertically */
    .edupro-course-split {
        flex-direction: column;
        gap: 24px;
        margin-top: -40px;
    }

    /* Sidebar goes full-width below hero */
    .edupro-course-sidebar {
        width: 100%;
        position: static;
        margin-top: 0;
    }

    /* Hero adjustments */
    .edupro-single-hero {
        padding: 50px 16px 70px 16px;
        text-align: left;
    }

    .edupro-single-hero .edupro-container {
        align-items: flex-start;
    }

    .edupro-single-hero .edupro-h1 {
        font-size: 2rem;
    }

    /* Dashboard header */
    .edupro-dashboard-header {
        padding: 30px 24px;
        border-radius: 20px;
        margin-bottom: 24px;
    }

    /* Course grid: 2 columns on tablet */
    .edupro-course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Lesson layout overrides (already handled in main CSS, reinforce here) */
    .edupro-lesson-layout {
        padding: 0;
        gap: 0;
    }

    .edupro-lesson-main {
        padding: 24px 20px;
    }
}

/* ─── MOBILE: 768px and below ───────────────────────────── */
@media (max-width: 768px) {

    /* ── Global Reset for Edge-to-Edge ── */
    .edupro-container {
        max-width: 100%;
        margin: 0;
        padding: 0 14px;
    }

    /* ── Typography ── */
    .edupro-h1 {
        font-size: 1.7rem;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .edupro-h2 {
        font-size: 1.4rem;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .edupro-h3 {
        font-size: 1.15rem;
        line-height: 1.35;
    }

    /* ── Buttons — touch-friendly (min 44px height) ── */
    .edupro-btn {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 0.95rem;
        border-radius: 26px;
    }

    .edupro-btn-outline {
        min-height: 44px;
    }

    /* ── Auth Cards (Login / Register / Forgot / Reset) ── */
    .edupro-login-wrapper {
        min-height: unset;
        padding: 16px 0;
        background-color: #f8fafc;
        align-items: flex-start;
    }

    .edupro-login-card {
        width: 100%;
        max-width: 100%;
        padding: 24px 16px;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }

    .edupro-input {
        padding: 13px 16px;
        font-size: 1rem;
    }

    /* ── Form Groups ── */
    .edupro-form-group {
        margin-bottom: 18px;
    }

    /* ── Alert ── */
    .edupro-alert {
        padding: 12px 16px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    /* ── Dashboard Header ── */
    .edupro-dashboard-header {
        padding: 22px 16px;
        border-radius: 14px;
        margin-bottom: 18px;
    }

    .edupro-dashboard-header .edupro-h1 {
        font-size: 1.4rem;
        margin-bottom: 6px;
    }

    .edupro-dashboard-header p {
        font-size: 0.9rem;
    }

    /* ── Course Grid — single column, edge-to-edge ── */
    .edupro-course-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        /* Remove side padding so cards fill the screen */
    }

    /* ── Course Card — edge-to-edge ── */
    .edupro-course-card {
        border-radius: 14px;
        border: 1px solid #e8edf4;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    .edupro-course-thumb {
        height: 170px;
        width: 100%;
        object-fit: cover;
    }

    .edupro-course-body {
        padding: 16px;
    }

    .edupro-course-title {
        font-size: 1.05rem;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .edupro-course-meta {
        font-size: 0.82rem;
        gap: 10px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    /* Price & CTA row inside card */
    .edupro-course-body > div[style*="justify-content:space-between"] {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ── Single Course Hero ── */
    .edupro-single-hero {
        padding: 36px 14px 60px 14px;
        text-align: left;
    }

    .edupro-single-hero .edupro-h1 {
        font-size: 1.7rem;
    }

    .edupro-hero-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }

    /* ── Course Content & Enroll Blocks ── */
    .edupro-course-split {
        flex-direction: column;
        gap: 0;
        margin-top: -28px;
    }

    .edupro-course-main-content {
        width: 100%;
    }

    .edupro-content-block {
        padding: 18px 14px;
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        margin-bottom: 14px;
    }

    .edupro-course-sidebar {
        width: 100%;
        position: static;
        padding: 0;
    }

    .edupro-enroll-card {
        padding: 20px 14px;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .edupro-price-display .edupro-amount {
        font-size: 2.5rem;
    }

    .edupro-price-display .edupro-currency {
        font-size: 1.5rem;
    }

    /* ── Curriculum / Lesson Rows ── */
    .edupro-curriculum-wrap {
        border-radius: 12px;
    }

    .edupro-lesson-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 12px;
    }

    .edupro-lesson-info {
        flex: 1;
        gap: 10px;
        min-width: 0; /* allow text truncate */
    }

    .edupro-lesson-title {
        font-size: 0.88rem;
        line-height: 1.4;
        word-break: break-word;
    }

    .edupro-lesson-num {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
        flex-shrink: 0;
    }

    .edupro-demo-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* ── Course Features List ── */
    .edupro-course-features li {
        font-size: 0.88rem;
        padding: 10px 0;
    }

    /* ── Lesson View ── */
    .edupro-lesson-wrapper {
        padding-top: 0;
    }

    .edupro-lesson-header {
        display: none;
    }

    .edupro-sticky-topbar {
        display: flex;
        padding: 12px 14px;
    }

    .edupro-lesson-layout {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    .edupro-lesson-main {
        padding: 18px 14px;
        border-radius: 0;
        box-shadow: none;
        border-top: 1px solid #e2e8f0;
        min-width: 0;
    }

    /* Sidebar: offcanvas always on mobile */
    .edupro-lesson-sidebar {
        position: fixed;
        top: 0;
        left: -100vw;
        width: 82vw;
        max-width: 320px;
        height: 100vh;
        border-radius: 0;
        border: none;
        z-index: 1000;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .edupro-offcanvas-open .edupro-lesson-sidebar {
        left: 0;
    }

    .edupro-sidebar-item {
        padding: 14px 16px;
        font-size: 0.9rem;
    }

    /* ── Video Player ── */
    .edupro-yt-lite {
        border-radius: 10px;
    }

    /* ── Timeline / Chapters Grid ── */
    .edupro-timeline-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 16px;
    }

    .edupro-timeline-card {
        padding: 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .edupro-timeline-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .edupro-timeline-title {
        font-size: 0.88rem;
    }

    .edupro-timeline-time {
        font-size: 0.78rem;
    }

    /* ── Quiz Container ── */
    #edupro-quiz-container {
        padding: 20px 14px !important;
        border-radius: 14px !important;
        margin-top: 30px !important;
    }

    /* Quiz answer options — single column on mobile */
    .edupro-quiz-question > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Quiz option labels */
    .edupro-quiz-question label {
        padding: 11px 14px !important;
        border-radius: 10px !important;
        font-size: 0.9rem;
    }

    /* Quiz result score blocks */
    #edupro-quiz-result > div[style*="justify-content:center"] {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    #edupro-quiz-result > div[style*="justify-content:center"] > div {
        min-width: 120px !important;
        padding: 16px 12px !important;
    }

    /* ── Prev/Next Navigation inside lesson ── */
    div[style*="justify-content:space-between"][style*="margin-top: 60px"] {
        flex-direction: column;
        gap: 12px;
        padding-top: 24px;
        margin-top: 32px !important;
    }

    div[style*="justify-content:space-between"][style*="margin-top: 60px"] a,
    div[style*="justify-content:space-between"][style*="margin-top: 60px"] span {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    div[style*="justify-content:space-between"][style*="margin-top: 60px"] > div {
        width: 100%;
    }

    /* ── Progress Section ── */
    .edupro-progress-section {
        margin-top: 12px;
    }

    .edupro-progress-text {
        font-size: 0.8rem;
        margin-bottom: 6px;
    }

    .edupro-progress-container {
        height: 7px;
    }

    /* ── Report Card Toggle Buttons ── */
    .edupro-toggle-report-btn,
    .edupro-course-card .edupro-btn {
        font-size: 0.88rem;
        padding: 10px 14px;
        min-height: 42px;
    }

    /* Report card: flex buttons stack */
    .edupro-course-card div[style*="display:flex"][style*="gap:10px"] {
        flex-direction: column;
        gap: 8px;
    }

    /* ── Report Card Table ── */
    .edupro-report-card {
        padding: 16px 12px !important;
        border-radius: 10px !important;
        margin-top: 12px !important;
    }

    .edupro-report-card table {
        font-size: 0.85rem !important;
    }

    .edupro-report-card th,
    .edupro-report-card td {
        padding: 10px 8px !important;
    }

    /* ── Checkout Modal ── */
    .edupro-checkout-modal > .edupro-login-card {
        margin: 0 !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 92vh;
        overflow-y: auto;
    }

    .edupro-checkout-modal {
        align-items: flex-end !important;
    }

    /* PDF Viewer — reduce height on mobile */
    div[style*="padding-bottom:141.4%"] {
        padding-bottom: 100% !important;
    }

    /* Study Materials heading */
    .edupro-h3[style*="margin-top:50px"] {
        margin-top: 30px !important;
        padding-top: 24px !important;
    }

    /* ── Courses List page heading ── */
    .edupro-container > .edupro-h2[style*="text-align:center"] {
        margin-bottom: 20px !important;
        font-size: 1.35rem;
    }

    /* ── General spacing cleanup ── */
    .edupro-lesson-main > .edupro-h2 {
        font-size: 1.2rem;
        line-height: 1.35;
        word-break: break-word;
    }

    .edupro-topbar-title {
        display: none;
    }

    /* ── Topbar back link text ── */
    .edupro-btn-toggle-menu span.edupro-topbar-text {
        font-size: 0.95rem;
    }

    /* ── GeneratePress compatibility ── */
    /* Prevent the theme's content wrapper from adding inner padding that traps our cards */
    .inside-article .edupro-course-grid,
    .inside-article .edupro-login-wrapper,
    .entry-content .edupro-course-grid,
    .entry-content .edupro-login-wrapper {
        margin-left: -14px;
        margin-right: -14px;
    }

    .inside-article .edupro-login-card,
    .entry-content .edupro-login-card {
        border-left: none;
        border-right: none;
    }
}

/* ─── SMALL MOBILE: 480px and below ────────────────────── */
@media (max-width: 480px) {

    .edupro-container {
        padding: 0 12px;
    }

    .edupro-h1 {
        font-size: 1.5rem;
    }

    .edupro-h2 {
        font-size: 1.25rem;
    }

    .edupro-course-body {
        padding: 14px 12px;
    }

    .edupro-content-block {
        padding: 16px 12px;
    }

    .edupro-lesson-main {
        padding: 16px 12px;
    }

    .edupro-dashboard-header {
        padding: 18px 12px;
    }

    .edupro-enroll-card {
        padding: 18px 12px;
    }

    .edupro-price-display .edupro-amount {
        font-size: 2rem;
    }

    .edupro-single-hero {
        padding: 28px 12px 52px 12px;
    }

    .edupro-single-hero .edupro-h1 {
        font-size: 1.45rem;
    }

    /* Sticky topbar tighter */
    .edupro-sticky-topbar {
        padding: 10px 12px;
    }

    /* Wider sidebar on very small devices */
    .edupro-lesson-sidebar {
        width: 90vw;
        max-width: 90vw;
    }

    /* Quiz result score blocks full width */
    #edupro-quiz-result > div[style*="justify-content:center"] > div {
        min-width: 100px !important;
        flex: 1;
    }

    /* Login card: tighter on tiny screens */
    .edupro-login-card {
        padding: 20px 12px;
    }

    .edupro-course-thumb {
        height: 150px;
    }
}