/* Narrow review: only the explicitly approved review changes are styled here. */

@media screen {
  /* The journey remains available from the archive card and its own page. */
  section#journey {
    display: none !important;
  }

  /* Keep each support-book page header; remove only the top table of contents. */
  nav[aria-label="サポートブックの目次"] {
    display: none !important;
  }

  #book-content {
    padding-top: 2rem;
  }

  #book-content > section {
    scroll-margin-top: 1rem;
  }

  /* Contact remains inert until its observer marks the section as near the viewport. */
  .contact-invitation {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #contact.review-contact-photo-ready .contact-invitation {
    background-image: url("/assets/real/contact-mobile-900.webp");
    background-image: image-set(
      url("/assets/real/contact-mobile-900.webp") 1x,
      url("/assets/real/contact-mobile-1200.webp") 2x
    );
  }

  .contact-invitation img {
    display: none !important;
  }
}

@media screen and (max-width: 1080px) {
  /*
   * Nine navigation items no longer fit every mobile viewport. Keep the menu
   * itself scrollable, including short landscape screens, without chaining a
   * swipe into the page behind it.
   */
  .mobile-menu {
    justify-content: flex-start;
    justify-content: safe center;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: max(6rem, calc(env(safe-area-inset-top) + 5rem));
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
  }
}

@media (min-width: 761px) {
  /* Keep the FAQ image inside its grid column instead of covering the copy. */
  .archive-card.archive-faq .archive-media {
    width: 100%;
    min-width: 0;
  }

  .loading-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-color: #0a1720;
    background-image: url("/assets/loading/amoralice-loading-desktop-final.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1000ms cubic-bezier(0.22, 0.72, 0.24, 1);
  }

  .loading-hero[data-phase="settling"]::after,
  .loading-hero[data-phase="ready"]::after {
    opacity: 1;
  }

  #contact.review-contact-photo-ready .contact-invitation {
    background-image: url("/assets/real/contact-desktop-1600.webp");
    background-image: image-set(
      url("/assets/real/contact-desktop-1600.webp") 1x,
      url("/assets/real/contact-desktop-2400.webp") 2x
    );
    background-position: center center;
  }
}

.archive-journey {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.28fr) minmax(18rem, 0.72fr);
  min-height: 25rem;
}

.archive-journey .archive-copy {
  order: 1;
}

.archive-journey .archive-media {
  order: 2;
  min-height: 25rem;
  aspect-ratio: auto;
}

@media (min-width: 1101px) {
  .archive-card.archive-faq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .archive-card.archive-faq .archive-media {
    align-self: start;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .archive-card.archive-faq,
  .archive-journey {
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 0;
  }

  .archive-journey .archive-copy,
  .archive-journey .archive-media {
    order: initial;
  }

  .archive-card.archive-faq .archive-media,
  .archive-journey .archive-media {
    align-self: start;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

.philosophy-portrait img,
#archive a[href$="/kittens/"] .archive-media img,
#archive a[href$="/daily/"] .archive-media img,
#archive a[href$="/parents/"] .archive-media img,
#archive a[href$="/graduates/"] .archive-media img,
#archive a[href$="/faq/"] .archive-media img,
.archive-journey .archive-media img,
.subpage-hero img {
  object-position: var(--review-image-position, 50% 50%);
}

.philosophy-portrait img {
  --review-image-position: 50% 42%;
}

@media (min-width: 1200px) {
  .philosophy-portrait {
    translate: clamp(1.25rem, 2.2vw, 2.75rem) 0;
  }
}

#archive a[href$="/daily/"] .archive-media img {
  --review-image-position: 52% 50%;
}

#archive a[href$="/parents/"] .archive-media img {
  --review-image-position: 50% 38%;
}

#archive a[href$="/graduates/"] .archive-media img {
  --review-image-position: 50% 44%;
}

.archive-journey .archive-media img {
  --review-image-position: 50% 52%;
}

@media (max-width: 760px) {
  #book-content {
    padding-top: 1rem;
  }

  .archive-journey {
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 0;
  }

  .archive-journey .archive-copy,
  .archive-journey .archive-media {
    order: initial;
  }

  .archive-journey .archive-media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .archive-card.archive-faq .archive-media {
    align-self: start;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

/*
 * Keep the two kittens visible at every width. This intentionally comes after
 * the breakpoint rules and matches the base card selector's specificity so
 * its 1.2 aspect ratio cannot win the cascade.
 */
.archive-card.archive-journey .archive-media {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 3 / 2;
  align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .loading-hero::after {
    transition: none;
  }
}