/* ==========================================================
   CHERITAN SITE SYSTEM v3.9 — FINAL VISUAL GUARD
   Loaded last. Keeps text visible, images filled, and contact
   hero compact even when older page CSS remains cached/active.
   ========================================================== */

/* 1) Designed page content must never disappear because an old reveal
      animation stylesheet or delayed script left opacity at zero. */
:where(.cht-site,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-blog-page,.cht-privacy-page)
[class*="-reveal"]{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* Home course heading/readability guard. */
.cht-site.cht-classic #courses .cht-eyebrow{
  color:#303640!important;
  opacity:1!important;
  visibility:visible!important;
}
.cht-site.cht-classic #courses .cht-heading{
  color:#303640!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
}
.cht-site.cht-classic #courses .cht-intro{
  color:#606570!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Shared footer: icons only on every breakpoint. */
.cr-footer .cr-footer-social{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
.cr-footer .cr-footer-social>a{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  margin:0!important;
  padding:0!important;
  border-radius:9px!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
}
.cr-footer .cr-footer-social>a::before{
  content:""!important;
  display:block!important;
  width:19px!important;
  height:19px!important;
  background:var(--cr-social-icon) center/contain no-repeat!important;
  text-indent:0!important;
}

/* ==========================================================
   CONTACT PAGE — remove the large dark empty area.
   Desktop panel is shorter: image + 2x2 contact details.
   ========================================================== */
@media (min-width:981px){
  .cht-contact-page .cc-hero{
    padding:38px 0 42px!important;
  }
  .cht-contact-page .cc-hero-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr)!important;
    gap:44px!important;
    align-items:start!important;
  }
  .cht-contact-page .cc-hero-copy{
    align-self:start!important;
    padding-top:24px!important;
  }
  .cht-contact-page .cc-contact-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:28px!important;
    row-gap:0!important;
    padding:18px 22px 20px!important;
    align-self:start!important;
  }
  .cht-contact-page .cc-contact-visual{
    grid-column:1/-1!important;
    width:100%!important;
    aspect-ratio:16/7.4!important;
    max-height:230px!important;
    margin:0 0 17px!important;
    overflow:hidden!important;
    border-radius:10px!important;
    background:#eceef1!important;
  }
  .cht-contact-page .cc-contact-visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center 40%!important;
    background:transparent!important;
  }
  .cht-contact-page .cc-panel-eyebrow{
    grid-column:1/-1!important;
    margin:0 0 4px!important;
  }
  .cht-contact-page .cc-panel-item{
    min-width:0!important;
    padding:10px 0!important;
  }
  .cht-contact-page .cc-panel-item a,
  .cht-contact-page .cc-panel-item p{
    overflow-wrap:anywhere!important;
  }
  .cht-contact-page .cc-panel-item p{
    font-size:11px!important;
    line-height:1.55!important;
  }
}

/* Tablet contact layout stays clean and the image fills the card. */
@media (min-width:651px) and (max-width:980px){
  .cht-contact-page .cc-contact-panel{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    column-gap:24px!important;
    padding:22px!important;
  }
  .cht-contact-page .cc-contact-visual,
  .cht-contact-page .cc-panel-eyebrow{
    grid-column:1/-1!important;
  }
  .cht-contact-page .cc-contact-visual{
    aspect-ratio:16/8!important;
    max-height:300px!important;
    margin:0 0 18px!important;
    overflow:hidden!important;
  }
  .cht-contact-page .cc-contact-visual img{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center 40%!important;
    background:transparent!important;
  }
}

/* Phone: one-column card, filled image, no side overflow. */
@media (max-width:650px){
  .cht-contact-page .cc-contact-panel{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:16px!important;
  }
  .cht-contact-page .cc-contact-visual{
    width:100%!important;
    aspect-ratio:4/3!important;
    max-height:none!important;
    margin:0 0 16px!important;
    overflow:hidden!important;
    border-radius:9px!important;
  }
  .cht-contact-page .cc-contact-visual img{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center 38%!important;
    background:transparent!important;
  }
}

/* ==========================================================
   IMAGE-FILL GUARDS — only for artwork frames that are designed
   as cropped cards. Portrait trainer images are intentionally
   excluded so full portraits can remain uncropped where required.
   ========================================================== */
:where(.cht-makeup-page,.cht-beauty-page,.cht-studio-page)
:is(.cm-hero-image,.cb-hero-image,.cs-hero-image) img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  max-height:none!important;
}
.cht-makeup-page .cm-hero-image img{object-position:center 26%!important}
.cht-beauty-page .cb-hero-image img{object-position:center 30%!important}
.cht-studio-page .cs-hero-image img{object-position:center 22%!important}

/* Home gallery cards must always fill their complete tile. */
.cht-site.cht-classic .cht-gallery.cht-gallery-final .cht-gallery-item,
.cht-site.cht-classic .cht-gallery.cht-gallery-final .cht-gallery-link{
  overflow:hidden!important;
}
.cht-site.cht-classic .cht-gallery.cht-gallery-final img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  background:transparent!important;
}

/* Prevent accidental horizontal clipping on all designed pages. */
:where(.cht-site,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-blog-page,.cht-privacy-page){
  max-width:100%!important;
  overflow-x:clip!important;
}

/* Mobile shared footer and action bar spacing. */
@media(max-width:650px){
  .cr-footer .cr-footer-social>a{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:8px!important;
  }
  .cr-footer .cr-footer-social>a::before{
    width:18px!important;
    height:18px!important;
  }
}