/*
 * Mobile Portrait - 360px
 * Breakpoint: max-width 479px
 * Special positioning: Logo nudged higher (40vh padding-top) to avoid background interference
 * Uses special background: "bg.jpg"
 * Gallery: Shows 7 images (hides images 8-9)
 */
@media screen and (max-width: 479px) {
  .background-container {
    background-image: url("../assets/360px/bg.jpg");
    background-attachment: scroll;
    /* Prevent background zoom on iOS address bar show/hide */
    height: 100vh;
    min-height: 100vh;
  }

  /* Nudge logo higher to avoid bg image interference */
  .main-container {
    justify-content: flex-start;
    padding-top: 40vh;
  }

  /* Logo size for 360px */
  .site-name {
    width: 177px;
    height: 29px;
    margin-top: 50px;
  }

  /* Menu link size for 360px */
  .menu-link-img {
    width: 50px;
    height: 12px;
  }

  /* Close button size for 360px */
  .close-img {
    width: 58px;
    height: 12px;
  }

  /* Menu logo size for 360px */
  .menu-logo-img {
    width: 71px;
    height: 12px;
  }

  /* Menu nav link size for 360px */
  .menu-nav-link {
    font-size: 16px;
    line-height: 26px;
  }

  #about p,
  #contact p {
    font-size: 14px;
    line-height: 20px;
  }

  #about p {
    width: 100%;
    margin-bottom: 14px;
  }

  .sign-up {
    height: 21px;
  }

  #contact p {
    margin-bottom: 0px;
  }

  .home-logo-img {
    width: 71px;
    height: 12px;
  }

  .nav-links {
    top: 14px;
  }

  .home-logo {
    top: 14px;
    left: 20px;
  }

  .menu-close {
    top: 14px;
  }

  .menu-logo {
    top: 14px;
    left: 20px;
  }

  /* Gallery wrapper: override picture width for 36px horizontal gutters */
  .gallery-wrapper picture {
    width: calc(100% - 40px);
  }

  .gallery-wrapper {
    padding-top: 33px;
  }

  /* Hide gallery images 8-9 for 360px (only shows 7 images) */
  .gallery-section[data-gallery-image="8"],
  .gallery-section[data-gallery-image="9"] {
    display: none;
  }

  /* Adjust stack container height for hidden sections (9 total: 1 about + 7 gallery + 1 contact) */
  .stack-container {
    height: calc(9 * 100vh);
  }

  /* Mailchimp Modal adjustments for mobile */
  .mailchimp-modal-content {
    padding: 20px;
  }

  .mailchimp-close {
    top: 10px;
    right: 10px;
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
}