/* Phone mode (Group 12): homepage only, below 1024px wide.
   Media queries can't read CSS variables, so widths are written here. */
@layer layout {
  @media (width < 1024px) {
    /* The homepage scrolls like a normal page */
    html.is-home,
    html.is-home body {
      height: auto;
      overflow: visible;
    }

    .is-home .frame {
      height: auto;
      min-height: 100vh;
      min-height: 100dvh;
      grid-template-rows:
        minmax(var(--header-top-h), auto)
        minmax(var(--header-nav-h), auto)
        1fr
        minmax(var(--footer-h), auto);
    }

    .is-home .site-main {
      overflow: visible;
    }

    .is-home .main__inner {
      height: auto;
    }

    /* Boxes stack in one column and grow to fit */
    .is-home .home-grid {
      grid-template-columns: 1fr;
      height: auto;
    }

    .is-home .slot:not(:has(.box)) {
      display: none;
    }
  }

  /* Phones: a little less space around the edges than tablets */
  @media (width < 600px) {
    .is-home .site-main {
      padding: var(--space-2);
    }
  }
}

/* Every page below 1024px: bands grow when they need room */
@layer layout {
  @media (width < 1024px) {
    .frame {
      grid-template-rows:
        minmax(var(--header-top-h), auto)
        minmax(var(--header-nav-h), auto)
        1fr
        minmax(var(--footer-h), auto);
    }
  }
}

@layer components {
  @media (width < 1024px) {
    /* Header 2: tabs wrap onto a second row, centered */
    .nav-tabs {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 0;
    }

    /* Finger-sized tap area; the tab looks the same */
    .nav-tab {
      display: inline-flex;
      align-items: center;
      min-height: var(--tap-min);
      padding-inline: var(--space-2);
    }
  }

  /* Phones: footer items stack, centered, same order.
     Blog post pages keep their row so the post keeps its room. */
  @media (width < 700px) {
    html:not(.is-canvas) .footer__inner {
      flex-direction: column;
      justify-content: center;
      gap: var(--space-2);
      padding-block: var(--space-3);
      text-align: center;
    }
  }
}