/* Only the homepage loads this file. 640px is its existing phone breakpoint. */
.home-memory-track { display: contents; }
.home-memory-nav { display: none; }

@media (max-width: 640px) {
  /* Keep the existing fixed actions available once the intro CTA has scrolled away. */
  body:has(.home-memory-track):not(.home-past-intro) > .mobile-dock,
  body:has(.home-memory-track):not(.home-past-intro) > .floating-wa { visibility: hidden; pointer-events: none; }
  .hero.campaign-hero.photo-campaign:has(.home-memory-track) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 0 28px;
  }
  .photo-campaign .memory-wall:has(.home-memory-track) {
    order: -1;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .photo-campaign .home-memory-track {
    --card-width: min(66vw, 262px, 34svh);
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 20px calc((100% - var(--card-width)) / 2) 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .photo-campaign .home-memory-track.is-dragging { scroll-snap-type: none; user-select: none; cursor: grabbing; }
  .photo-campaign .home-memory-track::-webkit-scrollbar { display: none; }
  .photo-campaign .memory-wall .home-memory-track .memory-card {
    position: relative;
    inset: auto;
    flex: 0 0 var(--card-width);
    width: var(--card-width);
    height: auto;
    aspect-ratio: 1 / 1.08;
    margin: 0;
    padding: 6px 6px 20px;
    border-radius: 8px;
    animation: none;
    translate: none;
    --memory-focus: 0;
    --mobile-tilt: -5deg;
    transform: scale(calc(.83 + .17 * var(--memory-focus))) rotate(calc(var(--mobile-tilt) * (1 - var(--memory-focus))));
    transform-origin: center;
    transition: box-shadow .2s ease;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    box-shadow: 0 6px 14px #16120f24;
    z-index: 1;
    cursor: pointer;
  }
  .photo-campaign .memory-wall .home-memory-track .memory-card:nth-child(even) { --mobile-tilt: 5deg; }
  .photo-campaign .memory-wall .home-memory-track .memory-card.is-current {
    z-index: 2;
    box-shadow: 0 8px 18px #16120f30;
  }
  .photo-campaign .home-memory-track .memory-card img { display: block; }
  .photo-campaign .home-memory-track .memory-audio { display: none; }
  .photo-campaign .home-memory-nav:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
  }
  .photo-campaign .home-memory-nav button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 20px;
    cursor: pointer;
  }
  .photo-campaign .home-memory-nav [data-home-auto] svg { width: 17px; height: 17px; }
  .photo-campaign .home-memory-nav button:disabled { opacity: .3; cursor: default; }
  .photo-campaign .home-memory-hint { text-align: center; font-size: 12px; line-height: 1.4; }
  .photo-campaign [data-home-counter] { display: block; font-size: 10px; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .photo-campaign .memory-wall .memory-tools {
    display: none;
    position: absolute;
    top: auto;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    margin: 0;
    gap: 4px;
  }
  .photo-campaign .memory-wall:has(.memory-film.is-current) .memory-tools:not([hidden]) { display: flex; }
  .photo-campaign .memory-tools button { min-height: 44px; padding: 7px 12px; }
  .photo-campaign .memory-wall .motion-status:not(:empty) {
    position: static;
    display: block;
    padding: 4px 20px;
  }
  .photo-campaign:has(.home-memory-track) .hero-copy {
    padding: 12px 22px 0;
    width: 100%;
    gap: 0;
  }
  .photo-campaign:has(.home-memory-track) .hero-copy > .eyebrow { display: none; }
  .photo-campaign:has(.home-memory-track) .hero-copy .home-seo-title {
    margin: 0 0 10px;
    max-width: 100%;
    font-size: clamp(23px, 6.2vw, 29px);
    line-height: 1.14;
    text-wrap: balance;
  }
  .photo-campaign:has(.home-memory-track) .home-seo-title br { display: none; }
  .photo-campaign:has(.home-memory-track) .hero-copy .lead {
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
  }
  .photo-campaign:has(.home-memory-track) .hero-actions {
    width: 100%;
    margin-top: 14px;
    gap: 4px;
  }
  .photo-campaign:has(.home-memory-track) .hero-actions .btn {
    width: 100%;
    max-width: 340px;
    min-height: 48px;
    font-size: 15px;
    padding: 12px 14px;
  }
  .photo-campaign:has(.home-memory-track) .hero-actions .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
  }
  .photo-campaign .home-memory-nav button:focus-visible,
  .photo-campaign .home-memory-track:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: -3px;
  }
}
@media (max-width: 640px) and (max-height: 700px) {
  .photo-campaign .memory-tools button { width: 44px; padding: 7px; }
  .photo-campaign .memory-tools button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .photo-campaign .home-memory-track { --card-width: min(62vw, 27svh); padding-top: 14px; padding-bottom: 8px; }
  .photo-campaign:has(.home-memory-track) .hero-copy { padding-top: 8px; }
  .photo-campaign:has(.home-memory-track) .hero-copy .home-seo-title { font-size: 22px; margin-bottom: 6px; }
  .photo-campaign:has(.home-memory-track) .hero-actions { margin-top: 10px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .photo-campaign .memory-wall .home-memory-track .memory-card {
    transform: rotate(0deg);
    transition: none;
  }
  .photo-campaign .home-memory-track { scroll-behavior: auto; }
}