/* Launch fixes, October 2026. Loaded after launch-polish.css (inc/launch-fixes.php). */

/* No picture labels anywhere (AJ, 21 Oct 2026); hides any label still in a cached page. */
.mh-image-disclosure{display:none!important}
figcaption:empty{display:none}

/* EB-2: on the reviewed treatment pages the remaining illustration heroes collapsed to 0 px at 821 px and wider,
   and left an empty band on phones. Let the picture keep its own height. */
body.mahan-treatment-template .wp-site-blocks :is(.mh-phase456-reviewed,.mh-phase789-reviewed) .mh-treatment-hero__visual:has([data-mahan-service-illustration])>.mh-disclosed-media>picture{flex:0 0 auto;height:auto}

/* Consent tick box: at least 24 x 24 px for a fingertip (WCAG 2.5.8). */
body .wp-site-blocks :is(.mahan-form,.mahan-lead-form) input[type=checkbox],
.mahan-lead-form .mahan-lead-consent input[type=checkbox]{flex:0 0 24px;width:24px;height:24px;min-height:24px;max-height:24px;margin-top:0}

/* "Explore this guide" on phones and tablets: the chips wrap onto a second line instead of scrolling sideways under
   an arrow that sat on the last chip (AJ's screenshot: "Sa›"). */
@media (max-width:820px){
  .mh-treatment-quick-nav>.mp-shell>div{flex-wrap:wrap;width:100%;margin-right:0;padding-right:0;overflow:visible;gap:8px}
  .mh-treatment-quick-nav a{flex:0 1 auto;margin:0}
  .mh-treatment-quick-nav>.mp-shell::before,.mh-treatment-quick-nav>.mp-shell::after{content:none!important;display:none!important}
}

/* The picture wrapper (kept for layout) stopped the phone rules for overview pictures from applying, so wide
   pictures shrank into a thin strip that cut off faces. Same 4:3 frame as an unwrapped picture. */
@media (max-width:600px){
  .mahan-treatment-template .mh-treatment-overview__visual>.mh-disclosed-media>img,
  .mahan-treatment-template .mh-treatment-overview__visual>.mh-disclosed-media>picture>img{width:100%;height:auto;min-height:0;aspect-ratio:4/3;object-fit:cover;object-position:center 38%}
}

/* Headings never leave one word alone on the last line (fresh-eyes review, 21 Oct). !important because older rules
   set text-wrap:wrap on the treatment H1 with a stronger selector, and the swipe-panel headings are <strong>. */
:is(h1,h2,h3,h4,summary,.mh-expression-map__intro strong,figcaption strong){text-wrap:balance!important}

/* Swipe panels on phones: fade the right edge so the next card's clipped words read as "swipe for more". */
@media (max-width:820px){
  .mh-expression-map>.mp-shell{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
}

/* Treatment hero on phones: a portrait photo (the real HydraFacial photo) shrank to a narrow column floating in empty
   space. Every hero fills the width at the same height. */
@media (max-width:600px){
  .mahan-treatment-template .mh-treatment-hero__visual>picture{display:block;width:100%}
  .mahan-treatment-template .mh-treatment-hero__visual>picture>img,
  .mahan-treatment-template .mh-treatment-hero__visual>img{display:block;width:100%;height:clamp(265px,78vw,315px);min-height:0;object-fit:cover;object-position:center 30%}
}

/* About: names on the team portraits sat as white text on white scrubs. */
.cp-about-people__grid article{position:relative}
.cp-about-people__grid article>div{background:linear-gradient(180deg,rgba(28,20,31,0) 0%,rgba(28,20,31,.78) 55%,rgba(28,20,31,.9) 100%);text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* Contact: the phone number must not break across two lines. */
.cp-contact-action small,a[href^="tel:"]{white-space:nowrap}

/* Contact on phones: one contact option per row, at a readable size (two columns squeezed the text to 10-12 px and
   wrapped "Open / directions"). */
@media (max-width:480px){
  .cp-contact-actions{grid-template-columns:1fr}
  .cp-contact-action{min-height:64px;align-items:center}
  .cp-contact-action strong{font-size:14px}
  .cp-contact-action small{font-size:13px}
}

/* Services category bar on phones: it scrolls sideways; fade its right edge so a half-visible card reads as "more"
   rather than as text cut off mid-word ("02 Cosmet"). */
@media (max-width:480px){
  .mahan-route-services .mh-category-jump{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
}

/* Safety picture on phones: the caption box sits below the picture instead of covering up to three quarters of it
   (and, on some pages, a face). */
@media (max-width:600px){
  .mh-treatment-safety figure figcaption{position:static;margin:0;padding:16px;background:rgba(39,31,41,.96)}
  .mh-treatment-safety figure img{height:auto;min-height:0;aspect-ratio:4/3;object-fit:cover}
}

/* ---- Review round 2 (21 Oct 2026) ---- */

/* Article lists: a link that fills a list item was inline-block, so its bullet sat beside the LAST line of a wrapped
   link ("• Appear?"). As a block, the bullet stays beside the first line; the 44 px target is unchanged. */
body .wp-site-blocks .mh-article__content :is(li,li>p)>.mh-standalone-link{display:block}

/* Article breadcrumb: the last item is cut with an ellipsis instead of mid-word ("…Areas, Resu"). */
body .wp-site-blocks .mh-article__breadcrumbs>[aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Boxed buttons never show an underlined label (article call-to-action, booking, blog, thank-you). */
body .wp-site-blocks a.mh-button,body .wp-site-blocks a.mh-button:hover{text-decoration:none!important}

/* Small labels, button labels and short paragraphs: no single word left alone on the last line. */
:is(p.mh-kicker,.mh-discovery-eyebrow,.mh-button){text-wrap:balance}
main :is(p,li){text-wrap:pretty}

/* Phone bar: space between "Book" and its arrow. */
.mh-mobile-actions__book>span{margin-left:6px}

/* Forms: the "WhatsApp · Call the clinic" line no longer touches the send button. */
.mahan-lead-help{margin-top:16px}

/* Search: "Explore all 70 treatments" is now a real link on its own line. */
.mh-discovery-note a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Contact: the dot beside the opening hours stays at the first line when the text wraps. */
.cp-contact-hero__availability{align-items:flex-start}
.cp-contact-hero__availability>span{margin-top:.55em}

/* Articles: the last call-to-action card sat on an empty band of about 90 px above the footer. */
@media (max-width:820px){
  body .wp-site-blocks .mh-article__content-wrap{padding-bottom:32px}
}

/* Article and blog-card pictures: people sit a little above the centre of the frame. */
:is(.mh-article__feature,.mh-blog-card__image,.mh-blog-featured__image) img[data-mahan-picture]{object-position:center 35%}

/* HydraFacial: the real clinic photo is portrait; "contain" left it as a narrow column with empty sides. Fill the
   frame instead (square on phones, so most of the photo still shows). */
.mahan-treatment-template :is(.mh-phase456-reviewed,.mh-phase789-reviewed) .mh-treatment-hero__visual img[src*="hydrafacial-mahan-treatment"]{object-fit:cover;object-position:center 30%}
@media (max-width:600px){
  .mahan-treatment-template :is(.mh-phase456-reviewed,.mh-phase789-reviewed) .mh-treatment-hero__visual img[src*="hydrafacial-mahan-treatment"]{aspect-ratio:1/1;max-height:none}
}

/* Comparison tables with three or more columns on phones: one block per row, each value with its column name
   (data-label, added in launch-fixes.php), instead of a sideways-scrolling table cut off at the edge. */
@media (max-width:600px){
  .mh-article__table-wrap:has(thead tr>:nth-child(3)){overflow:visible}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)){min-width:0;width:100%;table-layout:auto;border:1px solid #d6ccd6}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) :is(tbody,tr,th,td){display:block;width:auto}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) tr{padding:12px 14px;border-bottom:1px solid #d6ccd6}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) tr:last-child{border-bottom:0}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) :is(th,td){padding:2px 0;border:0;background:none;overflow-wrap:normal}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) tbody th{position:static;width:auto;padding-bottom:4px;font-weight:700;box-shadow:none}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) td[data-label]::before{content:attr(data-label) ": ";font-weight:600}
  .mh-article__table-wrap table:has(thead tr>:nth-child(3)) td[data-label]>p{display:inline}
}

/* ---- Final review round (21 Oct 2026) ---- */

/* Hyphenated words in headings, FAQ questions and buttons stay on one line ("upper- / face", "THREAD- / LIFT"). */
/* A kept-together word has no box of its own and always looks like the words around it: inside a flex button or
   question it stays part of one label, and older rules for spans in cards and intros don't restyle it. */
body:not(#v4) .mh-nowrap{display:contents!important;margin:0!important;padding:0!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;white-space:nowrap!important}

/* Long button labels that wrap keep comfortable space above and below the text. */
body .wp-site-blocks a.mh-button{height:auto!important;padding-block:12px!important;line-height:1.3!important}

/* Decorative dash marks under the dark-band items and above the step numbers read as unfinished placeholders. */
.mahan-treatment-template .mh-expression-map__card-mark{display:none}
.mahan-treatment-template .mh-treatment-process--clinical .mh-treatment-process__content::before{content:none}

/* Desktop dark band: the introduction gets a wider column and the items share the rest, so a band with three items
   no longer ends in an empty column and its heading isn't squeezed to one word per line. */
@media (min-width:1081px){
  .mahan-treatment-template .mh-expression-map>.mp-shell{grid-template-columns:minmax(320px,1.5fr);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .mahan-treatment-template .mh-expression-map__intro strong,.mahan-treatment-template .mh-expression-map__intro h2{max-width:none}
}
@media (min-width:821px) and (max-width:1080px){
  .mahan-treatment-template .mh-expression-map>.mp-shell{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

/* Services category bar: it scrolls sideways at every width, so its right edge always fades ("07 Und…"). */
.mahan-route-services .mh-category-jump{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}

/* Forms: a little more room between the send button (it has a glow) and the WhatsApp / call line. */
.mahan-lead-help{margin-top:22px}

/* Treatment hero on desktop: the Google-reviews card no longer touches the buttons above it. */
.mahan-treatment-template .mh-treatment-hero__copy .mh-actions+.mh-trust-row{margin-top:20px}

/* Desktop overview card: a tall portrait photo made the card almost a full screen high. */
@media (min-width:821px){
  .mahan-treatment-template .mh-treatment-overview__visual img{max-height:560px;object-fit:cover;object-position:center 30%}
}

/* Blog pagination: "Next »" gets room inside its box. */
.mh-blog-pagination a.next,.mh-blog-pagination a.prev{min-width:auto;padding-inline:14px;white-space:nowrap}

/* Desktop articles: the title block lines up with the reading column below it (it started 110 px further right). */
@media (min-width:1081px){
  body .wp-site-blocks .mh-article__header .mp-shell{max-width:1160px}
}