/* CEO Spring Break responsive layer.
   The page markup carries inline styles from the design-tool export, so the
   overrides below use !important to win the cascade against those inline
   declarations. Class hooks are added in index.html / about.html only; no
   inline style was rewritten, so desktop fidelity to the export is untouched.

   Breakpoints: 1024px (tight desktop), 900px (tablet), 640px (phone). */

/* Nothing should ever push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

/* ============================================================
   TABLET AND DOWN
   ============================================================ */
@media (max-width: 1024px) {
  .csb-section,
  .csb-hero,
  .csb-footer,
  .csb-strip,
  .csb-intro-copy,
  .csb-waitlist-wrap,
  .csb-about-grid {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .csb-header {
    padding-left: 32px !important;
    padding-right: 32px !important;
    gap: 20px !important;
  }

  /* Three-up card grids drop to two. */
  .csb-grid-3 { grid-template-columns: 1fr 1fr !important; }

  .csb-grid-2 { gap: 40px !important; }

  /* Below full desktop the hero copy runs wide enough to collide with the
     bottom-right corner pattern, so that one drops out. The top-left corner
     carries the pattern on its own. */
  .csb-accent--hero { width: 130px !important; }
  .csb-accent--hero-br { display: none !important; }
}

/* ============================================================
   TABLET / LARGE PHONE
   ============================================================ */
@media (max-width: 900px) {
  .csb-section,
  .csb-hero,
  .csb-footer,
  .csb-strip,
  .csb-intro-copy,
  .csb-waitlist-wrap,
  .csb-about-grid {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .csb-section { padding-top: 48px !important; padding-bottom: 56px !important; gap: 32px !important; }
  .csb-hero { padding-top: 56px !important; }

  /* Two-up layouts stack: copy above, image below. */
  .csb-grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .csb-side-img { min-height: 300px !important; height: 300px !important; }

  /* Photo strip: the staggered third column reads as clutter here. */
  .csb-strip { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .csb-strip > div:nth-child(2) { margin-top: 0 !important; }
  .csb-strip > div:nth-child(3) { display: none !important; }

  .csb-heading h2 { font-size: 1.875rem !important; }

  /* About page: fixed 380px portrait column overflowed the viewport. */
  .csb-about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .csb-portrait-wrap { min-width: 0 !important; }
  .csb-portrait,
  .csb-portrait img { width: 100% !important; max-width: 420px !important; height: 420px !important; }
  .csb-about-title { font-size: 44px !important; }

  .csb-edge { height: 44px !important; }
}

/* ============================================================
   PHONE
   ============================================================ */
@media (max-width: 640px) {
  .csb-section,
  .csb-hero,
  .csb-footer,
  .csb-strip,
  .csb-intro-copy,
  .csb-waitlist-wrap,
  .csb-about-grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---- Header: logo + nav on row one, IG button full width below ---- */
  .csb-header {
    padding: 14px 20px !important;
    gap: 14px !important;
    row-gap: 12px !important;
  }
  .csb-header .csb-logo { width: 96px !important; }
  .csb-header-nav {
    gap: 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }
  .csb-header-cta {
    order: 3 !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    padding: 10px 16px !important;
  }

  /* ---- Hero ---- */
  .csb-hero {
    padding-top: 44px !important;
    padding-bottom: 92px !important;
    gap: 18px !important;
  }
  .csb-hero-eyebrow { font-size: 13px !important; letter-spacing: 0.1em !important; }
  .csb-hero-title { font-size: clamp(34px, 11vw, 52px) !important; }
  .csb-hero-sub { font-size: 17px !important; }
  /* The top-left corner still frames the type at this size. */
  .csb-accent--hero { width: 88px !important; }
  .csb-form-title { font-size: 21px !important; }

  /* ---- Waitlist form ---- */
  .csb-waitlist-wrap { margin-top: -56px !important; }
  .csb-waitlist-card { padding: 24px 20px !important; }
  .csb-form-title { font-size: 23px !important; }
  .csb-form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .csb-form-row > label { min-width: 0 !important; width: 100% !important; }
  .csb-form-row > button { width: 100% !important; margin-top: 4px !important; }
  .csb-form-success-title { font-size: 23px !important; }

  /* ---- Photo strip: one full-width image ---- */
  .csb-strip {
    grid-template-columns: 1fr !important;
    padding-top: 32px !important;
    padding-bottom: 8px !important;
  }
  .csb-strip > div,
  .csb-strip > div > img { height: 230px !important; }
  .csb-strip > div:nth-child(2) { display: none !important; }

  .csb-intro-copy { font-size: 16px !important; padding-bottom: 40px !important; }

  /* ---- Sections and cards ---- */
  .csb-section {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
    gap: 28px !important;
  }
  .csb-grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .csb-card { padding: 24px 20px !important; }
  .csb-card-title { font-size: 22px !important; }
  .csb-heading h2 { font-size: 1.625rem !important; }
  .csb-eyebrow { font-size: 13px !important; letter-spacing: 0.1em !important; }

  /* Numbered "you don't have to do this alone" list */
  .csb-numbered-row { gap: 14px !important; }
  .csb-numbered-num { font-size: 30px !important; width: 34px !important; }
  .csb-numbered-row p { font-size: 16px !important; }
  .csb-side-img { min-height: 240px !important; height: 240px !important; }

  /* Quotes */
  .csb-grid-2--quotes { gap: 36px !important; }
  .csb-quote .csb-quote-mark { font-size: 3.5rem !important; }
  .csb-quote blockquote { font-size: 1.0625rem !important; }
  .csb-quote figcaption { font-size: 0.8125rem !important; }

  /* Buttons: comfortable tap targets */
  .csb-btn--md { font-size: 1rem !important; padding: 14px 24px !important; }

  /* ---- About page ---- */
  .csb-about-grid { padding-top: 48px !important; padding-bottom: 56px !important; }
  .csb-portrait,
  .csb-portrait img { height: 340px !important; max-width: 100% !important; }
  /* The portrait goes full width here, so the arch behind it only shows as
     slivers past the edges. Cleaner to drop it. */
  .csb-accent--portrait { display: none !important; }
  .csb-about-title { font-size: 34px !important; }
  .csb-about-copy { font-size: 16px !important; }
  .csb-principle-num { font-size: 30px !important; }

  .csb-edge { height: 32px !important; }

  /* ---- Footer ---- */
  .csb-footer { padding: 40px 20px !important; gap: 20px !important; }
  .csb-footer .csb-logo { width: 150px !important; }
  .csb-footer-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 20px !important;
    font-size: 12px !important;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .csb-hero-title { font-size: 32px !important; }
  .csb-header .csb-logo { width: 86px !important; }
  .csb-header-nav { gap: 14px !important; font-size: 11px !important; }
}