/* Cheritan Site System v5.6 — responsive alignment and mobile card integrity.
   Loaded last. Keeps the approved design/images while fixing small-screen
   alignment, stretched number badges, grid overflow and safe content spacing. */

/* Global layout safety for every Cheritan-designed static page. */
:is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page){
  width:100%!important;
  max-width:100%!important;
  overflow-x:clip!important;
}
:is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page) :is(main,section,article,div,figure,nav,header,footer){
  min-width:0;
}
:is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page) img{
  max-width:100%!important;
}
:is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page) :is(h1,h2,h3,h4,p,li,a,strong,span){
  overflow-wrap:break-word;
}

/* All Courses: the 01/02/03/04 benefit badge was being stretched to card width
   by a late/global span rule on mobile. Lock it back to a true circle. */
.cheritan-designed-page .cht-courses-page .cc-benefit-grid .cc-benefit-card > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  flex:0 0 42px!important;
  padding:0!important;
  margin-left:0!important;
  margin-right:0!important;
  border-radius:999px!important;
  line-height:42px!important;
  text-align:center!important;
  white-space:nowrap!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:850!important;
  text-align:center!important;
}
.cht-courses-page .cc-benefit-card{
  width:100%!important;
  max-width:100%!important;
}
.cht-courses-page .cc-benefit-grid,
.cht-courses-page .cc-course-card,
.cht-courses-page .cc-trainer-grid,
.cht-courses-page .cc-who-grid{
  width:100%!important;
  max-width:100%!important;
}

/* Tablet: keep a comfortable safe zone beside the fixed social rail without
   double-padding the root/page wrappers. */
@media (min-width:651px) and (max-width:980px){
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  main > section > .cht-container{
    width:auto!important;
    max-width:none!important;
    margin-left:48px!important;
    margin-right:24px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Phone alignment: one consistent content edge on every designed page.
   40px left protects content from the 26–30px social rail; 14px right keeps
   cards/text balanced and removes the previous compounded 94% + padding rules. */
@media (max-width:650px){
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page){
    padding-left:0!important;
    padding-right:0!important;
  }

  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  main > section > .cht-container{
    width:auto!important;
    max-width:none!important;
    margin-left:40px!important;
    margin-right:14px!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Header itself should use the full viewport and must not inherit the
     social-rail safe-zone used for page content. */
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  :is(.cr-header,.cht-header) :is(.cr-head,.cht-container){
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }

  /* Footer text stays aligned and does not sit under the social rail. */
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  :is(.cr-footer,.cht-footer) :is(.cr-foot-grid,.cht-container),
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  .cht-footer-bottom .cht-container{
    width:auto!important;
    max-width:none!important;
    margin-left:40px!important;
    margin-right:14px!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* All Courses mobile rhythm. */
  .cht-courses-page .cc-section{padding:48px 0!important;}
  .cht-courses-page .cc-section-head{margin:0 auto 28px!important;}
  .cht-courses-page .cc-section-head h2,
  .cht-courses-page .cc-trainer-copy h2,
  .cht-courses-page .cc-who h2,
  .cht-courses-page .cc-cta h2{
    font-size:clamp(27px,7.5vw,32px)!important;
    line-height:1.16!important;
    letter-spacing:-.45px!important;
  }
  .cht-courses-page .cc-section-head > p:last-child{font-size:14px!important;line-height:1.65!important;}
  .cht-courses-page .cc-benefit-grid{grid-template-columns:1fr!important;gap:14px!important;}
  .cht-courses-page .cc-benefit-card{
    min-height:0!important;
    padding:22px 20px!important;
    border-radius:16px!important;
  }
  .cheritan-designed-page .cht-courses-page .cc-benefit-grid .cc-benefit-card > span{margin-bottom:18px!important;}
  .cht-courses-page .cc-benefit-card h3{font-size:19px!important;line-height:1.25!important;}
  .cht-courses-page .cc-benefit-card p{font-size:14px!important;line-height:1.65!important;}
  .cht-courses-page .cc-course-card{border-radius:16px!important;}
  .cht-courses-page .cc-course-image img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
  }
  .cht-courses-page .cc-course-copy{padding:26px 20px!important;}
  .cht-courses-page .cc-course-copy h2{font-size:25px!important;line-height:1.18!important;padding-right:28px!important;}
  .cht-courses-page .cc-trainer-photo{width:100%!important;max-width:420px!important;margin-inline:auto!important;}
  .cht-courses-page .cc-trainer-photo img{width:100%!important;height:auto!important;aspect-ratio:4/5!important;object-fit:cover!important;}

  /* Keep action bars readable at 320–430px widths. */
  :is(.cht-mobile-bar,.cr-mobile-bar) a{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Prevent oversized text from colliding with the viewport edge on all pages. */
  .cht-about-page .ca-title h1,
  .cht-makeup-page .cm-hero h1,
  .cht-beauty-page .cb-hero h1,
  .cht-studio-page .cs-hero h1,
  .cht-contact-page h1{
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

/* Extra-small phones. */
@media(max-width:360px){
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  main > section > .cht-container,
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  :is(.cr-footer,.cht-footer) :is(.cr-foot-grid,.cht-container),
  :is(.cht-site.cht-classic,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-privacy-page)
  .cht-footer-bottom .cht-container{
    margin-left:36px!important;
    margin-right:10px!important;
  }
  .cht-courses-page .cc-benefit-card{padding:20px 18px!important;}
  .cheritan-designed-page .cht-courses-page .cc-benefit-grid .cc-benefit-card > span{
    width:40px!important;min-width:40px!important;max-width:40px!important;
    height:40px!important;min-height:40px!important;max-height:40px!important;
    flex-basis:40px!important;line-height:40px!important;
  }
}