/* Pacific Blueprint: tablet and phone layout.
   The pages use inline styles, so these overrides match on them and need !important. */

/* Menu button: hidden on desktop */
.pb-burger { display: none; }
.pb-menu { display: none; }

/* ================= Tablet (≤ 1024px) ================= */
@media (max-width: 1024px) {
  .wrap { padding-left: 32px !important; padding-right: 32px !important; }
  /* ---------- Nav ---------- */
  body > div > div:first-child {
    padding: 14px 32px !important; flex-wrap: wrap; row-gap: 10px;
  }
  body > div > div:first-child > img { height: 52px !important; }
  .pb-nav.is-scrolled > img { height: 44px !important; }
  /* Without the script: links wrap under the logo so they still work */
  body > div > div:first-child > div:not(.pb-menu) {
    order: 3; width: 100%; gap: 18px !important; font-size: 12px !important; flex-wrap: wrap;
  }
  body > div > div:first-child > .btn { padding: 11px 16px; font-size: 11px; }
  /* With the script: links + button move into a dropdown */
  .pb-has-menu > div:not(.pb-menu), .pb-has-menu > .btn { display: none !important; }
  .pb-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 0; border-radius: 50%; padding: 0;
    background: #063B5C; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .pb-burger span, .pb-burger span::before, .pb-burger span::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: #F7F5F0;
    position: relative; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s;
  }
  .pb-burger span::before, .pb-burger span::after { content: ""; position: absolute; left: 0; }
  .pb-burger span::before { top: -6px; }
  .pb-burger span::after { top: 6px; }
  .pb-burger[aria-expanded="true"] span { background: transparent; }
  .pb-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .pb-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

  .pb-menu {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 32px 24px; background: #F7F5F0;
    box-shadow: 0 18px 30px -18px rgba(6, 59, 92, 0.35);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
  }
  .pb-menu.is-open { opacity: 1; transform: none; visibility: visible; }
  .pb-menu a:not(.btn) {
    padding: 14px 0; border-bottom: 1px solid #E4E1D8;
    font-family: 'DM Serif Display', Georgia, serif; font-size: 24px; color: #063B5C;
  }
  .pb-menu a:not(.btn) { text-transform: lowercase; }
  .pb-menu a:not(.btn)::first-letter { text-transform: uppercase; }
  .pb-menu a[aria-current="page"] { color: #D39A38; }
  .pb-menu .btn { justify-content: center; margin-top: 18px; padding: 16px 20px; }

  /* Buttons keep their label on one line */
  .btn { white-space: nowrap; }
  div[style*="gap: 24px; margin-top: 6px"] { flex-wrap: wrap; row-gap: 18px !important; }

  /* Programs: 4 across → 2 across */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Four stages: wrap into a 2 × 2 grid, drop the dashed connectors */
  div[style*="justify-content: center; gap: 0"] { flex-wrap: wrap !important; row-gap: 40px !important; }
  div[style*="justify-content: center; gap: 0"] > div { flex: 0 0 50% !important; justify-content: center !important; }
  div[style*="repeating-linear-gradient"] { display: none !important; }
}

/* ================= Phone (≤ 760px) ================= */
@media (max-width: 760px) {
  body { -webkit-text-size-adjust: 100%; }
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---------- Nav ---------- */
  body > div > div:first-child { padding-left: 20px !important; padding-right: 20px !important; }
  .pb-menu { padding-left: 20px; padding-right: 20px; }

  /* ---------- Type scale ---------- */
  h1, h1[style] { font-size: 33px !important; line-height: 1.2 !important; }
  h2[style*="font-size: 3"] { font-size: 27px !important; line-height: 1.3 !important; }
  h2[style*="font-size: 26px"] { font-size: 23px !important; }
  [style*="Caveat"][style*="font-size: 30px"], [style*="Caveat"][style*="font-size: 26px"] { font-size: 24px !important; }
  p[style*="font-size: 24px"], p[style*="font-size: 22px"] { font-size: 20px !important; }
  .pb-marquee { padding: 16px 0; }
  .pb-marquee-group { gap: 26px; padding-right: 26px; }
  .pb-marquee-group span { font-size: 20px; }

  /* ---------- Section spacing ---------- */
  [style*="padding: 96px 0"], [style*="padding: 88px 0"], [style*="padding: 84px 0"],
  [style*="padding: 90px 0"], [style*="padding: 72px 0"], [style*="padding: 76px 0"] {
    padding-top: 56px !important; padding-bottom: 56px !important;
  }
  [style*="padding-bottom: 96px"] { padding-bottom: 64px !important; }
  [style*="padding-bottom: 76px"] { padding-bottom: 52px !important; }
  [style*="padding: 20px 0 88px"] { padding-bottom: 56px !important; }
  [style*="margin-bottom: 56px"], [style*="margin-bottom: 52px"] { margin-bottom: 36px !important; }

  /* ---------- Side-by-side layouts stack ---------- */
  [style*="gap: 56px"], [style*="gap: 64px"] {
    flex-direction: column !important; align-items: stretch !important; gap: 36px !important;
  }
  [style*="gap: 56px"] > *, [style*="gap: 64px"] > * { flex: 0 0 auto !important; width: 100%; max-width: 100% !important; }
  [style*="gap: 56px"] > [style*="border-radius: 50%"], [style*="gap: 64px"] > [style*="flex: 0 0 120px"] { width: auto; }
  [style*="flex: 0 0 auto; display: flex; flex-direction: column; align-items: center"] { width: auto !important; align-self: flex-start; flex-direction: row !important; }
  /* About photo stays portrait-sized */
  [style*="flex: 0 0 280px"] { max-width: 260px !important; }

  /* Grids → single column */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }

  /* Cards breathe less */
  [style*="padding: 40px 44px"] { padding: 28px 22px !important; }
  [style*="padding: 36px 32px"] { padding: 28px 24px !important; }

  /* ---------- Home hero ---------- */
  .wrap[style*="padding-top: 44px"] { padding-top: 20px !important; }
  div[style*="height: 460px"] { height: 340px !important; }
  .pb-badge, div[style*="width: 168px; height: 168px"] {
    width: 128px !important; height: 128px !important; left: 14px !important; bottom: -30px !important; padding: 14px !important;
  }
  .pb-badge p { font-size: 11.5px !important; }
  div[style*="gap: 24px; margin-top: 6px"] { flex-wrap: wrap; row-gap: 18px !important; }

  /* Four stages: 2 × 2 on phones too, a bit tighter */
  div[style*="justify-content: center; gap: 0"] > div > div { width: 100% !important; padding: 0 8px; }

  /* "Not sure where you belong?" rows stack */
  .pb-row, div[style*="padding: 22px 30px"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 18px 20px !important;
  }
  .pb-row > span, div[style*="padding: 22px 30px"] > span { white-space: normal !important; }
  .pb-row:hover { padding-left: 20px !important; }

  /* Contact */
  input, textarea { font-size: 16px !important; } /* stops iOS zooming into fields */
  a[href^="mailto:"] { word-break: break-word; }

  /* FAQ */
  .faq summary { font-size: 16px !important; }
}

/* Touch screens: no sticky hover shifts */
@media (hover: none) {
  .pb-row:hover { padding-left: 30px !important; background: transparent; }
  .pb-card:hover { --ty: 0px; box-shadow: none; }
}
@media (hover: none) and (max-width: 760px) {
  .pb-row:hover { padding-left: 20px !important; }
}