/* Calm & Regulation — page-specific styles.
   Artwork hooks and composition tweaks only.
============================================================ */

.s-hero--calm-system {
  --hero-title-measure: 16ch;
}

.s-hero--calm-system .s-hero__inner {
  grid-template-columns: minmax(0, 0.88fr) minmax(340px, 0.9fr);
}

.calm-pattern-grid,
.calm-switch-cards,
.calm-support-steps {
  margin-top: clamp(3rem, 5.5vw, 5rem);
}

.calm-pattern-grid {
  --grid-min: 20rem;
}

.calm-wide-card {
  grid-column: span 2;
}

.calm-note {
  max-width: 980px;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
}

.calm-line-quote {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.calm-line-quote p {
  margin: 0;
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.65rem);
  font-style: normal;
  line-height: 1.12;
}

.calm-line-quote cite {
  display: block;
  max-width: 42ch;
  margin-top: var(--space-4);
  color: var(--section-copy);
}

.calm-split-copy {
  padding-left: clamp(1.5rem, 3vw, 2.8rem);
  border-left: 1px solid var(--section-rule-soft);
}

.calm-switch-cards {
  --grid-min: 16rem;
}

.calm-tags {
  margin-top: var(--space-6);
}

.calm-tags .c-tag {
  border-radius: var(--radius-lg);
}

.calm-support-panel {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.calm-two-column-copy {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
}

.calm-two-column-copy p {
  margin: 0;
}

.calm-safety-note {
  max-width: 980px;
  margin: clamp(1.35rem, 2.5vw, 2rem) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--section-rule);
  color: var(--section-subtle);
  font-size: clamp(0.9rem, 0.88rem + 0.08vw, 0.98rem);
  line-height: 1.65;
}

.calm-rarely-layout {
  --sidebar-width: 0.82fr;
  gap: clamp(3rem, 7vw, 7.5rem);
}

.calm-sticky {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.calm-support-steps {
  --step-min: 22rem;
}

.calm-final-cta .s-cta__panel {
  background: var(--section-panel-bg);
}

.calm-scope-panel .c-eyebrow {
  color: var(--brand-gold);
}

.calm-scope-panel p strong {
  display: block;
  margin-top: var(--space-2);
}

@media (max-width: 880px) {
  .calm-sticky {
    position: static;
  }

  .calm-split-copy {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .calm-wide-card {
    grid-column: auto;
  }

  .s-hero--calm-system .s-hero__inner {
    grid-template-columns: 1fr;
  }
}


/* Phase 2.5 Calm fidelity refinements */

/* Recognising pattern: restore 6-column desktop rhythm:
   first row 3 cards, second row 2 wider cards. */
.calm-pattern-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.35rem);
}

.calm-pattern-grid .c-card {
  grid-column: span 2;
}

.calm-pattern-grid .calm-wide-card {
  grid-column: span 3;
}

/* Why “just relax” may not help: keep heading aligned to top
   and avoid the copy visually floating above it. */
#calm-switch-title {
  margin-top: var(--space-4);
}

#calm-switch-title,
#calm-switch-title + * {
  align-self: start;
}

.calm-split-copy {
  margin-top: 0;
}

/* Panic sensations support panel: restore the vertical divider between copy columns. */
.calm-two-column-copy p + p {
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid rgba(170, 122, 45, 0.24);
}

/* Looking beneath the alarm: stagger cards left/right rather than top/bottom. */
.calm-rarely-layout .l-stack {
  gap: clamp(1rem, 2vw, 1.45rem);
  overflow: visible;
}

.calm-rarely-layout .c-card--offset:nth-child(even) {
  transform: translateX(clamp(0rem, 2.8vw, 2rem));
}

.calm-rarely-layout .c-card--offset:nth-child(even):hover {
  transform: translateX(clamp(0rem, 2.8vw, 2rem));
}

.calm-rarely-layout .c-card--offset:nth-child(odd) {
  transform: translateX(0);
}

/* How support can begin: force 2x2 desktop, then collapse intrinsically. */
.calm-support-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.45rem);
}

.calm-support-steps .c-step__label::after {
  width: 3.6rem;
  background: linear-gradient(90deg, transparent, var(--section-rule), transparent);
}

.calm-note h3 + p {
  margin-top: var(--space-5);
}

/* Final CTA: light section secondary button alignment. */
.calm-final-cta .c-btn--secondary {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-border);
  background: color-mix(in srgb, var(--color-surface) 58%, transparent);
}

.calm-final-cta .c-btn--secondary:hover {
  background: var(--color-accent-dim);
  color: var(--color-accent-hover);
}

@media (max-width: 900px) {
  .calm-pattern-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }

  .calm-pattern-grid .c-card,
  .calm-pattern-grid .calm-wide-card {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .calm-two-column-copy p + p {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(170, 122, 45, 0.24);
  }

  .calm-rarely-layout .c-card--offset:nth-child(even),
  .calm-rarely-layout .c-card--offset:nth-child(even):hover {
    transform: none;
  }
}


/* Alarm cycle diagram refinement v2
   Equal-height cards with shorter, gently curved arrows that sit in the
   spaces between the four desktop cards. Paste after the existing cycle CSS. */
.c-cycle-grid--loop {
  --cycle-arrow-size: clamp(2.15rem, 3.1vw, 3.05rem);
  --cycle-arrow-clearance: clamp(0.35rem, 0.7vw, 0.65rem);
  --cycle-arrow-color: color-mix(in srgb, var(--brand-gold) 68%, var(--brand-navy) 32%);
  --cycle-arrow-shadow: 0 8px 22px color-mix(in srgb, var(--brand-gold) 10%, transparent);
  min-height: auto;
  grid-template-areas:
    "one two"
    "four three";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(3.4rem, 5.4vw, 5.2rem);
  align-items: stretch;
}

.c-cycle-grid--loop .c-cycle-grid__loop {
  display: none;
}

.c-cycle-grid--loop .c-cycle-card {
  height: 100%;
  min-height: clamp(13.25rem, 17vw, 15.75rem);
  overflow: visible;
}

@media (min-width: 761px) {
  .c-cycle-grid--loop .c-cycle-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    display: block;
    width: var(--cycle-arrow-size);
    height: var(--cycle-arrow-size);
    color: var(--cycle-arrow-color);
    background: currentColor;
    filter: drop-shadow(var(--cycle-arrow-shadow));
    opacity: 0.82;
    pointer-events: none;
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M17 58 C34 41 57 40 75 53' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M63 39 L78 54 L61 65' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / contain no-repeat;
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M17 58 C34 41 57 40 75 53' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M63 39 L78 54 L61 65' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  .c-cycle-card--one::after {
    top: 50%;
    right: calc((var(--cycle-arrow-size) + var(--cycle-arrow-clearance)) * -1);
    transform: translateY(-50%);
  }

  .c-cycle-card--two::after {
    left: 50%;
    bottom: calc((var(--cycle-arrow-size) + var(--cycle-arrow-clearance)) * -1);
    transform: translateX(-50%) rotate(90deg);
  }

  .c-cycle-card--three::after {
    top: 50%;
    left: calc((var(--cycle-arrow-size) + var(--cycle-arrow-clearance)) * -1);
    transform: translateY(-50%) rotate(180deg);
  }

  .c-cycle-card--four::after {
    left: 50%;
    top: calc((var(--cycle-arrow-size) + var(--cycle-arrow-clearance)) * -1);
    transform: translateX(-50%) rotate(-90deg);
  }
}

@media (max-width: 760px) {
  .c-cycle-grid--loop {
    min-height: 0;
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--grid-gap);
  }

  .c-cycle-grid--loop .c-cycle-card {
    min-height: 0;
  }

  .c-cycle-grid--loop .c-cycle-card::after {
    display: none;
  }
}