/* =========================================================
   TRAINING PAGE MOBILE UI v1
   Keep the 17px readability baseline while reducing visual
   density and replacing wide tables with readable cards.
   ========================================================= */

@media(max-width:560px){
  .page-hero{
    padding-top:96px!important;
    padding-bottom:38px!important;
  }
  .page-hero h1{
    margin-bottom:18px;
    font-size:clamp(28px,8.5vw,34px)!important;
    line-height:1.4!important;
  }
  .page-hero p.lead{margin-bottom:22px!important;}
  .page-hero .btns{gap:10px!important;}

  .page-hero .badges{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:22px;
  }
  .page-hero .badges span{
    display:flex;
    align-items:center;
    min-width:0;
    border-radius:10px;
    padding:10px 11px;
    font-size:13.5px!important;
    line-height:1.55;
  }

  .toc{
    flex-wrap:nowrap;
    gap:8px;
    margin:18px -18px 0;
    padding:2px 18px 9px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .toc::-webkit-scrollbar{display:none;}
  .toc a{
    flex:0 0 auto;
    padding:8px 13px;
    font-size:14px!important;
    line-height:1.45;
  }

  main section.fade{padding-top:54px;padding-bottom:54px;}
  #program,#curriculum,#level,#who,#format,#pricing,#flow,#faq{scroll-margin-top:78px;}

  /* Four-stage overview: compact, scannable steps. */
  .program-grid{gap:10px!important;margin-top:26px!important;}
  .program-card{
    position:relative;
    min-height:112px;
    padding:18px 18px 18px 78px!important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .program-card .phase{
    position:absolute;
    top:18px;
    left:17px;
    margin:0;
    padding:4px 9px;
    font-size:13px!important;
  }
  .program-card .n{font-size:13px!important;line-height:1.4;}
  .program-card h3{margin:4px 0 5px;font-size:18px!important;line-height:1.5;}
  .program-card p{font-size:16px!important;line-height:1.65!important;}

  /* Curriculum: transform the desktop table into complete course cards. */
  #curriculum .tbl-wrap{overflow:visible;margin-top:26px;}
  .cur-table{
    display:block;
    margin-top:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .cur-table thead{display:none;}
  .cur-table tbody{display:grid;gap:12px;}
  .cur-table tr{
    display:block;
    width:100%;
    padding:18px;
    border:1px solid var(--blue-100);
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow-sm);
  }
  .cur-table td{
    display:block;
    width:100%!important;
    padding:0!important;
    border:0!important;
    font-size:16px!important;
    line-height:1.8!important;
    white-space:normal!important;
  }
  .cur-table td.c{font-size:17px!important;line-height:1.65!important;}
  .cur-table td.c small{font-size:13px!important;margin-bottom:4px;}
  .cur-table td:nth-child(2){
    margin-top:14px;
    padding-top:14px!important;
    border-top:1px solid var(--blue-100)!important;
  }
  .cur-table td:nth-child(2)::before,
  .cur-table td.g::before{
    display:block;
    margin-bottom:5px;
    color:var(--gray-600);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
  }
  .cur-table td:nth-child(2)::before{content:"研修内容";}
  .cur-table td.g{
    margin-top:13px;
    padding:12px 14px!important;
    border-radius:8px;
    background:var(--blue-50);
  }
  .cur-table td.g::before{content:"到達目標";color:var(--blue-700);}
  #curriculum .container>p{
    margin-top:18px!important;
    font-size:16px!important;
    line-height:1.85!important;
  }

  /* Secondary card groups: keep hierarchy without excess empty space. */
  .level-grid,.who-grid,.format-grid{gap:10px!important;margin-top:24px!important;}
  .level-card,.who-card,.format-card{padding:19px 18px!important;}
  .level-card h3,.who-card h3,.format-card h3{font-size:18px!important;line-height:1.55;}

  /* Pricing is already card-based on mobile; tighten its rhythm. */
  .price-table{margin-top:24px!important;}
  .price-table tr{margin-bottom:10px!important;padding:15px 17px!important;}
  .subsidy-box{margin-top:20px!important;padding:20px 18px!important;}
  .subsidy-box h3{font-size:18px!important;line-height:1.55;}
  .subsidy-note{margin-top:18px!important;}

  /* Onboarding flow: vertical timeline instead of four tall cards. */
  .flow-grid{gap:0!important;margin-top:24px!important;}
  .flow-card{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    column-gap:12px;
    padding:18px 0!important;
    border:0!important;
    border-bottom:1px solid var(--blue-100)!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .flow-card:first-child{padding-top:4px!important;}
  .flow-card:last-child{border-bottom:0!important;}
  .flow-card .num{
    grid-column:1;
    grid-row:1 / span 2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--blue-100);
    font-family:'Montserrat',sans-serif;
    font-size:15px!important;
    font-weight:700;
  }
  .flow-card h3{grid-column:2;margin:1px 0 5px;font-size:18px!important;}
  .flow-card p{grid-column:2;font-size:16px!important;line-height:1.8!important;}
  .lead-time{margin-top:18px!important;padding:17px 18px!important;}

  #faq .container>div{margin-top:24px!important;}
  .faq-details{margin-bottom:10px!important;padding:16px 17px!important;}
}

@media(max-width:340px){
  .page-hero .badges span{padding:9px;font-size:13px!important;}
  .program-card{padding-left:72px!important;}
  .program-card .phase{left:14px;}
}