/**
 * Main imagery standard, based on the reviewed lip consultation layout.
 * Keep content, image files, cards and the lip interactive panel untouched.
 * Dimension overrides intentionally win over historical inline page sizing.
 */
:root {
  --ca-main-media-width: 570px;
  --ca-main-media-ratio: 3 / 2;
  --ca-main-media-padding: 24px;
  --ca-main-media-background: #f2ecdf;
}

/* A bounded panel, rather than a photograph stretched to the copy height. */
body :is(
  .ca-rebrand-lip-content .hero > figure:not(.lip-visual),
  .ca-rebrand-lip-content .appointment-grid > figure:not(.practitioner),
  .ca-rebrand-lip-content .forehead-assessment-photo,
  .ca-editorial-hero__media,
  .interior-article .article-figure,
  .about-hero-portrait,
  .about-split-media,
  .about-premises-media
) {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--ca-main-media-width) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin-inline: auto !important;
  align-self: center !important;
  padding: var(--ca-main-media-padding) !important;
  background: var(--ca-main-media-background) !important;
  border-radius: 2px;
}

/* Explicit parents exclude the image-led hub cards, logos and maps. */
body :is(
  .ca-rebrand-lip-content .hero > figure:not(.lip-visual),
  .ca-rebrand-lip-content .appointment-grid > figure:not(.practitioner),
  .ca-rebrand-lip-content .forehead-assessment-photo,
  .ca-editorial-hero__media,
  .interior-article .article-figure,
  .about-hero-portrait,
  .about-split-media,
  .about-premises-media
) :is(a:has(> img), a:has(> picture), picture) {
  display: block;
  width: 100%;
}

body :is(
  .ca-rebrand-lip-content .hero > figure:not(.lip-visual),
  .ca-rebrand-lip-content .appointment-grid > figure:not(.practitioner),
  .ca-rebrand-lip-content .forehead-assessment-photo,
  .ca-editorial-hero__media,
  .interior-article .article-figure,
  .about-hero-portrait,
  .about-split-media,
  .about-premises-media
) img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--ca-main-media-ratio) !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  background: var(--ca-main-media-background) !important;
  border-radius: 2px;
}

/* Captions remain beneath the image, never over a face or anatomy label. */
body :is(
  .ca-rebrand-lip-content .hero > figure:not(.lip-visual),
  .ca-rebrand-lip-content .appointment-grid > figure:not(.practitioner),
  .ca-rebrand-lip-content .forehead-assessment-photo,
  .ca-editorial-hero__media,
  .interior-article .article-figure,
  .about-hero-portrait,
  .about-split-media,
  .about-premises-media
) figcaption {
  position: static !important;
  inset: auto !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.6;
  color: #3e4541 !important;
  background: transparent !important;
}

/* Educational drawings can use their full height. Never crop labels. */
body .ca-rebrand-lip-content :is(
  .anatomy-figure, .jaw-anatomy-figure, .cheek-figure,
  .mentalis-figure, .chin-profile-figure, .lip-medical-illustration
) img,
body :is(.ca-rebrand-lip-content, .interior-article, .ca-editorial-hero__media)
  figure img:is([alt*="anatom" i], [alt*="diagram" i], [alt*="illustration" i]),
body .ca-editorial-hero__media img:is([alt*="anatom" i], [alt*="diagram" i], [alt*="illustration" i]),
body .ca-media-natural img {
  --ca-main-media-ratio: auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* Older editorial bands must not stretch a photograph to a long answer. */
body.ca-editorial-service-page .ca-layout-band-media {
  contain: none;
  align-self: center;
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto auto;
}
body.ca-editorial-service-page :is(.ca-layout-band-media, .ca-layout-supporting-figure) img {
  display: block;
  width: 100%;
  max-width: var(--ca-main-media-width);
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-inline: auto;
  aspect-ratio: var(--ca-main-media-ratio) !important;
  object-fit: contain !important;
  object-position: center;
  background: var(--ca-main-media-background);
}
body.ca-editorial-service-page :is(.ca-layout-band-media, .ca-layout-supporting-figure) figcaption {
  max-width: var(--ca-main-media-width);
  margin-inline: auto;
}

body.ca-editorial-service-page :is(.ca-layout-band-media, .ca-layout-supporting-figure)
  img:is([alt*="anatom" i], [alt*="diagram" i], [alt*="illustration" i]) {
  --ca-main-media-ratio: auto;
  aspect-ratio: auto !important;
}

/* The lip page uses a readable portrait beside the appointment answer.
 * Preserve that space in narrow columns instead of shrinking a tall photo
 * into a small landscape thumbnail. */
body .ca-rebrand-lip-content .appointment-grid > figure:not(.practitioner) {
  padding: 0 !important;
}
body .ca-rebrand-lip-content .appointment-grid > figure:not(.practitioner) img {
  aspect-ratio: auto !important;
  max-height: 438px !important;
}
@media (min-width: 601px) and (max-width: 800px) {
  body .ca-rebrand-lip-content .appointment-grid > figure:not(.practitioner) img {
    max-height: 350px !important;
  }
}

@media (max-width: 600px) {
  :root { --ca-main-media-padding: 18px; }
}