/*
 * Site-wide mobile thumbnail card contract.
 *
 * The current Blog list card is the source of truth: one full-width card,
 * a 16:9 edge-to-edge cover viewport, a compact content footer, and 18px between
 * vertically stacked cards. This file is loaded after page-specific styles so
 * older module rules cannot restore two-column phone grids or fixed media
 * heights.
 */

@media (max-width: 640px) {
  :root {
    --ms-mobile-card-gap: 18px;
    --ms-mobile-card-media-ratio: 16 / 9;
    --ms-mobile-card-footer-min-height: 74px;
    --ms-mobile-card-min-height: 308px;
    --ms-mobile-card-inline-size: calc(100vw - 28px);
  }

  :is(
    .module-card-grid:not(.module-card-grid--list),
    .ms-universal-thumb-grid,
    .training-card-grid,
    .profile-editorial-card-grid,
    .media-post-grid,
    .media-album-grid,
    .post-thumb-grid,
    .thumb-grid,
    .blog-grid,
    .news-grid,
    .press-card-grid,
    .links-card-grid,
    .watch-library__grid,
    .podcast-grid,
    .episode-grid,
    .events-feed-list,
    .events-grid,
    .event-grid,
    .highlight-grid,
    .workout-thumb-grid,
    .workout-grid,
    .drill-grid,
    .exercise-grid,
    .championship-card-grid,
    .championships-grid,
    .honors-card-grid,
    .alumni-grid,
    .trophy-grid,
    .sponsor-alumni-grid,
    .parent-info-grid,
    .facilities-grid,
    .locations-grid,
    .people-thumb-grid,
    .athlete-thumb-grid,
    .staff-card-grid,
    .trainer-card-grid,
    .hof-grid,
    .weekly-stories__grid,
    .food-journal-day-grid,
    .food-journal-album-grid,
    .profile-feed-items,
    .popular-feed-grid,
    .school-info-grid,
    .team-history-grid,
    .sports-roster-grid,
    .roster-player-thumb-grid,
    .roster-guide__grid,
    .stream-channel-grid,
    .setup-rig-grid,
    .game-account-grid,
    .match-result-grid,
    .tournament-grid
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: var(--ms-mobile-card-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  [data-app-ad-batch-grid]:is(
    .module-card-grid,
    .ms-universal-thumb-grid,
    .profile-editorial-card-grid,
    .thumb-grid,
    .events-feed-list
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(
    .module-card-grid:not(.module-card-grid--list),
    .ms-universal-thumb-grid,
    .training-card-grid,
    .profile-editorial-card-grid,
    .media-post-grid,
    .media-album-grid,
    .post-thumb-grid,
    .events-feed-list,
    .events-grid,
    .alumni-grid,
    .parent-info-grid,
    .facilities-grid,
    .locations-grid,
    .weekly-stories__grid
  ) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  :is(
    .module-thumb-card,
    .ms-universal-thumb-card,
    .blog-card,
    .media-post-card,
    .media-album-card,
    .watch-library__card,
    .podcast-card,
    .post-thumb-card,
    .training-content-card,
    .workout-thumb-card,
    .events-feed-card,
    .events-card,
    .championship-thumb-card,
    .honors-card,
    .recommendation-alumni-card,
    .trophy-thumb-card,
    .alumni-card,
    .parent-info-card,
    .facility-image-card,
    .location-card,
    .press-card,
    .links-card,
    .weekly-story-card,
    .roster-player-thumb-card,
    .roster-guide-card,
    .setup-rig-card,
    .feed-card,
    .popular-card--feed,
    .food-journal-album-card,
    .school-info-card,
    .team-history-card,
    .hof-card
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--ms-mobile-card-min-height) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  :is(
    .module-thumb-media,
    .ms-universal-thumb-media,
    .blog-thumb,
    .media-post-card__media,
    .media-album-card__cover,
    .watch-library__thumb-wrap,
    .podcast-card-media,
    .post-thumb-media,
    .workout-thumb-card__image-wrap,
    .events-feed-media,
    .events-card-image,
    .championship-thumb-media,
    .honors-thumb,
    .alumni-card-image-wrap,
    .parent-info-card-image-wrap,
    .facility-card-media,
    .location-media,
    .press-card-preview,
    .links-card-preview,
    .weekly-story-card__cover,
    .roster-player-thumb-card__image,
    .roster-guide-card__media-shell,
    .setup-rig-card__media,
    .feed-card__media,
    .feed-card__file-preview,
    .popular-card-media,
    .food-journal-album-card__media,
    .school-info-card-image-wrap,
    .team-history-card-image-wrap,
    .hof-thumbnail
  ) {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--ms-mobile-card-media-ratio) !important;
    overflow: hidden !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }

  :is(
    .media-album-card__frame,
    .events-feed-media-shell,
    .blog-card-media-link,
    .events-feed-media-link,
    .workout-thumb-card__media-link,
    .championship-thumb-main,
    .press-card-link,
    .links-card-link,
    .parent-info-card-main,
    .facility-card-link,
    .location-link
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  .media-album-card__frame {
    aspect-ratio: var(--ms-mobile-card-media-ratio) !important;
    overflow: hidden !important;
  }

  :is(
    .module-thumb-media,
    .ms-universal-thumb-media,
    .blog-thumb,
    .media-post-card__media,
    .media-album-card__cover,
    .watch-library__thumb-wrap,
    .podcast-card-media,
    .post-thumb-media,
    .workout-thumb-card__image-wrap,
    .events-feed-media,
    .events-card-image,
    .championship-thumb-media,
    .honors-thumb,
    .alumni-card-image-wrap,
    .parent-info-card-image-wrap,
    .facility-card-media,
    .location-media,
    .press-card-preview,
    .links-card-preview,
    .weekly-story-card__cover,
    .roster-player-thumb-card__image,
    .roster-guide-card__media-shell,
    .setup-rig-card__media,
    .feed-card__media,
    .popular-card-media,
    .food-journal-album-card__media,
    .school-info-card-image-wrap,
    .team-history-card-image-wrap,
    .hof-thumbnail
  ) :is(img, video, picture, iframe, embed, object, .ms-smart-image, .ms-universal-thumb-image) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    visibility: visible !important;
  }

  :is(
    .module-thumb-body,
    .ms-universal-thumb-body,
    .blog-card-body,
    .media-post-card__body,
    .media-album-card__body,
    .watch-library__body,
    .podcast-card-body,
    .post-thumb-body,
    .workout-thumb-card__body,
    .events-feed-body,
    .events-card-body,
    .championship-thumb-body,
    .honors-card-body,
    .recommendation-card-body,
    .alumni-card-body,
    .parent-info-card-body,
    .location-body,
    .press-card-body,
    .links-card-body,
    .weekly-story-card__body,
    .roster-player-thumb-card__footer,
    .roster-guide-card__identity-block,
    .feed-bottom-text,
    .popular-card-body,
    .food-journal-album-card__footer,
    .school-info-card-body,
    .team-history-card-body,
    .facility-card-body,
    .hof-card-body
  ) {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--ms-mobile-card-footer-min-height) !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  :is(
    .profile-page-ad-slot,
    .profile-editorial-grid-ad,
    .media-post-grid-ad,
    .events-feed-ad-slot,
    .facilities-grid-ad,
    .locations-grid-ad,
    .parent-info-grid-ad,
    .press-grid-ad,
    .links-grid-ad
  ) {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Alumni News follows the Blog 16:9 mobile media viewport. */
  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--alumni_news
  .profile-body-card
  .alumni-thumb__image.ms-universal-thumb-media:has(img):not(:has(:is(video, iframe, embed, object))) {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--ms-mobile-card-media-ratio) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #111827 !important;
  }

  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--alumni_news
  .profile-body-card
  .alumni-thumb__image.ms-universal-thumb-media:has(img):not(:has(:is(video, iframe, embed, object))) > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Championship portraits stay inside the universal mobile thumbnail. */
  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--championships
  .profile-body-card
  .championship-thumb-media.module-thumb-media:has(img):not(:has(:is(video, iframe, embed, object))) {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--ms-mobile-card-media-ratio) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #111827 !important;
  }

  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--championships
  .profile-body-card
  .championship-thumb-media.module-thumb-media:has(img):not(:has(:is(video, iframe, embed, object))) > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Coaches photos stay inside the universal mobile thumbnail. */
  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--coaches
  .profile-body-card
  .coaches-list-page
  .ms-thumb-img.ms-universal-thumb-media:has(img):not(:has(:is(video, iframe, embed, object))) {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--ms-mobile-card-media-ratio) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #111827 !important;
  }

  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--coaches
  .profile-body-card
  .coaches-list-page
  .ms-thumb-img.ms-universal-thumb-media:has(img):not(:has(:is(video, iframe, embed, object))) > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Drill media stays inside the universal mobile thumbnail. */
  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--drills
  .profile-body-card
  .drills-module-wrap--drills
  .post-thumb-grid.exercise-thumb-grid
  .post-thumb-media.training-content-media {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--ms-mobile-card-media-ratio) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #111827 !important;
  }

  body.profile-page.profile-subpage-shell
  .profile-page.profile-page--drills
  .profile-body-card
  .drills-module-wrap--drills
  .post-thumb-grid.exercise-thumb-grid
  .post-thumb-media.training-content-media > :is(img, video) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Final Blog-equivalent geometry. This repeats the real profile DOM prefix
     so legacy !important module rules cannot restore square, 4:3, natural,
     or fixed-height mobile thumbnails. */
  body.app-body.profile-page.profile-subpage-shell
  .profile-page[data-profile-ad-batches]
  .profile-body-card
  .profile-body-content
  :is(
    .module-card-grid:not(.module-card-grid--list),
    .ms-universal-thumb-grid,
    .profile-editorial-card-grid,
    .media-post-grid,
    .media-album-grid,
    .post-thumb-grid,
    .watch-library__grid,
    .podcast-grid,
    .events-feed-list,
    .honors-card-grid,
    .alumni-grid,
    .parent-info-grid,
    .facilities-grid,
    .locations-grid,
    .people-thumb-grid,
    .food-journal-album-grid,
    .school-info-grid,
    .team-history-grid,
    .profile-feed-items,
    .workout-thumb-grid
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: var(--ms-mobile-card-gap) !important;
    box-sizing: border-box !important;
    width: var(--ms-mobile-card-inline-size) !important;
    min-width: 0 !important;
    max-width: var(--ms-mobile-card-inline-size) !important;
    margin-left: calc(50% - 50vw + 14px) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.app-body.profile-page.profile-subpage-shell
  .profile-page[data-profile-ad-batches]
  .profile-body-card
  .profile-body-content
  :is(
    .module-card-grid:not(.module-card-grid--list),
    .ms-universal-thumb-grid,
    .profile-editorial-card-grid,
    .media-post-grid,
    .media-album-grid,
    .post-thumb-grid,
    .watch-library__grid,
    .podcast-grid,
    .events-feed-list,
    .honors-card-grid,
    .alumni-grid,
    .parent-info-grid,
    .facilities-grid,
    .locations-grid,
    .people-thumb-grid,
    .food-journal-album-grid,
    .school-info-grid,
    .team-history-grid,
    .profile-feed-items,
    .workout-thumb-grid
  ) > * {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-body.profile-page.profile-subpage-shell
  .profile-page[data-profile-ad-batches]
  .profile-body-card
  .profile-body-content
  :is(.module-thumb-card, .ms-universal-thumb-card) {
    height: auto !important;
    min-height: var(--ms-mobile-card-min-height) !important;
  }

  body.app-body.profile-page.profile-subpage-shell
  .profile-page[data-profile-ad-batches]
  .profile-body-card
  .profile-body-content
  :is(
    .module-thumb-media,
    .ms-universal-thumb-media,
    .card-thumbnail-wrap,
    .blog-thumb,
    .media-post-card__media,
    .media-album-card__cover,
    .watch-library__thumb-wrap,
    .podcast-card-media,
    .post-thumb-media,
    .workout-thumb-card__image-wrap,
    .events-feed-media,
    .championship-thumb-media,
    .honors-thumb,
    .alumni-card-image-wrap,
    .parent-info-card-image-wrap,
    .facility-card-media,
    .location-media,
    .press-card-preview,
    .links-card-preview,
    .food-journal-album-card__media,
    .school-info-card-image-wrap,
    .team-history-card-image-wrap,
    .feed-card__media,
    .feed-card__file-preview,
    .hof-thumbnail
  ) {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--ms-mobile-card-media-ratio) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: visible !important;
  }

  body.app-body.profile-page.profile-subpage-shell
  .profile-page[data-profile-ad-batches]
  .profile-body-card
  .profile-body-content
  :is(
    .module-thumb-media,
    .ms-universal-thumb-media,
    .card-thumbnail-wrap,
    .blog-thumb,
    .media-post-card__media,
    .media-album-card__cover,
    .watch-library__thumb-wrap,
    .podcast-card-media,
    .post-thumb-media,
    .workout-thumb-card__image-wrap,
    .events-feed-media,
    .championship-thumb-media,
    .honors-thumb,
    .alumni-card-image-wrap,
    .parent-info-card-image-wrap,
    .facility-card-media,
    .location-media,
    .press-card-preview,
    .links-card-preview,
    .food-journal-album-card__media,
    .school-info-card-image-wrap,
    .team-history-card-image-wrap,
    .feed-card__media,
    .hof-thumbnail
  ) > :is(img, video, picture, iframe, embed, object, .ms-smart-image, .ms-universal-thumb-image),
  body.app-body.profile-page.profile-subpage-shell
  .profile-page[data-profile-ad-batches]
  .profile-body-card
  .profile-body-content
  :is(
    .module-thumb-media,
    .ms-universal-thumb-media,
    .card-thumbnail-wrap,
    .blog-thumb,
    .media-post-card__media,
    .media-album-card__cover,
    .watch-library__thumb-wrap,
    .podcast-card-media,
    .post-thumb-media,
    .workout-thumb-card__image-wrap,
    .events-feed-media,
    .championship-thumb-media,
    .honors-thumb,
    .alumni-card-image-wrap,
    .parent-info-card-image-wrap,
    .facility-card-media,
    .location-media,
    .press-card-preview,
    .links-card-preview,
    .food-journal-album-card__media,
    .school-info-card-image-wrap,
    .team-history-card-image-wrap,
    .feed-card__media,
    .hof-thumbnail
  ) picture > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    visibility: visible !important;
  }

  body.app-body.profile-page.profile-subpage-shell
  .profile-page[data-profile-ad-batches]
  .profile-body-card
  .profile-body-content
  :is(
    .module-thumb-body,
    .ms-universal-thumb-body,
    .blog-card-body,
    .media-post-card__body,
    .media-album-card__body,
    .watch-library__body,
    .podcast-card-body,
    .post-thumb-body,
    .workout-thumb-card__body,
    .events-feed-body,
    .championship-thumb-body,
    .honors-card-body,
    .recommendation-card-body,
    .alumni-card-body,
    .parent-info-card-body,
    .location-body,
    .press-card-body,
    .links-card-body,
    .food-journal-album-card__footer,
    .school-info-card-body,
    .team-history-card-body,
    .facility-card-body,
    .feed-bottom-text,
    .hof-card-body
  ) {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--ms-mobile-card-footer-min-height) !important;
    max-height: none !important;
  }

  /* The Feed text footer is the card footer; remove its legacy outer gap. */
  body.app-body.profile-page.profile-subpage-shell
  .profile-page.profile-page--feed
  .profile-feed-items
  .feed-card.module-thumb-card {
    min-height: 0 !important;
  }

  body.app-body.profile-page.profile-subpage-shell
  .profile-page.profile-page--feed
  .profile-feed-items
  .feed-bottom-text.module-thumb-body {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px 18px !important;
  }
}