/* 6.4.2 — mobile-first rebuild for home/course discovery inspired by polished global learning apps.
   Goals: calmer hero, compact 2-up course cards, and practical touch-friendly filters. */
@media (max-width:760px){
  /* HERO — simplify hierarchy and turn the featured ad into a compact recommendation card. */

  /* POPULAR CHIPS + HOME FILTER BAR — app-like rails and tidy grid. */
  body.home .fp-priority-strip{
    display:grid;
    gap:10px;
    margin-bottom:14px;
  }
  body.home .fp-priority-title{
    font-size:.86rem;
    font-weight:900;
    color:var(--msid-text-secondary);
  }
  body.home .fp-priority-pills{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    padding:0 2px 2px;
    margin:0;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  body.home .fp-priority-pills>*{
    flex:0 0 auto;
    scroll-snap-align:start;
  }
  body.home .fp-priority-pills::-webkit-scrollbar{display:none;}
  body.home .fp-fpill,
body.home .fp-priority-more{
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    font-size:.84rem;
    white-space:nowrap;
  }
  body.home .mc-filter-bar{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
  }
  body.home .mc-filter-bar>.mc-filter-search,
body.home .mc-filter-bar>.mc-more-filters,
body.home .mc-filter-bar>.fp-field-smart-filter{
    grid-column:1 / -1;
  }
  body.home .mc-filter-bar .mc-filter-search,
body.home .mc-filter-bar .fp-fsel,
body.home .mc-filter-bar .fp-field-smart-btn,
body.home .mc-filter-bar .mc-more-filters summary{
    min-height:46px;
    border-radius:16px;
    font-size:.88rem;
  }
  body.home .mc-filter-bar .mc-filter-search{
    padding-inline:12px;
    gap:8px;
  }
  body.home .mc-filter-bar .mc-more-filters>div{
    margin-top:10px;
    padding:10px;
    border-radius:16px;
  }
  body.home .mc-filter-meta{
    gap:8px;
    margin-bottom:14px;
  }
  body.home .mc-filter-meta .fp-fcount{
    width:100%;
    font-size:.84rem;
  }
  body.home .fp-atags{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    max-width:100%;
    padding-bottom:2px;
  }
  body.home .fp-atags::-webkit-scrollbar{display:none;}
  body.home .fp-atag{flex:0 0 auto;}

  /* COURSE GRIDS — two cards per row instead of oversized one-card stacks. */
  body.home .mc-catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  /* HOME COURSE CARD COMPACT */
  body.home .msid-home-course-card{
    border-radius:18px;
  }
  body.home .msid-home-course-card .sp-tc-media{
    aspect-ratio:4 / 3;
  }
  body.home .msid-home-course-card .sp-tc-ad-label{
    top:10px;
    right:10px;
    min-height:24px;
    padding:4px 8px;
    font-size:.62rem;
  }
  body.home .msid-home-course-card .sp-tc-card-body{
    gap:8px;
    padding:12px;
  }
  body.home .msid-home-course-card .sp-tc-card-tags{
    gap:5px;
    min-height:0;
  }
  body.home .msid-home-course-card .sp-tc-card-tags>span{
    min-height:22px;
    padding:3px 7px;
    font-size:.65rem;
  }
  body.home .msid-home-course-card .sp-tc-card-tags>span:nth-child(n+3){display:none;}
  body.home .msid-home-course-card .sp-tc-card-title{
    min-height:4.2em;
    font-size:.92rem;
    line-height:1.42;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  body.home .msid-home-course-card .sp-tc-card-role{
    margin:0;
    font-size:.74rem;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    overflow:hidden;
  }
  body.home .msid-home-course-card .sp-tc-card-facts{display:none;}
  body.home .msid-home-course-card .sp-tc-card-footer{
    margin-top:auto;
    padding-top:0;
    border-top:0;
  }
  body.home .msid-home-course-card .sp-tc-card-price{
    margin-bottom:8px;
    font-size:.98rem;
  }
  body.home .msid-home-course-card .sp-tc-card-actions{
    grid-template-columns:1fr;
    gap:6px;
  }
  body.home .msid-home-course-card .sp-btn-view{
    min-height:36px;
    padding:8px 10px;
    font-size:.78rem;
  }

  /* MARKETPLACE / ARCHIVE COURSE CARDS COMPACT */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* ARCHIVE MOBILE FILTERS — clear, touch-friendly, and more practical than long horizontal bars. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

@media (max-width:420px){
  body.home .mc-filter-bar{
    grid-template-columns:1fr;
  }
  body.home .mc-catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
}


/* 6.4.3 — emergency cleanup for phone layouts: hero must stack cleanly and cards become leaner. */
@media (max-width:760px){
  /* Force the homepage hero to stack vertically; prevent any side-by-side squeeze. */

  /* Popular chips + search area should not feel oversized. */
  body.home .fp-priority-strip{margin-bottom:12px;}
  body.home .fp-priority-title{font-size:.8rem;}
  body.home .fp-fpill,
body.home .fp-priority-more{
    min-height:36px;
    padding:0 12px;
    font-size:.78rem;
  }
  body.home .mc-filter-bar{gap:8px;}
  body.home .mc-filter-bar .mc-filter-search,
body.home .mc-filter-bar .fp-fsel,
body.home .mc-filter-bar .fp-field-smart-btn,
body.home .mc-filter-bar .mc-more-filters summary{
    min-height:42px;
    border-radius:14px;
    font-size:.82rem;
  }

  /* Smaller cards on the homepage. */
  body.home .msid-home-course-card{
    border-radius:16px;
  }
  body.home .msid-home-course-card .sp-tc-media{aspect-ratio:1 / 1;}
  body.home .msid-home-course-card .sp-tc-card-body{
    gap:6px;
    padding:10px;
  }
  body.home .msid-home-course-card .sp-tc-card-tags>span:nth-child(n+2){display:none;}
  body.home .msid-home-course-card .sp-tc-card-title{
    min-height:3em;
    font-size:.86rem;
    line-height:1.5;
    -webkit-line-clamp:2;
  }
  body.home .msid-home-course-card .sp-tc-card-role{display:none;}
  body.home .msid-home-course-card .sp-tc-card-price{
    margin-bottom:6px;
    font-size:.9rem;
  }
  body.home .msid-home-course-card .sp-btn-view{
    min-height:34px;
    padding:7px 8px;
    font-size:.74rem;
    border-radius:12px;
  }

  /* Smaller cards inside the training marketplace archive. */
  
  
  
  
  
  
  
  

  /* Marketplace filter bar: more compact chips and buttons. */
  
  
}

@media (max-width:480px){

  body.home .mc-catalog-grid{
    gap:8px;
  }
  body.home .msid-home-course-card .sp-tc-card-body{padding:9px;}
  body.home .msid-home-course-card .sp-tc-card-title{font-size:.82rem;}
}

/* 6.4.4 — dedicated mobile homepage: selected-ad slider, icon fields, 2-up 50/50 cards. */
@media (max-width:760px){
  /* The desktop hero was the source of mobile crowding. Mobile gets its own visual slider. */

  /* Category discovery: exactly eight root icons, horizontally scrollable. */
  body.home .msid-mobile-field-discovery{
    display:block;
    margin:0 0 14px;
  }
  body.home .msid-mobile-field-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }
  body.home .msid-mobile-field-head strong{
    color:var(--msid-ink);
    font-size:1rem;
    font-weight:950;
  }
  body.home .msid-mobile-field-head span{
    color:var(--msid-muted);
    font-size:.72rem;
    white-space:nowrap;
  }
  body.home .msid-mobile-field-carousel{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:1px 1px 7px;
    -webkit-overflow-scrolling:touch;
  }
  body.home .msid-mobile-field-carousel::-webkit-scrollbar{display:none;}
  body.home .msid-mobile-field-icon{
    flex:0 0 78px;
    display:grid;
    justify-items:center;
    align-content:start;
    gap:7px;
    min-height:90px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--msid-ink);
    box-shadow:none;
    scroll-snap-align:start;
    font-family:inherit;
  }
  body.home .msid-mobile-field-glyph{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border:1px solid var(--msid-line);
    border-radius:18px;
    background:var(--msid-surface-soft);
    color:var(--msid-ink);
    transition:border-color .18s,background .18s,color .18s;
  }
  body.home .msid-mobile-field-glyph svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  body.home .msid-mobile-field-icon>span:last-child{
    width:100%;
    color:var(--msid-text);
    font-size:.7rem;
    font-weight:800;
    line-height:1.3;
    text-align:center;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  body.home .msid-mobile-field-icon.is-active .msid-mobile-field-glyph{
    border-color:var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:var(--msid-white);
  }
  body.home .msid-mobile-subfield-panels{
    margin-top:2px;
    padding:10px;
    border:1px solid var(--msid-line-soft);
    border-radius:18px;
    background:var(--msid-surface-soft);
  }
  body.home .msid-mobile-subfield-title{
    margin-bottom:8px;
    color:var(--msid-text-secondary);
    font-size:.76rem;
    font-weight:850;
  }
  body.home .msid-mobile-subfield-list{
    display:flex;
    gap:7px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:1px;
  }
  body.home .msid-mobile-subfield-list::-webkit-scrollbar{display:none;}
  body.home .msid-mobile-subfield{
    flex:0 0 auto;
    min-height:34px;
    padding:0 11px;
    border:1px solid var(--msid-line);
    border-radius:999px;
    background:var(--msid-white);
    color:var(--msid-ink);
    font-family:inherit;
    font-size:.75rem;
    font-weight:800;
    box-shadow:none;
    white-space:nowrap;
  }
  body.home .msid-mobile-subfield.is-all,
body.home .msid-mobile-subfield.is-active{
    background:var(--msid-aubergine);
    color:var(--msid-white);
    border-color:var(--msid-aubergine);
  }

  /* The icon discovery replaces the older text-pill rail on phones. */
  body.home .fp-priority-strip{}

  /* Six course cards only, two per row. Image = half the card; content = other half. */
  body.home #front-courses-grid{
    
    
    align-items:stretch;
  }
  body.home #front-courses-grid>.msid-home-course-card{
    display:grid;
    grid-template-rows:1fr 1fr;
    height:304px;
    min-height:304px;
    overflow:hidden;
    border-radius:16px;
    box-shadow:none;
  }
  body.home .msid-home-course-card .sp-tc-media{
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
    margin:0;
    border-radius:0;
  }
  body.home .msid-home-course-card .sp-tc-ad-label{display:none;}
  body.home .msid-home-course-card .sp-tc-card-body{
    min-height:0;
    height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0;
    padding:9px 10px 10px;
    border:0;
  }
  body.home .msid-home-course-card .sp-tc-card-tags{
    min-height:18px;
    margin:0;
    gap:4px;
    overflow:hidden;
  }
  body.home .msid-home-course-card .sp-tc-card-tags>span{
    min-height:18px;
    max-width:100%;
    padding:2px 6px;
    border:0;
    background:var(--msid-surface-soft);
    font-size:.61rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.home .msid-home-course-card .sp-tc-card-title{
    flex:0 0 auto;
    min-height:3.9em;
    margin:0;
    font-size:.82rem;
    line-height:1.3;
    font-weight:900;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  body.home .msid-home-course-card .sp-tc-card-role,
body.home .msid-home-course-card .sp-tc-card-facts{display:none;}
  body.home .msid-home-course-card .sp-tc-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin:auto 0 0;
    padding:5px 0 0;
    border:0;
  }
  body.home .msid-home-course-card .sp-tc-card-price{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    color:var(--msid-ink);
    font-size:.78rem;
    font-weight:950;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.home .msid-home-course-card .sp-tc-card-actions{
    flex:0 0 auto;
    display:block;
    margin:0;
  }
  body.home .msid-home-course-card .sp-btn-wa{display:inline-flex;}
  body.home .msid-home-course-card .sp-btn-view{
    min-height:29px;
    padding:5px 8px;
    border-radius:9px;
    font-size:.67rem;
    white-space:nowrap;
  }
  .msid-card-label-desktop{display:none;}
  .msid-card-label-mobile{display:inline;}

  /* The archive cards use the same compact 50/50 mobile principle. */
  
  
  
  
  
  
  
  
}

@media (max-width:380px){
  body.home .msid-mobile-field-icon{flex-basis:72px;}
  body.home .msid-mobile-field-glyph{width:52px;height:52px;}
  body.home #front-courses-grid>.msid-home-course-card{
    height:292px;
    min-height:292px;
  }
  body.home .msid-home-course-card .sp-tc-card-body{
    padding:8px;
  }
  body.home .msid-home-course-card .sp-tc-card-title{
    font-size:.76rem;
  }
}