/* Tablet and small-desktop responsive layout adjustments. */
@media (max-width: 1120px) {
  .home-hero {
    padding-top: 0;
  }

  h1 {
    font-size: 2.95rem;
  }

  h2 {
    font-size: 2.35rem;
  }

  .program-grid,
  .update-grid,
  .event-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .program-card,
  .program-card:first-child {
    grid-column: auto;
  }

  .program-grid > :last-child:nth-child(3n + 1),
  .update-grid > :last-child:nth-child(3n + 1),
  .event-grid > :last-child:nth-child(3n + 1) {
    grid-column: span 3;
  }

  .program-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .program-card,
  .program-card:first-child {
    grid-column: span 2;
  }

  .program-grid > :nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
  }

  .program-grid > :last-child:nth-child(3n + 1) {
    grid-column: 3 / span 2;
  }

  .program-grid > :last-child:nth-child(3n + 2) {
    grid-column: 4 / span 2;
  }

}

@media (max-width: 1020px) {
  .hero-intro-copy {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .hero-intro-copy::after {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-height: 0;
    margin: 0;
    border-top: 1px dashed rgba(13, 111, 167, 0.22);
    border-left: 0;
  }

  .hero-intro-copy .eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-intro-copy h1 {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 1080px) {
  .nav {
    gap: 10px;
  }

  .nav-links {
    gap: 3px;
  }

  .nav-links a,
  .nav-group > summary {
    padding-inline: 8px;
    font-size: 0.86rem;
  }

  .account-button {
    padding-inline: 8px;
    font-size: 0.86rem;
  }
}

@media (max-width: 900px) {
  .nav {
    min-height: 66px;
    gap: 10px;
  }

  .nav-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    display: block;
    margin-left: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
  }

  .nav-toggle span:not(.sr-only) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--navy);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: opacity 170ms ease, transform 170ms ease;
  }

  .nav-toggle span:not(.sr-only):nth-of-type(2) {
    transform: translate(-50%, -50%) translateY(-6px);
  }

  .nav-toggle span:not(.sr-only):nth-of-type(4) {
    transform: translate(-50%, -50%) translateY(6px);
  }

  .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(2) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(3) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.2);
  }

  .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(4) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    top: 66px;
    right: 16px;
    left: 16px;
    display: none;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }

  .nav-edit-item {
    width: 100%;
    display: grid;
  }

  .nav-edit-item > a,
  .nav-edit-item > .nav-group {
    width: 100%;
  }

  .account-button {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    margin-left: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(13, 111, 167, 0.12);
  }

  .account-nav-sign-out {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 12px;
  }

  .nav-links.is-open {
    display: grid;
  }

  .nav-links a {
    justify-content: flex-start;
    width: 100%;
    padding: 12px;
  }

  .nav-group {
    width: 100%;
  }

  .nav-group > summary {
    justify-content: flex-start;
    padding: 12px;
  }

  .nav-submenu {
    position: relative;
    top: auto;
    left: auto;
    min-width: 0;
    margin: 4px 0 10px;
    padding: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 250, 246, 0.94)) padding-box,
      linear-gradient(135deg, rgba(200, 63, 61, 0.44), rgba(201, 151, 53, 0.36), rgba(47, 109, 85, 0.4), rgba(13, 111, 167, 0.44)) border-box;
    border-width: 1px;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-submenu a {
    padding: 11px 12px;
  }

  .nav-submenu-edit-item {
    width: 100%;
  }

  .admin-onsite-editing .nav-links.is-onsite-navigation-editing {
    max-height: calc(var(--modal-vh, 100vh) - 88px);
    overflow-y: auto;
  }

  .admin-onsite-editing .nav-edit-item.admin-inline-edit-target--nav {
    width: 100%;
    justify-items: stretch;
  }

  .admin-inline-edit-controls--nav {
    right: 6px;
  }

  .nav-group:not([open]):hover .nav-submenu {
    display: none;
  }

  .nav-group[open] .nav-submenu {
    display: grid;
  }

  .quick-info,
  .director,
  .feature,
  #summer,
  .feature-alt,
  .closures,
  .donate,
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .home-hero {
    grid-template-areas:
      "photo photo photo"
      ". headline ."
      ". board .";
    padding: 0 0 42px;
  }

  .hero-intro-copy {
    grid-area: headline;
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin: -36px auto 0;
    padding: 22px 20px 24px;
  }

  .hero-intro-copy::before {
    height: 4px;
  }

  .hero-intro-copy h1 {
    max-width: 850px;
    color: var(--navy);
    font-size: 2.24rem;
    text-shadow: none;
  }

  .hero-intro-copy .eyebrow {
    margin-bottom: 0;
    color: rgba(16, 38, 61, 0.68);
  }

  .hero-board {
    width: 100%;
    padding: 30px;
  }

  .hero-board .hero-board-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-board .hero-board-cards .quick-note,
  .hero-board .hero-board-cards .quick-note:nth-child(4),
  .hero-board .hero-board-cards .quick-note:nth-child(5) {
    grid-column: auto;
  }

  .hero-board .hero-board-cards .quick-note:nth-child(5) {
    width: min(100%, 420px);
    justify-self: center;
    grid-column: 1 / -1;
  }

  .split {
    width: 100%;
    grid-template-columns: minmax(20px, 1fr) minmax(0, min(var(--max), calc(100% - 40px))) minmax(20px, 1fr);
    margin: 0;
    padding: 72px 0;
    background: var(--pattern-notebook);
    background-position: 22px 0, 0 0, 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .split > div:first-child,
  .split > div:last-child {
    grid-column: 2;
  }

  .enrollment-intro {
    grid-template-columns: 1fr;
  }

  .resource-grid,
  .info-columns,
  .program-grid,
  .update-grid,
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-panel.enrollment-form-panel,
  .info-panel.reading-panel,
  .info-panel.support-flyer-panel,
  .info-panel.transportation-panel,
  .info-columns > .program-basics-panel:last-child {
    grid-column: span 2;
  }

  .guardian-cards,
  .enrollment-grid-3,
  .enrollment-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .span-3 {
    grid-column: span 2;
  }

  .program-card,
  .program-card:first-child {
    grid-column: auto;
  }

  .transport-list {
    grid-template-columns: 1fr;
  }

  .resource-grid > :last-child,
  .program-grid > :last-child,
  .update-grid > :last-child,
  .event-grid > :last-child {
    grid-column: auto;
  }

  .resource-grid > :last-child:nth-child(2n + 1),
  .resource-grid > :last-child:nth-child(3n + 1),
  .program-grid > :last-child:nth-child(2n + 1),
  .program-grid > :last-child:nth-child(3n + 1),
  .update-grid > :last-child:nth-child(2n + 1),
  .update-grid > :last-child:nth-child(3n + 1),
  .update-grid > :last-child:nth-child(4n + 1),
  .event-grid > :last-child:nth-child(2n + 1),
  .event-grid > :last-child:nth-child(3n + 1),
  .event-grid > :last-child:nth-child(4n + 1) {
    grid-column: auto;
  }

  .program-grid > :nth-last-child(2):nth-child(3n + 1),
  .program-grid > :last-child:nth-child(3n + 1),
  .program-grid > :last-child:nth-child(3n + 2) {
    grid-column: auto;
  }

  .resource-grid > :last-child:nth-child(2n + 1),
  .program-grid > :last-child:nth-child(2n + 1),
  .update-grid > :last-child:nth-child(2n + 1),
  .event-grid > :last-child:nth-child(2n + 1) {
    grid-column: span 2;
  }

  .program-grid > :last-child:nth-child(2n + 1) {
    width: min(100%, 520px);
    justify-self: center;
    grid-column: 1 / -1;
  }

  .donate-inner {
    grid-template-columns: 1fr;
  }

  .donate-copy {
    max-width: none;
  }

  .donate-media-panel {
    justify-items: start;
  }

  .donate-gallery {
    width: min(100%, 420px);
    justify-self: start;
  }

  #summer {
    justify-items: center;
  }

  #summer .feature-copy {
    width: min(100%, 720px);
  }

  #summer .flyer {
    width: min(100%, 440px);
    justify-self: center;
  }
}