/* =========================================
   PSYCHOLOGY PAGE — psychology.css
   ========================================= */

/* ── HERO ────────────────────────────────── */

.psych-hero {
  padding:    80px 48px 0;
  position:   relative;
  overflow:   hidden;
}

.psych-hero__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   64px;
  align-items:           end;
  padding-bottom:        64px;
  border-bottom:         1px solid var(--border);
}

.psych-kicker {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  color:          var(--blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:  20px;
}

.psych-kicker::before {
  content:    "";
  width:      20px;
  height:     1.5px;
  background: var(--blue);
  border-radius: 2px;
}

.psych-hero__title {
  font-size:      clamp(3rem, 5.5vw, 6rem);
  line-height:    0.94;
  letter-spacing: -0.07em;
  font-weight:    300;
  color:          var(--text-primary);
  margin-bottom:  24px;
}

.psych-hero__title span { color: var(--blue); }

.psych-hero__tagline {
  font-size:   1.1rem;
  line-height: 1.7;
  color:       var(--text-secondary);
  max-width:   44ch;
}

.psych-hero__right {
  display:        flex;
  flex-direction: column;
  gap:            48px;
  padding-bottom: 8px;
}

.psych-hero__desc {
  font-size:   16px;
  line-height: 1.80;
  color:       var(--text-secondary);
}

/* ── HERO STATS ──────────────────────────── */

.psych-hero__stats {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1px;
  background:            var(--border);
  border:                1px solid var(--border);
  border-radius:         var(--radius-md);
  overflow:              hidden;
}

.psych-stat {
  background: rgba(255,255,255,0.70);
  padding:    20px;
  transition: background var(--t-fast) ease;
}

.psych-stat:hover { background: rgba(26,70,201,0.03); }

.psych-stat__value {
  display:        block;
  font-size:      2rem;
  font-weight:    700;
  letter-spacing: -0.05em;
  color:          var(--blue);
  line-height:    1;
  margin-bottom:  4px;
}

.psych-stat__label {
  font-size:   12px;
  color:       var(--text-muted);
  line-height: 1.4;
}

/* ── CATEGORY FILTER ─────────────────────── */

.psych-filter {
  display:         flex;
  gap:             8px;
  flex-wrap:       nowrap;
  align-items:     center;
  position:        sticky;
  top:             0;
  z-index:         80;
  background:      #f5f5f3;
  border-bottom:   1px solid var(--border);
  border-top:      1px solid var(--border);
  transition:      top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x:      auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* scroll padding */
  padding:         12px 48px;
}

.psych-filter::-webkit-scrollbar { display: none; }

/* never wrap individual buttons */
.psych-filter__btn { flex-shrink: 0; }

/* when nav is visible, push filter bar down */
body:not(.nav-hidden) .psych-filter {
  top: 72px;
}

.psych-filter__label {
  font-size:      11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-right:   8px;
}

.psych-filter__btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         7px 14px;
  border:          1.5px solid var(--border);
  border-radius:   var(--radius-pill);
  background:      transparent;
  font-size:       12px;
  font-weight:     500;
  color:           var(--text-muted);
  cursor:          pointer;
  font-family:     var(--font-primary);
  transition:
    border-color var(--t-fast) ease,
    color        var(--t-fast) ease,
    background   var(--t-fast) ease;
}

.psych-filter__btn:hover,
.psych-filter__btn.is-active {
  border-color: var(--blue);
  color:        var(--blue);
  background:   rgba(26,70,201,0.06);
}

.psych-filter__icon {
  font-size: 13px;
  opacity:   0.7;
}

/* ── PRINCIPLES GRID ─────────────────────── */

.psych-grid {
  padding: 56px 48px 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:     20px;
}

/* ── PRINCIPLE CARD ──────────────────────── */

.psych-card {
  position:       relative;
  background:     #ffffff;
  border:         1px solid var(--border);
  border-radius:  20px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  cursor:         pointer;
  transition:
    transform    0.4s var(--ease-out),
    box-shadow   0.4s ease,
    border-color 0.3s ease;
}

.psych-card:hover {
  transform:    translateY(-5px);
  box-shadow:   0 20px 60px rgba(26,70,201,0.10);
  border-color: rgba(26,70,201,0.22);
}

/* COLOR ACCENT TOP STRIP */
.psych-card::before {
  content:  "";
  display:  block;
  height:   3px;
  background: var(--blue);
  opacity:  0;
  transition: opacity var(--t-base) ease;
}

.psych-card:hover::before { opacity: 1; }

/* Impact/effort badge */
.psych-card--amber::before { background: #e8a317; }
.psych-card--green::before  { background: #1D9E75; }

/* ── CARD HEADER ─────────────────────────── */

.psych-card__header {
  padding:     24px 24px 16px;
  display:     flex;
  align-items: flex-start;
  justify-content: space-between;
  gap:         12px;
}

.psych-card__category-badge {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--blue);
  opacity:        0.75;
}

.psych-card--amber .psych-card__category-badge { color: #b07c10; }
.psych-card--green  .psych-card__category-badge { color: #1D9E75; }

.psych-card__impact {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        3px 8px;
  border-radius:  var(--radius-pill);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.04em;
  white-space:    nowrap;
  flex-shrink:    0;
}

.psych-card__impact--high {
  background: rgba(26,70,201,0.08);
  color:      var(--blue);
}

.psych-card__impact--medium {
  background: rgba(232,163,23,0.10);
  color:      #b07c10;
}

/* ── CARD BODY ───────────────────────────── */

.psych-card__body {
  padding:   0 24px 24px;
  flex:      1;
  display:   flex;
  flex-direction: column;
  gap:       10px;
}

.psych-card__name {
  font-size:      1.2rem;
  font-weight:    500;
  letter-spacing: -0.03em;
  color:          var(--text-primary);
  line-height:    1.2;
  transition:     color var(--t-fast) ease;
}

.psych-card:hover .psych-card__name { color: var(--blue); }

.psych-card--amber:hover .psych-card__name { color: #b07c10; }
.psych-card--green:hover  .psych-card__name { color: #1D9E75; }

.psych-card__latin {
  font-size:  11px;
  color:      var(--text-muted);
  font-style: italic;
  margin-top: -4px;
}

.psych-card__tagline {
  font-size:   14px;
  line-height: 1.6;
  color:       var(--text-secondary);
}

.psych-card__definition {
  font-size:   13px;
  line-height: 1.65;
  color:       var(--text-muted);
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ── CARD FOOTER ─────────────────────────── */

.psych-card__footer {
  padding:       14px 24px;
  border-top:    1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-top:    auto;
}

.psych-card__effort {
  font-size: 11px;
  color:     var(--text-muted);
}

.psych-card__cta {
  font-size:      12px;
  font-weight:    500;
  color:          var(--blue);
  display:        flex;
  align-items:    center;
  gap:            4px;
  opacity:        0;
  transform:      translateX(-8px);
  transition:
    opacity   var(--t-fast) ease,
    transform var(--t-fast) ease;
}

.psych-card:hover .psych-card__cta {
  opacity:   1;
  transform: translateX(0);
}

/* ── POPOVER EXTENSIONS ──────────────────── */

/* Override popover for psychology — richer layout */
.psych-popover .chip-panel__body {
  gap: 40px;
}

/* DO / DON'T section */
.psych-dodont {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-top:            4px;
}

.psych-do,
.psych-dont {
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.psych-do__header,
.psych-dont__header {
  padding:        10px 16px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.psych-do__header   { background: rgba(29,158,117,0.10); color: #1D9E75; }
.psych-dont__header { background: rgba(229,62,62,0.08);  color: #c53030; }

.psych-do__list,
.psych-dont__list {
  padding:        12px 16px;
  background:     #fafafa;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.psych-do__item,
.psych-dont__item {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   13px;
  line-height: 1.5;
  color:       var(--text-secondary);
}

.psych-do__item::before   { content: "✓"; color: #1D9E75; font-weight: 700; flex-shrink: 0; }
.psych-dont__item::before { content: "✕"; color: #c53030; font-weight: 700; flex-shrink: 0; }

/* Real world example */
.psych-real-world {
  padding:       20px 20px;
  background:    rgba(26,70,201,0.03);
  border:        1px solid rgba(26,70,201,0.10);
  border-radius: var(--radius-md);
  font-size:     14px;
  line-height:   1.7;
  color:         var(--text-secondary);
  position:      relative;
}

.psych-real-world::before {
  content:      "Real world";
  display:      block;
  font-size:    10px;
  font-weight:  600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:        var(--blue);
  margin-bottom: 8px;
}

/* Impact badge in popover */
.psych-impact-row {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.psych-impact-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        5px 12px;
  border-radius:  var(--radius-pill);
  font-size:      11px;
  font-weight:    500;
}

.psych-impact-badge--impact {
  background: rgba(26,70,201,0.08);
  color:      var(--blue);
}

.psych-impact-badge--effort {
  background: rgba(0,0,0,0.05);
  color:      var(--text-muted);
}

/* ── RESPONSIVE ──────────────────────────── */

@media (max-width: 1024px) {

  .psych-hero    { padding: 64px 40px 0; }
  .psych-filter  { padding: 14px 40px; }
  .psych-grid    { grid-template-columns: repeat(2, 1fr); padding: 40px 40px 72px; }

  .psych-hero__inner { grid-template-columns: 1fr; gap: 40px; }

}

@media (max-width: 768px) {

  .psych-hero    { padding: 48px 20px 0; }
  .psych-filter  { padding: 12px 20px; gap: 6px; }
  .psych-filter__label { display: none; }
  .psych-grid    { grid-template-columns: 1fr; padding: 24px 20px 64px; gap: 12px; }

  .psych-hero__stats { grid-template-columns: 1fr 1fr; }

  .psych-dodont { grid-template-columns: 1fr; }

}


/* =========================================
   PSYCHOLOGY — CONVERSION ELEMENTS
   ========================================= */

/* ── MID-PAGE INTERRUPT BAND ─────────────── */

.psych-interrupt {
  margin:     0 48px;
  border-radius: var(--radius-lg);
  background: var(--text-primary);
  padding:    56px 64px;
  position:   relative;
  overflow:   hidden;
}

/* subtle radial glow */
.psych-interrupt::before {
  content:  "";
  position: absolute;
  top:      -60%;
  left:     -10%;
  width:    60%;
  height:   220%;
  background: radial-gradient(ellipse, rgba(26,70,201,0.35) 0%, transparent 65%);
  pointer-events: none;
}

.psych-interrupt__inner {
  position:              relative;
  z-index:               1;
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   48px;
  align-items:           center;
}

.psych-interrupt__eyebrow {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.45);
  margin-bottom:  14px;
}

.psych-interrupt__title {
  font-size:      clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight:    300;
  letter-spacing: -0.05em;
  line-height:    1.10;
  color:          #ffffff;
  margin-bottom:  14px;
}

.psych-interrupt__title strong {
  font-weight: 500;
  color:       rgba(255,255,255,1);
}

.psych-interrupt__body {
  font-size:   15px;
  line-height: 1.7;
  color:       rgba(255,255,255,0.58);
  max-width:   52ch;
}

/* checklist */
.psych-interrupt__checks {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     20px;
}

.psych-interrupt__check {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   14px;
  line-height: 1.5;
  color:       rgba(255,255,255,0.72);
}

.psych-interrupt__check-icon {
  width:           18px;
  height:          18px;
  border-radius:   50%;
  background:      rgba(26,70,201,0.50);
  border:          1px solid rgba(26,70,201,0.80);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       10px;
  color:           #fff;
  flex-shrink:     0;
  margin-top:      2px;
}

/* right CTA block */
.psych-interrupt__cta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            12px;
  flex-shrink:    0;
  min-width:      200px;
}

.psych-interrupt__btn-primary {
  display:         inline-flex;
  align-items:     center;
  padding:         14px 24px;
  background:      var(--blue);
  color:           #ffffff;
  border-radius:   var(--radius-pill);
  font-size:       13px;
  font-weight:     600;
  letter-spacing:  0.04em;
  white-space:     nowrap;
  transition:
    background var(--t-fast) ease,
    transform  var(--t-fast) ease;
}

.psych-interrupt__btn-primary:hover {
  background:  #1339a8;
  transform:   translateY(-2px);
}

.psych-interrupt__btn-ghost {
  display:        inline-flex;
  align-items:    center;
  padding:        12px 24px;
  background:     transparent;
  color:          rgba(255,255,255,0.65);
  border:         1.5px solid rgba(255,255,255,0.18);
  border-radius:  var(--radius-pill);
  font-size:      13px;
  font-weight:    500;
  white-space:    nowrap;
  transition:
    background   var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color        var(--t-fast) ease;
}

.psych-interrupt__btn-ghost:hover {
  background:   rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color:        #fff;
}

.psych-interrupt__note {
  font-size: 11px;
  color:     rgba(255,255,255,0.30);
  text-align: center;
  width: 100%;
}

/* ── STICKY AUDIT DRAWER ─────────────────── */

.audit-drawer {
  position:   fixed;
  bottom:     24px;
  left:       50%;
  transform:  translateX(-50%) translateY(120px);
  z-index:    300;
  width:      min(600px, calc(100vw - 40px));
  background: #ffffff;
  border:     1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.06);
  padding:    20px 24px;
  display:    flex;
  align-items: center;
  gap:        16px;
  opacity:    0;
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.55s ease;
}

.audit-drawer.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity:   1;
}

.audit-drawer__icon {
  width:           44px;
  height:          44px;
  border-radius:   12px;
  background:      rgba(26,70,201,0.08);
  border:          1px solid rgba(26,70,201,0.14);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  flex-shrink:     0;
}

.audit-drawer__text {
  flex: 1;
  min-width: 0;
}

.audit-drawer__heading {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
}

.audit-drawer__sub {
  font-size:   12px;
  color:       var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.audit-drawer__actions {
  display:    flex;
  gap:        8px;
  flex-shrink: 0;
}

.audit-drawer__btn {
  padding:        10px 18px;
  border-radius:  var(--radius-pill);
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 0.03em;
  white-space:    nowrap;
  transition:
    background   var(--t-fast) ease,
    transform    var(--t-fast) ease;
}

.audit-drawer__btn--primary {
  background: var(--blue);
  color:      #ffffff;
}

.audit-drawer__btn--primary:hover {
  background:  #1339a8;
  transform:   translateY(-1px);
}

.audit-drawer__btn--dismiss {
  background:  transparent;
  color:       var(--text-muted);
  border:      1.5px solid var(--border);
}

.audit-drawer__btn--dismiss:hover {
  border-color: rgba(0,0,0,0.20);
  color:        var(--text-primary);
}

.audit-drawer__close {
  position:   absolute;
  top:        -10px;
  right:      -10px;
  width:      24px;
  height:     24px;
  border-radius: 50%;
  background: var(--text-primary);
  color:      #fff;
  font-size:  11px;
  display:    flex;
  align-items: center;
  justify-content: center;
  cursor:     pointer;
  border:     none;
  line-height: 1;
  transition: background var(--t-fast) ease;
}

.audit-drawer__close:hover { background: var(--blue); }

/* ── RESPONSIVE ──────────────────────────── */

@media (max-width: 768px) {

  .psych-interrupt {
    margin:  0 20px;
    padding: 40px 28px;
  }

  .psych-interrupt__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .psych-interrupt__cta {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .audit-drawer {
    bottom:    12px;
    left:      12px;
    right:     12px;
    width:     auto;
    transform: translateX(0) translateY(120px);
    padding:   14px 16px;
    gap:       10px;
    border-radius: 14px;
  }

  .audit-drawer.is-visible {
    transform: translateX(0) translateY(0);
  }

  .audit-drawer__icon    { display: none; }
  .audit-drawer__sub     { display: none; }

  .audit-drawer__heading {
    font-size:   13px;
    line-height: 1.3;
  }

  .audit-drawer__actions {
    flex-direction: column;
    gap:            6px;
    flex-shrink:    0;
  }

  .audit-drawer__btn {
    padding:     8px 14px;
    font-size:   11px;
    white-space: nowrap;
    text-align:  center;
  }

  .audit-drawer__close {
    top:   -8px;
    right: -8px;
  }

}