/* =========================================================
   CENTER POINT · CLEARING THE STATIC PAGE
   File: /assets/css/60-clearing-static-page.css

   Purpose:
   - Full Clearing the Static meditation page stylesheet.
   - Includes the page shell, hero image handling, signal callout,
     feature strip, practice-card grid, bottom callouts, footer,
     and responsive behavior.
   - This file is intended to load only on the Clearing the Static page.

   Important:
   - Do not stack older .cp-ot-signal-callout overrides below this file.
   - The signal callout block below supports BOTH:
       1. preferred classed markup:
          .cp-ot-signal-setup / .cp-ot-signal-anchor / .cp-ot-signal-resolve
       2. fallback plain markup:
          three paragraph tags inside .cp-ot-signal-callout
   ========================================================= */


/* =========================================================
   01 · PAGE SHELL
   Outer background, centered sheet, base typography.
   ========================================================= */

.cp-overwhelm-sheet-wrap {
  width: 100%;
  background: #f1eee9;
  padding: 42px 0 34px;
  box-sizing: border-box;
  font-family: Lato, Arial, sans-serif;
  color: #123042;
}

.cp-overwhelm-sheet {
  width: min(calc(100% - 32px), 1180px);
  margin: 0 auto;
  background: #f6efe4;
  box-shadow: 0 8px 28px rgba(20, 18, 14, 0.16);
  box-sizing: border-box;
  overflow: hidden;
}

.cp-overwhelm-sheet * {
  box-sizing: border-box;
}


/* =========================================================
   02 · HERO IMAGE
   Full-width image hero. No forced crop.
   ========================================================= */

.cp-ot-hero,
.cp-ot-hero-image {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #061521;
}

.cp-ot-hero img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}


/* =========================================================
   03 · SIGNAL CALLOUT
   Dark navy banner between hero and feature strip.
   Structure: setup → anchor → resolve.

   Preferred HTML:
   <div class="cp-ot-signal-callout">
     <p class="cp-ot-signal-setup">...</p>
     <p class="cp-ot-signal-anchor">...</p>
     <p class="cp-ot-signal-resolve">...</p>
   </div>

   Fallback supported:
   <div class="cp-ot-signal-callout">
     <p>setup...</p>
     <p>anchor...</p>
     <p>resolve...</p>
   </div>
   ========================================================= */

.cp-overwhelm-sheet .cp-ot-signal-callout {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 155, 56, 0.12), rgba(212, 155, 56, 0) 46%),
    linear-gradient(180deg, #061521 0%, #071722 100%);
  padding: clamp(34px, 4.4vw, 52px) 34px clamp(36px, 4.8vw, 56px);
  text-align: center;
  border: 0;
}

/* Thin gold rules with a small center dot, top and bottom */
.cp-overwhelm-sheet .cp-ot-signal-callout::before,
.cp-overwhelm-sheet .cp-ot-signal-callout::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  pointer-events: none;
  background:
    radial-gradient(circle at center, #d49b38 0 3px, transparent 3.5px) center / 100% 9px no-repeat,
    linear-gradient(
      to right,
      rgba(212, 155, 56, 0.56) 0,
      rgba(212, 155, 56, 0.56) calc(50% - 17px),
      transparent calc(50% - 17px),
      transparent calc(50% + 17px),
      rgba(212, 155, 56, 0.56) calc(50% + 17px),
      rgba(212, 155, 56, 0.56) 100%
    ) center / 100% 1px no-repeat;
}

.cp-overwhelm-sheet .cp-ot-signal-callout::before {
  top: 0;
}

.cp-overwhelm-sheet .cp-ot-signal-callout::after {
  bottom: 0;
}

/* Base paragraph reset inside signal banner */
.cp-overwhelm-sheet .cp-ot-signal-callout p {
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
}

/* Setup line: supports classed or first-paragraph markup */
.cp-overwhelm-sheet .cp-ot-signal-setup,
.cp-overwhelm-sheet .cp-ot-signal-callout p:nth-child(1) {
  max-width: 960px;
  margin-bottom: 16px;
  color: rgba(246, 239, 228, 0.84) !important;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.45;
  font-weight: 400;
  font-style: normal;
}

/* Anchor line: supports classed or second-paragraph markup */
.cp-overwhelm-sheet .cp-ot-signal-anchor,
.cp-overwhelm-sheet .cp-ot-signal-callout p:nth-child(2) {
  max-width: 980px;
  margin-top: 0;
  margin-bottom: 18px;
  color: #d49b38 !important;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Resolve line: supports classed or third-paragraph markup */
.cp-overwhelm-sheet .cp-ot-signal-resolve,
.cp-overwhelm-sheet .cp-ot-signal-callout p:nth-child(3) {
  max-width: 960px;
  color: rgba(246, 239, 228, 0.88) !important;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.45;
  font-weight: 400;
  font-style: normal;
}


/* =========================================================
   04 · FEATURE STRIP
   Six feature tiles directly below the signal banner.
   ========================================================= */

.cp-ot-features {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: #fbf6ec;
  border-bottom: 1px solid rgba(168, 112, 19, 0.35);
}

.cp-ot-feature {
  min-width: 0;
  text-align: center;
  padding: 22px 16px 20px;
  border-right: 1px solid rgba(168, 112, 19, 0.24);
}

.cp-ot-feature:last-child {
  border-right: none;
}

.cp-ot-feature-icon img,
.cp-ot-feature-symbol img {
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: contain;
  margin: 0 auto 12px !important;
}

.cp-ot-feature-title {
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.cp-ot-feature:nth-child(1) .cp-ot-feature-title { color: #2d7387; }
.cp-ot-feature:nth-child(2) .cp-ot-feature-title { color: #64055a; }
.cp-ot-feature:nth-child(3) .cp-ot-feature-title { color: #b46432; }
.cp-ot-feature:nth-child(4) .cp-ot-feature-title { color: #2d6e78; }
.cp-ot-feature:nth-child(5) .cp-ot-feature-title { color: #0f1e46; }
.cp-ot-feature:nth-child(6) .cp-ot-feature-title { color: #a04b23; }

.cp-ot-feature-copy {
  width: min(132px, 100%);
  margin: 8px auto 0;
  font-size: 12px;
  line-height: 1.42;
  color: #526474;
}


/* =========================================================
   05 · MAIN BODY INTRO
   Heading above the practice category cards.
   ========================================================= */

.cp-ot-body {
  background: #f6efe4;
  padding: 32px 26px 0;
}

.cp-ot-main-heading {
  text-align: center;
  margin: 0 0 28px;
}

.cp-ot-main-heading h2 {
  margin: 0 0 10px;
  font-family: Lato, Arial, sans-serif;
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.12;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #0b2a3e;
}

.cp-ot-main-heading p {
  width: min(680px, 100%);
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
  color: #445866;
}


/* =========================================================
   06 · PRACTICE CARD GRID
   Seven category cards with color-coded headings and numbers.
   ========================================================= */

.cp-ot-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.cp-ot-card {
  min-width: 0;
  background: #fffdf8;
  border: 1px solid rgba(168, 112, 19, 0.28);
  border-radius: 8px;
  padding: 20px 16px 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
  display: flex;
  flex-direction: column;
}

.cp-ot-card.opening,
.cp-ot-card.recalibration,
.cp-ot-card.nervous,
.cp-ot-card.hard {
  grid-column: span 3;
}

.cp-ot-card.attention,
.cp-ot-card.identity,
.cp-ot-card.closing {
  grid-column: span 4;
}

.cp-ot-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  min-height: 54px;
}

.cp-ot-icon {
  flex: 0 0 auto;
  line-height: 0;
}

.cp-ot-icon img {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain;
  margin: 0 !important;
}

.cp-ot-card h3 {
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  font-size: 17px;
  line-height: 0.98;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #123042;
}

.cp-ot-card.opening h3 { color: #d57b2a; }
.cp-ot-card.recalibration h3 { color: #14808b; }
.cp-ot-card.nervous h3 { color: #0d4d82; }
.cp-ot-card.hard h3 { color: #7b4b8f; }
.cp-ot-card.attention h3 { color: #a45a22; }
.cp-ot-card.identity h3 { color: #5d7f3a; }
.cp-ot-card.closing h3 { color: #17205a; }

.cp-ot-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cp-ot-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
  margin: 0 0 9px;
  padding: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #203747;
}

.cp-ot-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: -1px;
  border-radius: 999px;
  background: #a97013;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}

.cp-ot-card.opening .cp-ot-number { background: #d57b2a; }
.cp-ot-card.recalibration .cp-ot-number { background: #14808b; }
.cp-ot-card.nervous .cp-ot-number { background: #0d4d82; }
.cp-ot-card.hard .cp-ot-number { background: #7b4b8f; }
.cp-ot-card.attention .cp-ot-number { background: #a45a22; }
.cp-ot-card.identity .cp-ot-number { background: #5d7f3a; }
.cp-ot-card.closing .cp-ot-number { background: #17205a; }

.cp-ot-duration {
  justify-self: end;
  white-space: nowrap;
  color: #597083;
  font-size: 11px;
}

.cp-ot-card-note {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid rgba(168, 112, 19, 0.2);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #4e5e68;
}


/* =========================================================
   07 · BOTTOM CALLOUTS
   Companion course note and overwhelm/interference box.
   ========================================================= */

.cp-ot-bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.58fr);
  gap: 12px;
  margin: 12px 0 0;
}

.cp-ot-companion {
  background: #071722;
  border-radius: 8px;
  padding: 20px 22px;
  color: #f6efe4;
}

.cp-ot-companion h3 {
  margin: 0 0 10px;
  font-family: Lato, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d09a39;
}

.cp-ot-companion p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: #f6efe4;
}

.cp-ot-overwhelm-box {
  background: #fffdf8;
  border: 1px solid rgba(168, 112, 19, 0.45);
  border-radius: 8px;
  padding: 18px 18px 16px;
}

.cp-ot-overwhelm-box h3 {
  margin: 0 0 16px;
  text-align: center;
  font-family: Lato, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #58606a;
}

.cp-ot-overwhelm-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cp-ot-overwhelm-item {
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: #465866;
}

.cp-ot-overwhelm-icon img,
.cp-ot-overwhelm-symbol img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
  margin: 0 auto 8px !important;
}


/* =========================================================
   08 · PAGE FOOTER / FINAL STATEMENT
   Dark closing strip at the bottom of the sheet.
   ========================================================= */

.cp-ot-footer {
  margin: 12px 0 0;
  background: #071722;
  text-align: center;
  padding: 27px 18px 25px;
}

.cp-ot-footer-main {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 3vw, 30px);
  line-height: 1.15;
  font-weight: 700;
  color: #f6efe4;
}

.cp-ot-footer-main span {
  color: #d49b38;
  font-style: italic;
}

.cp-ot-footer-small {
  color: #f6efe4;
  opacity: 0.8;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* =========================================================
   09 · POST-SHEET SIGNUP SUPPORT
   Optional paragraph/form area after the main sheet body.
   ========================================================= */

.cp-overwhelm-sheet > p[style] {
  color: #253747;
  font-size: 14px;
}


/* =========================================================
   10 · RESPONSIVE · TABLET
   Two-row feature strip and two-column practice grid.
   ========================================================= */

@media (max-width: 920px) {
  .cp-ot-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-ot-feature:nth-child(3n) {
    border-right: none;
  }

  .cp-ot-card.opening,
  .cp-ot-card.recalibration,
  .cp-ot-card.nervous,
  .cp-ot-card.hard,
  .cp-ot-card.attention,
  .cp-ot-card.identity,
  .cp-ot-card.closing {
    grid-column: span 6;
  }

  .cp-ot-bottom {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   11 · RESPONSIVE · MOBILE
   Full-width sheet, stacked features, single-column cards.
   ========================================================= */

@media (max-width: 640px) {
  .cp-overwhelm-sheet {
    width: 100%;
  }

  .cp-overwhelm-sheet-wrap {
    padding: 0;
  }

  .cp-overwhelm-sheet .cp-ot-signal-callout {
    padding: 28px 20px 32px;
  }

  .cp-overwhelm-sheet .cp-ot-signal-setup,
  .cp-overwhelm-sheet .cp-ot-signal-resolve,
  .cp-overwhelm-sheet .cp-ot-signal-callout p:nth-child(1),
  .cp-overwhelm-sheet .cp-ot-signal-callout p:nth-child(3) {
    font-size: 15px;
    line-height: 1.52;
  }

  .cp-overwhelm-sheet .cp-ot-signal-setup,
  .cp-overwhelm-sheet .cp-ot-signal-callout p:nth-child(1) {
    margin-bottom: 12px;
  }

  .cp-overwhelm-sheet .cp-ot-signal-anchor,
  .cp-overwhelm-sheet .cp-ot-signal-callout p:nth-child(2) {
    margin-bottom: 13px;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  .cp-ot-features {
    grid-template-columns: 1fr;
  }

  .cp-ot-feature {
    border-right: none;
    border-bottom: 1px solid rgba(168, 112, 19, 0.18);
  }

  .cp-ot-body {
    padding: 28px 16px 0;
  }

  .cp-ot-main-heading h2 {
    letter-spacing: 0.13em;
  }

  .cp-ot-card.opening,
  .cp-ot-card.recalibration,
  .cp-ot-card.nervous,
  .cp-ot-card.hard,
  .cp-ot-card.attention,
  .cp-ot-card.identity,
  .cp-ot-card.closing {
    grid-column: span 12;
  }

  .cp-ot-card-head {
    align-items: center;
  }

  .cp-ot-overwhelm-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}