/*
 * Image ratio contracts.
 *
 * This stylesheet loads after the page and annual layout styles so that
 * editorial spacing changes cannot silently stretch artwork, document pages,
 * logos or photographs. Components may size the frame; the image mode owns
 * how pixels fit inside it.
 */

.jciq-youth-site img[data-image-fit="natural"] {
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

.jciq-youth-site img[data-image-fit="cover"] {
  object-fit: cover !important;
}

/* Full artwork and document covers always retain their encoded proportions. */
.jciq-youth-site :is(
  .site-brand__logo,
  .project-hero img,
  .progress-hero__inner > img,
  .progress-single-cover,
  .publication-spotlight__cover img,
  .candidate-booklet__cover img,
  .member-resource-card__cover img,
  .handbook-band__cover img,
  .member-information-cover img,
  .handbook-book img,
  .agm-candidate-booklet img,
  .annual-hero .hero__media img,
  .youth-snapshot img,
  .home-board-feature img,
  .about-intro__photo img,
  .area-detail-hero figure img
) {
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* The page frame, rather than a later generic image rule, owns reader size. */
.mobile-document-reader__page {
  display: block;
  width: min(53.125rem, 100%);
  aspect-ratio: var(--jciq-page-ratio, 17 / 24);
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 16, 48, .14);
}

.jciq-youth-site .mobile-document-reader__page > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto !important;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain !important;
  box-shadow: none;
}

@media (max-width: 560px) {
  .mobile-document-reader__page { box-shadow: 0 8px 24px rgba(0, 16, 48, .11); }
}