/*
 * Tablet Portrait - 820px
 * Breakpoint: 768px - 1023px
 * Special positioning: Logo nudged higher (30vh padding-top) to avoid background interference
 * Gallery: Shows 9 images (all images visible)
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .background-container {
    background-image: url("../assets/820px/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;
  }

  .site-name {
    width: 327px;
    height: 54px;
  }

  .menu-link-img {
    width: 72px;
    height: 17px;
  }

  .close-img {
    width: 84px;
    height: 17px;
  }

  .menu-logo-img {
    width: 101px;
    height: 17px;
  }

  .home-logo-img {
    width: 101px;
    height: 17px;
  }

  .menu-nav-link {
    font-size: 24px;
    line-height: 34px;
  }

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

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

  .sign-up {
    width: 106px;
    height: 31px;
  }

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

  .nav-links {
    right: 36px;
  }

  .menu-close {
    right: 36px;
  }

  .menu-logo {
    left: 36px;
  }

  .home-logo {
    left: 36px;
  }

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

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

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