/* Today Dental mobile clinical reading, 2026-09-14 owner review.
   The mobile header uses 980px. Fill the content column, not the viewport.
   Only reviewed explanation figures and clinician blocks are selected here.
   Clinical case pairs, image rails, logos and navigation controls keep their layout. */
@media (max-width: 980px) {
  main[data-detail-mobile-media][data-page-kind] :is(
    .vn-education,.vn-photo,.ir-educational,.ir-journey-photo,.ir-journey-education,.ir-ct-photo,
    .ad-photo,.ad-education,.od-visual,.fl-education,.fl-context-figure,.bg-context-figure,.bg-education-figure,
    .fm-education,.fm-visual,.dt-education,.dt-actual-prosthesis,.ch-education,.ch-photo,
    .ca-source-figure,.ca-education,.o40-education,.care-figure,.ec-figure,.rr-education,.wh-material,.gc-figure,.ohr-figure
  ) {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
    align-self: stretch;
  }
  main[data-detail-mobile-media][data-page-kind] :is(
    .vn-education,.vn-photo,.ir-educational,.ir-journey-photo,.ir-journey-education,.ir-ct-photo,
    .ad-photo,.ad-education,.od-visual,.fl-education,.fl-context-figure,.bg-context-figure,.bg-education-figure,
    .fm-education,.fm-visual,.dt-education,.dt-actual-prosthesis,.ch-education,.ch-photo,
    .ca-source-figure,.ca-education,.o40-education,.care-figure,.ec-figure,.rr-education,.wh-material,.gc-figure,.ohr-figure
  ) img {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    aspect-ratio: auto var(--detail-media-ratio);
    object-fit: contain;
  }
  main[data-detail-mobile-media][data-page-kind] :is(p,figcaption) {
    max-width: none;
  }
  main[data-detail-mobile-media][data-page-kind] figure figcaption {
    width: 100%;
    min-width: 0;
  }
  main[data-detail-mobile-media][data-page-kind] :is(
    .ir-hero-grid,.wh-hero-stage,.ohr-hero,.ohr-assessment,.ohr-retention-figures,.ohr-guides a,.ohr-methods,
    .ir-equipment .ir-flat-row
  ) {
    grid-template-columns: minmax(0,1fr);
  }
  main[data-detail-mobile-media][data-page-kind] :is(
    .ir-clinicians,.od-clinicians,.bg-doctors,.fm-doctors,.o40-doctors,.vn-doctors,
    .fl-doctors,.dt-doctors,.ad-doctors,.ch-doctors,.ca-doctors
  ) {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 40px;
    width: 100%;
    max-width: none;
  }
  main[data-detail-mobile-media][data-page-kind] :is(
    .ir-clinician,.od-clinician,.bg-doctors article,.fm-doctor,.o40-doctor,
    .vn-doctor-identity,.fl-doctor-identity,.dt-doctor-identity,.ad-doctor-identity,.ch-doctor-head,.ca-doctor-head
  ) {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto;
    gap: 16px;
    width: 100%;
    max-width: none;
    align-items: start;
  }
  main[data-detail-mobile-media][data-page-kind] :is(
    .ir-clinician,.od-clinician,.bg-doctors article,.fm-doctor,.o40-doctor,
    .vn-doctor-identity,.fl-doctor-identity,.dt-doctor-identity,.ad-doctor-identity,.ch-doctor-head,.ca-doctor-head
  ) > * {
    grid-column: 1;
    grid-row: auto;
    min-width: 0;
    max-width: none;
  }
  main[data-detail-mobile-media][data-page-kind] :is(
    .ir-clinicians,.od-clinicians,.bg-doctors,.fm-doctors,.o40-doctors,.vn-doctors,
    .fl-doctors,.dt-doctors,.ad-doctors,.ch-doctors,.ca-doctors
  ) img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    grid-column: 1;
    grid-row: auto;
    margin: 0;
  }
  main[data-detail-mobile-media][data-page-kind] .wh-hero-stage {
    display: flex;
    flex-direction: column;
  }
  main[data-detail-mobile-media][data-page-kind] .wh-material {
    padding-inline: 0;
  }
  /* Existing adult rules use :where(), so their narrow-screen declarations
     lose to the base selectors. Reset both tracks and flattened grid children. */
  main[data-detail-mobile-media][data-page-kind] :is(.ad-journey > li,.ad-team-review,.ad-assessment-item) {
    grid-template-columns: minmax(0,1fr);
  }
  main[data-detail-mobile-media][data-page-kind] .ad-assessment-item > :is(h3,p,figure) {
    grid-column: 1;
    grid-row: auto;
  }
  main[data-detail-mobile-media][data-page-kind] .ad-care-phases {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  main[data-detail-mobile-media][data-page-kind] .ad-care-phases > article {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    width: 100%;
  }
}