/* Satisfactory Sealing Gallery Mobile Hero Hotfix v1.0.1
   Gallery-only mobile correction.
   Removes the mobile-shell top gap, makes the gallery hero full-bleed without
   using 100vw, and prevents text clipping. Homepage hero is untouched. */

@media (max-width: 860px) {
  /* mobile-shell-v1.0.1 adds 30px here; remove it so hero meets header. */
  .gallery-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow-x: clip !important;
  }

  /* Break out only by the gallery-page's known 18px mobile side padding.
     This is safer than 100vw and avoids scrollbar/safe-area width drift. */
  .gallery-page > .gallery-hero {
    box-sizing: border-box !important;
    width: calc(100% + 36px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 -18px 22px !important;
    padding: 30px max(18px, env(safe-area-inset-right)) 26px max(18px, env(safe-area-inset-left)) !important;
    overflow: visible !important;
  }

  .gallery-page > .gallery-hero .section-kicker,
  .gallery-page > .gallery-hero h1,
  .gallery-page > .gallery-hero > p {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .gallery-page > .gallery-hero h1 {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
  }

  .gallery-page > .gallery-hero > p:last-child {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    font-size: clamp(.96rem, 3.7vw, 1.05rem) !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 380px) {
  /* mobile-shell changes gallery-page side padding from 18px to 14px here. */
  .gallery-page > .gallery-hero {
    width: calc(100% + 28px) !important;
    margin-right: -14px !important;
    margin-left: -14px !important;
    padding: 26px max(14px, env(safe-area-inset-right)) 22px max(14px, env(safe-area-inset-left)) !important;
  }

  .gallery-page > .gallery-hero h1 {
    font-size: clamp(1.9rem, 9.6vw, 2.45rem) !important;
  }
}