/*
 * Essex SDS Hub — tablet / small-laptop layout (641 – 1023 px).
 * Not drawn in Figma: it bridges the phone frame (390) and the desktop
 * frame (1280) by reflowing the multi-column blocks that no longer fit,
 * while keeping the desktop type scale and spacing tokens.
 */

@media (min-width: 641px) and (max-width: 1023px) {
  :root {
    --margin: 32px;
    --section-pad: 56px;
  }

  /* ---------- Hero ---------- */
  .hero {
    min-height: 480px;
  }
  .hero__cta {
    max-width: 60%;
  }

  /* ---------- Our plan: heading above the intro ---------- */
  .plan__head {
    flex-direction: column;
    gap: 16px;
  }
  .plan__head h2,
  .plan__head p {
    width: 100%;
    max-width: 640px;
  }
  .plan__head p br {
    display: none;
  }
  .plan__embed {
    aspect-ratio: 4 / 3;
  }

  /* ---------- About: number on its own line, title + copy side by side ---------- */
  .about {
    align-items: stretch;
  }
  .about__intro {
    width: 100%;
  }
  .about-row {
    flex-wrap: wrap;
    gap: 16px var(--gutter);
  }
  .about-row__num {
    width: 100%;
  }
  .about-row__body {
    width: 100%;
    max-width: none;
  }
  .about-row__body h2 {
    width: 40%;
    max-width: none;
  }
  .about-row__body p {
    width: 56%;
    max-width: none;
  }

  /* ---------- Digital Place Portrait: tighter columns, wider open column ---------- */
  .dpp {
    padding-top: 140px;
    gap: 160px;
  }
  .themes {
    --theme-pad: 12px;
    --theme-open-w: 40.5vw;
    height: clamp(520px, 80vw, 720px);
  }
  .theme {
    padding-block: 20px;
  }
  .theme.is-open {
    --theme-pad: 20px;
  }
  .themes.has-open .theme {
    width: 8.5%;
  }
  .themes.has-open .theme.is-open {
    width: 40.5%;
  }
  .theme__num,
  .theme__title {
    font-size: 18px;
  }
  .theme__head {
    gap: 24px;
  }

  /* ---------- Footer: logo row, then the main block full width ---------- */
  .footer__grid {
    flex-wrap: wrap;
    gap: 32px;
  }
  .footer__main {
    width: 100%;
    min-height: 0;
  }
  .footer__top {
    gap: 40px;
  }
  .footer__contact {
    width: auto;
    flex: 1 1 0;
  }
  .footer__mid {
    flex: 1 1 0;
  }
  .footer__settings p {
    width: auto;
  }
  .footer__bottom-left {
    gap: 40px;
  }
  .footer__hwb,
  .footer__copy {
    width: auto;
    flex: 1 1 0;
  }

  /* ---------- Menu: photo takes the right third ---------- */
  .menu__photo {
    left: 62%;
  }
  .menu__foot {
    width: 100%;
    max-width: 58%;
  }

  /* ---------- Settings sheet: intro above the toggles ---------- */
  .settings__grid {
    flex-direction: column;
    gap: 32px;
  }
  .settings__intro {
    width: 100%;
    gap: 32px;
    padding-right: 48px;
  }
  .settings__options {
    width: 100%;
  }
}