/* Cognitive distortions lesson. All rules scoped under .cgd-* */

.cgd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cgd-hero { width: min(80%, 320px); }
.cgd-hero img { width: 100%; display: block; }

/* a quoted thought */
.cgd-quote { width: 100%; max-width: 340px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.cgd-quote small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cgd-quote p { margin: 0; font: 600 21px/1.4 var(--serif); }
.cgd-part { transition: color .25s, background .25s; border-radius: 4px; }
.cgd-okp { color: var(--mint); }
.cgd-jmp { color: var(--streak); background: rgba(251, 150, 121, .14); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cgd-kind { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; animation: cgdIn .35s ease-out; }
.cgd-kind b { font-size: 16px; color: var(--streak); }
.cgd-kind span { font-size: 14px; color: var(--dim); }
@keyframes cgdIn { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }

@media (max-height: 700px) {
  .cgd-hero { width: min(64%, 260px); }
  .cgd-quote p { font-size: 19px; }
}