/* SmileCraft v2.2 — deterministic responsive media sizing
   Fixes Gutenberg figure wrappers that could be taller than the actual <img>,
   leaving pale-blue/cream empty space below photos on mobile and desktop. */

/* All designed photo frames become real crop boxes. The image is pinned to the
   frame rather than relying on percentage height against an indefinite parent. */
.sc17-photo,
.sc17-pathway-media,
.sc17-case-photo {
  position: relative !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.sc17-photo > img,
.sc17-pathway-media > img,
.sc17-case-photo > img,
figure.wp-block-image.sc17-photo > img,
figure.wp-block-image.sc17-pathway-media > img,
figure.wp-block-image.sc17-case-photo > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Doctor photos use the taller editorial crop. */
.sc17-doctor-photo {
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
}
.sc17-doctor-photo > img,
figure.wp-block-image.sc17-doctor-photo > img,
img[src*="dr-vahe-ohanesian"] {
  object-position: 50% 43% !important;
}

/* Generic interior-page media should remain landscape instead of becoming a
   very tall empty card after split layouts collapse on phones. */
.sc17-split > .sc17-photo {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Homepage treatment pathway media fills its half of the card on desktop. */
.sc17-pathway-media {
  min-height: 285px !important;
  height: 100% !important;
}

/* Before/after source files are naturally close to 7:6. Keep that ratio at all
   breakpoints so each smile is readable without tall narrow crops. */
.sc17-case-photo {
  aspect-ratio: 1.167 / 1 !important;
  min-height: 0 !important;
}

/* Hero video/poster frame is also deterministic and never stretches vertically. */
.sc-media-loop {
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  height: auto !important;
}
.sc-media-loop video,
.sc-media-loop .sc-media-loop-poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Prevent Gutenberg/global image rules from reintroducing auto-height inside
   the designed media frames. */
.wp-block-post-content figure.wp-block-image.sc17-photo img,
.wp-block-post-content figure.wp-block-image.sc17-pathway-media img,
.wp-block-post-content figure.wp-block-image.sc17-case-photo img {
  height: 100% !important;
}

@media (max-width: 980px) {
  /* Once the layout stacks, treatment cards should have a predictable landscape
     image instead of inheriting a desktop min-height. */
  .sc17-pathway-media {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .sc17-split > .sc17-photo {
    aspect-ratio: 16 / 10 !important;
  }

  .sc17-doctor-photo {
    width: min(100%, 680px) !important;
    aspect-ratio: 4 / 5 !important;
  }
}

@media (max-width: 720px) {
  /* Doctor card stays portrait but is not excessively tall on small phones. */
  .sc17-doctor-photo {
    aspect-ratio: 4 / 4.65 !important;
    width: 100% !important;
  }

  /* Practice/treatment photos remain wide and compact on mobile. */
  .sc17-split > .sc17-photo,
  .sc17-pathway-media {
    aspect-ratio: 16 / 10.25 !important;
  }

  .sc17-case-photo {
    aspect-ratio: 1.167 / 1 !important;
  }
}

@media (max-width: 480px) {
  .sc17-doctor-photo {
    aspect-ratio: 4 / 4.8 !important;
  }

  .sc17-split > .sc17-photo,
  .sc17-pathway-media {
    aspect-ratio: 16 / 10.5 !important;
  }
}

/* Editor parity: show the same crop/ratio inside Gutenberg so replacing an image
   gives an accurate preview of the live site. */
.editor-styles-wrapper .sc17-photo,
.editor-styles-wrapper .sc17-pathway-media,
.editor-styles-wrapper .sc17-case-photo {
  position: relative !important;
  overflow: hidden !important;
}
.editor-styles-wrapper .sc17-photo > img,
.editor-styles-wrapper .sc17-pathway-media > img,
.editor-styles-wrapper .sc17-case-photo > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}