/* =========================================================
   Gallery — Mobile carousel (MOBILE ONLY)
   - Scoped to body.gallery-page
   - Desktop remains unchanged.
   ========================================================= */

@media (max-width: 768px){
  /* Keep the intro section spacing, but remove the grey line visually */
  body.gallery-page .gallery-divider-line{ opacity: 0 !important; }

  /* Mobile uses the carousel; desktop grid is hidden on mobile only */
  body.gallery-page .gallery-grid{ display: none !important; }

  body.gallery-page .gallery-mobile{
    display: block;
    width: min(980px, 94vw);
    margin: clamp(68px, 10vh, 112px) auto 0;
  }

  body.gallery-page .gallery-intro{
    margin-bottom: clamp(18px, 3.5vh, 26px);
  }

  .gallery-mobile .gm-viewport{
    position: relative;
    overflow: hidden;
  }

  .gallery-mobile .gm-track{
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    padding: 8px 12vw 14px;
    margin: 0;

    scrollbar-width: none;
  }
  .gallery-mobile .gm-track::-webkit-scrollbar{ display:none; }

  .gallery-mobile .gm-slide{
    flex: 0 0 74vw;
    max-width: 74vw;
    aspect-ratio: 1 / 1;
    position: relative;
    scroll-snap-align: center;
  }

  .gallery-mobile .gm-photo-wrap{
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .gallery-mobile .gm-photo{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .gallery-mobile .gm-slide--framed .gm-frame{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
  }

  .gallery-mobile .gm-slide--framed .gm-photo-wrap{
    inset: 14px;
  }

  .gallery-mobile .gm-hint{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 10px auto 0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;

    color: var(--ink, #344C57);
    opacity: 0.85;
  }

  .gallery-mobile .gm-arrow{
    width: 18px;
    height: 18px;
    animation: gm-nudge 1.4s ease-in-out infinite;
  }

  @keyframes gm-nudge{
    0%, 100% { transform: translateX(0); opacity: 0.85; }
    50%      { transform: translateX(7px); opacity: 1; }
  }
}


@media (max-width: 768px){
  body.gallery-page .gallery-share-panel{
    width: min(94vw, 680px);
    margin-top: 18px;
    padding: 20px 18px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.gallery-page .gallery-share-text{
    font-size: clamp(24px, 7vw, 32px);
  }

  body.gallery-page .gallery-share-actions{
    flex-direction: column;
  }

  body.gallery-page .gallery-share-send,
  body.gallery-page .gallery-share-trigger{
    width: 100%;
  }

  body.gallery-page .gallery-share-preview{
    width: min(100%, 240px);
    justify-self: center;
  }

  body.gallery-page .gallery-share-meta{
    justify-content: center;
  }

  body.gallery-page .gallery-mobile{
    margin-top: 48px;
  }
}


/* Final mobile spacing: carousel remains airy but footer no longer feels detached. */
@media (max-width: 768px){
  body.gallery-page .gallery-mobile{
    margin-bottom: clamp(22px, 3.8vh, 40px);
  }

  .gallery-mobile .gm-track{
    padding-bottom: 10px;
  }

  .gallery-mobile .gm-hint{
    margin-top: 6px;
  }
}