/* MSID Mobile Experience
 * One authoritative responsive layer for public screens.
 * Desktop component rules stay in their feature bundles; this file owns phone ergonomics.
 */

@media (max-width: 767px) {
  :root{
    --msid-mobile-gutter: 16px;
    --msid-mobile-radius: var(--msid-radius-card);
    --msid-mobile-touch: 46px;
    --msid-mobile-header: 66px;
  }

  html{ scroll-padding-top: calc(var(--msid-mobile-header) + 14px); }
  body{ overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body.msid-mobile-menu-open{ overflow: hidden; touch-action: none; }

  .container,
#site-header > .container{
    width: 100%;
    max-width: none;
    padding-inline: var(--msid-mobile-gutter);
  }

  /* Header / navigation */
  #site-header.msid-global-header{
    position: sticky;
    top: 0;
    z-index: 10000;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--msid-surface-soft);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  body.admin-bar #site-header.msid-global-header{ top: 46px; }
  #site-header .msid-learning-header-inner,
#site-header .header-inner{
    min-height: var(--msid-mobile-header);
    height: var(--msid-mobile-header);
    gap: 10px;
  }
  #site-header .msid-brand-logo{ height: 38px; width: auto; }
  #site-header .main-nav,
#site-header .msid-header-search,
#site-header .msid-learning-actions > .msid-header-link,
#site-header .msid-learning-actions > .msid-header-outline,
#site-header .msid-learning-actions > .msid-header-primary{ display: none; }
  #site-header .msid-header-left-tools,
#site-header .msid-learning-actions{ margin-inline-start: auto; }
  #site-header .menu-toggle{
    display: inline-flex;
    width: var(--msid-mobile-touch);
    height: var(--msid-mobile-touch);
    min-width: var(--msid-mobile-touch);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    border: 1px solid var(--msid-line-soft);
    border-radius:var(--msid-radius-control);
    background: var(--msid-white);
    box-shadow: none;
  }
  #site-header .menu-toggle span{ width: 20px; height: 2px; margin: 0; background: var(--msid-ink); transform-origin: center; }
  #site-header .menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  #site-header .menu-toggle.is-open span:nth-child(2){ opacity: 0; transform: scaleX(.2); }
  #site-header .menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  body.msid-mobile-menu-open::before{
    content: "";
    position: fixed;
    inset: var(--msid-mobile-header) 0 0;
    z-index: 9997;
    background: rgba(17,17,17,.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.admin-bar.msid-mobile-menu-open::before{ top: calc(var(--msid-mobile-header) + 46px); }
  #site-header .mobile-nav{
    display: block;
    position: fixed;
    z-index: 9998;
    top: var(--msid-mobile-header);
    right: 0;
    left: 0;
    max-height: calc(100dvh - var(--msid-mobile-header));
    overflow: auto;
    padding: 12px var(--msid-mobile-gutter) max(22px, env(safe-area-inset-bottom));
    background: var(--msid-white);
    border-top: 1px solid var(--msid-line-soft);
    border-radius:0 0 var(--msid-radius-panel) var(--msid-radius-panel);
    box-shadow:var(--msid-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
  }
  body.admin-bar #site-header .mobile-nav{ top: calc(var(--msid-mobile-header) + 46px); }
  #site-header .mobile-nav.open{ opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  #site-header .mobile-nav ul{ display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  #site-header .mobile-nav li a{
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 10px 12px;
    border-radius:var(--msid-radius-control);
    color: var(--msid-text);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
  }
  #site-header .mobile-nav li a:active,
#site-header .mobile-nav li a:hover{ background: var(--msid-surface-soft); color: var(--msid-ink); }
  #site-header .mobile-nav .mobile-primary-link{ background: var(--msid-aubergine); color: #fff; justify-content: center; margin-top: 4px; }
  #site-header .mobile-divider{ height: 1px; margin: 8px 4px; background: var(--msid-surface-soft); }

  /* Global typography and touch targets */
  h1{ line-height: 1.22; }
  h2,
h3{ line-height: 1.3; }
  p{ line-height: 1.8; }
  input,
select,
textarea,
button{ font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]),
select,
button,
.btn,
.button{ min-height: var(--msid-mobile-touch); }
  textarea{ min-height: 120px; }
  button,
.btn,
.button,
a{ -webkit-tap-highlight-color: transparent; }

  /* Sections / hero system */
  .section,
.mc-section{ padding-block: 40px; }
  .section-head,
.course-section-head{ margin-bottom: 18px; }
  .section-head h2,
.course-section-head h2{ font-size: clamp(1.35rem, 6vw, 1.7rem); }

  body.archive .tk-dir-hero,
body.tax-tk_inst_type .tk-tax-hero,
body .sp-hero{ padding: 20px 0 8px; }
  body.archive .tk-dir-hero > .container,
body.tax-tk_inst_type .tk-tax-hero > .container,
body .sp-hero > .container{
    border-radius:var(--msid-radius-card);
    padding: 20px 18px;
    min-height: 0;
  }
  .tdh-inner{ gap: 14px; }
  .tdh-title,
.sp-hero-title{ font-size: clamp(1.8rem, 8vw, 2.25rem); }
  .tdh-sub,
.sp-hero-desc{ font-size:var(--msid-type-body-sm); line-height: 1.75; }
  .tdh-breadcrumb{ overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .tdh-breadcrumb::-webkit-scrollbar{ display: none; }
  .tdh-search,
.sp-hero form{ width: 100%; min-width: 0; }
  .mc-btn{ width: 100%; }

  /* Filters become thumb-friendly horizontal rails / stacked forms */
  .front-filters-bar,
.mc-filter-bar,
.sp-filters-form,
.filters-wrap{ gap: 10px; }
  .front-filters-bar,
.tk-filters-bar,
.sp-filters-bar{ scrollbar-width: none; }
  .front-filters-bar::-webkit-scrollbar,
.tk-filters-bar::-webkit-scrollbar,
.sp-filters-bar::-webkit-scrollbar{ display: none; }
  .filter-chip,
.front-cat-pill,
.tk-filter-pill,
.tfb-btn{ min-height: 42px; white-space: nowrap; }
  .sp-filters-form,
.msid-library-filter{ grid-template-columns: 1fr; }
  .msid-library-filter input{ grid-column: auto; }
  .front-filter-select,
.filter-select{ width: 100%; }

  /* Card system: one readable card per row, full-width actions */
  .cards-grid,
.archive-grid,
.mc-course-grid,
.mc-catalog-grid,
.mc-trainer-grid,
.academy-trainer-grid,
.profile-course-grid,
.profile-trainer-grid,
.profile-service-grid,
.course-related-grid,
.course-provider-cards,
.msid-book-grid,
.msid-journal-grid,
.service-frames-grid,
.msid-opportunity-grid{ grid-template-columns: 1fr; gap: 14px; }

  .course-card,
.trainer-card,
.inst-card-modern,
.institution-card,
.msid-book-card,
.school-card,
.sp-trainer-card,
.sp-inst-card,
.sp-lang-card,
.sp-kinder-card,
.msid-journal-card{
    border-radius: var(--msid-mobile-radius);
    overflow: hidden;
    box-shadow:var(--msid-shadow-md);
  }
  .course-card:hover,
.trainer-card:hover,
.inst-card-modern:hover,
.msid-book-card:hover{ transform: none; }
  .course-thumb,
.trainer-card-media{ aspect-ratio: 16 / 9; height: auto; }
  .trainer-card-body,
.msid-book-card-body{ padding: 14px; }
  .inst-card-actions,
.course-editorial-actions,
.course-editorial-secondary-actions,
.msid-book-card-foot,
.profile-actions,
.msid-card-actions-extra{ gap: 8px; }
  .inst-card-actions > *,
.course-editorial-actions > *,
.course-editorial-secondary-actions > *,
.profile-actions > *{ flex: 1 1 0; }

  /* Single course / trainer / institution */
  .course-decision-hero-inner,
.course-body,
.profile-hero,
.profile-hero-frame,
.profile-content,
.profile-facts-grid,
.course-facts-grid,
.course-outcomes-grid,
.course-practical-grid,
.course-fit-grid{ grid-template-columns: 1fr; }
  .course-decision-hero,
.profile-hero{ border-radius:var(--msid-radius-card); }
  .course-hero-copy h1,
.profile-hero h1{ font-size: clamp(1.85rem, 8vw, 2.4rem); }

  .course-provider-card,
.sidebar-card,
.sidebar-cta-card,
.profile-side-card{ border-radius:var(--msid-radius-card); }
  .msid-course-contact-actions,
.course-direct-contact{ grid-template-columns: 1fr; }
  .msid-slider-slide{ flex-basis: 88%; border-radius:var(--msid-radius-card); }

  /* Library / book detail */
  .msid-library-page .container{ width: 100%; }
  .msid-book-showcase{ grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
  .msid-book-showcase-media{ position: static; }
  .msid-book-cover-shell{ width: min(76vw, 310px); margin-inline: auto; }
  .msid-book-showcase-copy h1{ font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .msid-book-content-grid,
.msid-checkout-layout,
.msid-checkout-grid{ grid-template-columns: 1fr; gap: 14px; }
  .msid-book-buy-row{ grid-template-columns: 1fr; }
  .msid-cart-row{ grid-template-columns: 56px 1fr auto; gap: 10px; }
  .msid-cart-actions{ display: grid; grid-template-columns: 1fr; }
  .msid-cart-actions a,
.msid-book-add{ width: 100%; }

  /* Article */
  .msid-article-hero-inner,
.msid-article-layout{ grid-template-columns: 1fr; }
  .msid-article-sidebar{ position: static; }
  .msid-article-hero{ border-radius:var(--msid-radius-card); }

  /* Footer */
  #site-footer.msid-global-footer,
.msid-learning-footer{ padding-top: 38px; }
  #site-footer .footer-top,
#site-footer .footer-grid,
.msid-learning-footer-grid{ grid-template-columns: 1fr; gap: 26px; }
  #site-footer .footer-col h5{ margin-bottom: 10px; }
  #site-footer .footer-col ul{ gap: 4px; }
  #site-footer .footer-col a{ display: inline-flex; align-items: center; min-height: 38px; }
  #site-footer .footer-bottom,
.msid-learning-footer-bottom{ min-height: 0; padding-block: 20px; flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Pagination and feedback */
  .pagination{ gap: 6px; }
  .page-item a,
.page-item span{ width: 42px; height: 42px; }

  /* Motion: keep mobile interaction calm and battery-friendly. */
  @media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after{ scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
  }
}

@media (max-width: 390px) {
  :root{ --msid-mobile-gutter: 14px; }
  .dash-stats-grid,
.dash-actions-grid{ grid-template-columns: 1fr; }
  .msid-cart-row{ grid-template-columns: 50px 1fr; }
  .msid-cart-row > strong,
.msid-cart-row > label{ grid-column: 2; }
}

@media (max-width: 767px) {
  :root{
    --msid-mobile-gutter: 15px;
    --msid-mobile-radius: 18px;
    --msid-mobile-touch: 48px;
    --msid-mobile-header: 62px;
  }

  body{ background: var(--msid-surface-soft); }
  main,
.site-main,
.msid-course-detail,
.msid-library-page{ background: var(--msid-white); }

  #site-header.msid-global-header{
    border-bottom-color: rgba(17,17,17,.07);
    box-shadow: 0 4px 18px rgba(17,17,17,.055);
  }
  #site-header .msid-brand-logo{ height: 34px; }
  #site-header .menu-toggle{
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
    background: var(--msid-surface-soft);
  }
  #site-header .mobile-nav{
    padding-top: 10px;
    border-radius: 0 0 22px 22px;
  }
  #site-header .mobile-nav li a{ min-height: 52px; padding-inline: 14px; border-radius: 14px; }

  .section,
.mc-section{ padding-block: 32px; }
  .section-head,
.course-section-head{ align-items: flex-end; gap: 10px; }

  /* Horizontal discovery rails behave like native app carousels. */
  .front-filters-bar,
.tk-filters-bar,
.sp-filters-bar,
.mc-category-rail,
.front-categories,
.msid-category-strip{
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
  }
  .front-filters-bar > *,
.tk-filters-bar > *,
.sp-filters-bar > *,
.mc-category-rail > *,
.front-categories > *,
.msid-category-strip > *{ scroll-snap-align: start; }

  .filter-chip,
.front-cat-pill,
.tk-filter-pill,
.tfb-btn{
    min-height: 44px;
    border-radius: 14px;
  }

  /* App-like cards: lighter chrome, clearer content and press feedback. */
  .course-card,
.trainer-card,
.inst-card-modern,
.institution-card,
.msid-book-card,
.school-card,
.sp-trainer-card,
.sp-inst-card,
.sp-lang-card,
.sp-kinder-card,
.msid-journal-card{
    border: 1px solid rgba(17,17,17,.08);
    border-radius: 18px;
    box-shadow: 0 7px 24px rgba(17,17,17,.055);
  }
  .course-card:active,
.trainer-card:active,
.inst-card-modern:active,
.msid-book-card:active{ transform: scale(.992); }
  .course-thumb,
.trainer-card-media{ aspect-ratio: 15 / 9; }
  .trainer-card-body,
.msid-book-card-body{ padding: 15px; }

  /* Single listing: media first, swipeable facts and compact content cards. */
  body.single-tk_course .course-decision-hero{ padding-top: 10px; }
  body.single-tk_course .course-decision-hero-inner{
    padding: 15px;
    border-radius: 20px;
  }
  body.single-tk_course .course-hero-media{
    order: -1;
    min-height: 176px;
    max-height: 205px;
    border-radius: 16px;
  }
  body.single-tk_course .course-hero-media img,
body.single-tk_course .course-media-placeholder{
    min-height: 176px;
    max-height: 205px;
    border-radius: 16px;
  }
  body.single-tk_course .course-breadcrumb{ margin-bottom: 7px; font-size: .74rem; }
  body.single-tk_course .course-hero-copy h1{ font-size: clamp(1.7rem, 8vw, 2.05rem); }
  body.single-tk_course .course-hero-kickers,
body.single-tk_course .course-hero-meta{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  body.single-tk_course .course-hero-kickers::-webkit-scrollbar,
body.single-tk_course .course-hero-meta::-webkit-scrollbar{ display: none; }
  body.single-tk_course .course-hero-kickers span,
body.single-tk_course .course-hero-meta span{ flex: 0 0 auto; }

  .course-facts-band{ padding-bottom: 12px; }
  .course-facts-grid{
    display: flex;
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
    padding: 0 1px 4px;
  }
  .course-facts-grid::-webkit-scrollbar{ display: none; }
  .course-fact{
    flex: 0 0 min(46vw, 178px);
    scroll-snap-align: start;
    border: 1px solid var(--msid-line-soft);
    border-radius: 14px;
    background: var(--msid-white);
    padding: 13px 14px;
  }
  .course-fact:nth-child(odd){ border-left: 1px solid var(--msid-line-soft); }
  body.single-tk_course .course-compact-section{ padding: 20px 16px; border-radius: 18px; }
  body.single-tk_course .course-enroll-card{ padding: 18px 16px; border-radius: 18px; }
  body.single-tk_course .course-enroll-price{ font-size: 1.7rem; }
  body.single-tk_course .course-enroll-primary,
body.single-tk_course .course-enroll-secondary{ min-height: 52px; border-radius: 14px; }

  /* Dialogs open as bottom sheets on phones. */
  .msid-course-modal{ align-items: flex-end; padding: 0; }
  .msid-course-modal-panel{
    width: 100%;
    max-height: 92dvh;
    padding: 24px 16px max(18px, env(safe-area-inset-bottom));
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
  }
  .msid-course-modal-panel::before{
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: -10px auto 16px;
    border-radius: 999px;
    background: var(--msid-line-strong);
  }

  /* Inputs and actions feel native and remain thumb-friendly. */
  input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
    border-radius: 14px;
  }
  .btn,
.button,
button{ border-radius: 14px; }

  /* Mobile footer is intentionally compact, like an app's secondary surface. */
  #site-footer.msid-global-footer,
.msid-learning-footer{ padding-top: 30px; }
  #site-footer .footer-top,
#site-footer .footer-grid,
.msid-learning-footer-grid{ gap: 20px; }
}

@media (max-width: 390px) {
  :root{ --msid-mobile-gutter: 13px; }
  .course-fact{ flex-basis: 48vw; }
}

@media (min-width:768px) and (max-width:1024px) {
  .site-container,
.msid-container,
.archive-shell,
.course-page-shell{padding-inline:24px}
  .cards-grid,
.course-grid,
.trainers-grid,
.institutions-grid,
.msid-books-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .hero-inner,
.course-decision-hero-inner{gap:24px}
  .course-detail-grid{grid-template-columns:minmax(0,1fr) minmax(260px,34%);gap:22px}
  .tfb-wrap,
.filter-bar{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
  .tfb-btn{white-space:nowrap}
  .site-header .header-inner{padding-inline:20px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}