/* K-Digital mobile (max-width: 1199px). Scoped to .kd-page. */
@media (max-width: 1199px) {
    /* LMS mobile header opens .header_top (padding: 0 5px) around the whole page body.
       Remove only the side padding on K-Digital pages (this file is loaded only here). */
    .header_top {
        padding-left: 0;
        padding-right: 0;
    }

    .kd-page .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .kd-page .kd-btn {
        height: 48px;
        font-size: 15px;
    }

    /* Bridge for the shared LMS Sticky CTA (sticky-cta.asp, unmodified).
       Its mobile rules live in a global LMS stylesheet we must not load, so only the
       mobile layout is mirrored here, scoped to .kd-page. */
    .kd-page .sticky-cta {
        bottom: 57px;
    }
    .kd-page .sticky-cta-inner {
        display: block;
    }
    .kd-page .sticky-cta-text {
        display: none;
    }
    .kd-page .sticky-cta-actions {
        display: flex;
        gap: 8px;
    }
    .kd-page .sticky-cta-btn {
        flex: 1;
        height: 40px;
        min-width: 0;
        padding: 0 8px;
        font-size: 14px;
    }
    .kd-page .sticky-cta {
        width: calc(100% - 24px);
    }
    .kd-page .sticky-cta.is-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ===== Mobile tab bar: same layout as the aioffice page (equal tabs + hamburger course menu) ===== */
@media (max-width: 767px) {
    .kd-page .section-tabbar { height: 52px; }
    .kd-page .section-tabbar .container { height: 52px; padding-left: 0; padding-right: 0; justify-content: flex-start; }
    .kd-page .tabbar-list { flex: 1 1 auto; min-width: 0; margin: 0; }
    .kd-page .tabbar-list li { flex: 1 1 0; min-width: 0; }
    .kd-page .tabbar-link { width: 100%; min-width: 0; height: 52px; padding: 0 4px; white-space: nowrap; opacity: 0.72; }
    .kd-page .tabbar-link:hover,
    .kd-page .tabbar-link.is-active { opacity: 1; box-shadow: inset 0 -3px 0 #fff; }
    .kd-page .tabbar-course { position: static; flex: 0 0 52px; }
    .kd-page .tabbar-course-trigger { width: 52px; height: 52px; padding: 0; justify-content: center; gap: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); }
    .kd-page .tabbar-course-icon,
    .kd-page .tabbar-course-label,
    .kd-page .tabbar-course-arrow { display: none; }
    .kd-page .tabbar-course-trigger::before { content: ""; display: block; width: 19px; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
    .kd-page .tabbar-course.is-open .tabbar-course-trigger { background: rgba(255, 255, 255, 0.07); }
    .kd-page .tabbar-course-menu { top: 52px; left: 0; right: 0; width: 100%; max-height: calc(100vh - 140px); overflow-y: auto; padding: 12px; border-top: 1px solid #e5e7eb; border-radius: 0; box-shadow: 0 12px 25px rgba(15, 23, 42, 0.18); }
    .kd-page .tabbar-course-option { display: flex; align-items: center; min-height: 46px; padding: 0 15px; border-radius: 6px; color: #334155; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4; }
    .kd-page a.tabbar-course-option:hover,
    .kd-page .tabbar-course-option.is-current { background: #eef3ff; color: #102879; }
    .kd-page .tabbar-course-option.is-current { font-weight: 700 !important; }
}

/* ===== Tablet (768-1199px): tabs share the width, the course button keeps its label on one line ===== */
@media (min-width: 768px) and (max-width: 1199px) {
    .kd-page .tabbar-list { flex: 1 1 auto; min-width: 0; margin: 0; }
    .kd-page .tabbar-list li { flex: 1 1 0; min-width: 0; }
    .kd-page .tabbar-link { min-width: 0; width: 100%; padding: 0 8px; white-space: nowrap; }
    .kd-page .tabbar-course { flex: 0 0 auto; }
    .kd-page .tabbar-course-label { white-space: nowrap; }
}