/* ==========================================================================
   RESOURCES PAGE — css/pages/resources.css
   Page-specific styles for resources.html only.
   ========================================================================== */

/* Right Now Section */
.right-now-section { background: var(--warm-white); padding: 80px 0; }
.right-now__inner { max-width: 660px; margin: 0 auto; text-align: center; }
.right-now__inner h2 { color: var(--lilac-dark); margin-bottom: 16px; }
.right-now__inner > p { color: var(--text-secondary); margin-bottom: 32px; }
.right-now__steps { text-align: left; }
.right-now__step { background: var(--cream); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 18px 24px; margin-bottom: 12px; font-size: 0.95rem; color: var(--text-secondary); display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-sm); }
.right-now__step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, rgba(139,158,107,0.15), rgba(180,167,214,0.15)); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--sage-dark); }

/* 5-4-3-2-1 Grounding */
.grounding-section { padding: 80px 0; }
.grounding__inner { max-width: 660px; margin: 0 auto; }
.grounding__inner h2 { text-align: center; margin-bottom: 12px; }
.grounding__inner > p { text-align: center; color: var(--text-secondary); margin-bottom: 40px; }
.grounding__step { display: flex; align-items: flex-start; gap: 20px; padding: 18px 0; cursor: pointer; transition: opacity 0.6s ease; }
.grounding__step.completed { opacity: 0.45; }
.grounding__circle { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--sage-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: var(--sage); background: var(--warm-white); transition: all 0.4s ease; }
.grounding__step.completed .grounding__circle { background: linear-gradient(135deg, var(--sage), var(--lilac)); border-color: var(--sage); color: white; }
.grounding__step.completed .grounding__circle .grounding__number { display: none; }
.grounding__step.completed .grounding__circle::after { content: '\2713'; font-size: 1.2rem; }
.grounding__text h3 { font-size: 1.15rem; margin-bottom: 4px; }
.grounding__text p { font-size: 0.9rem; color: var(--text-light); margin: 0; }

/* Box Breathing */
.breathing-section { padding: 80px 0 100px; background: var(--warm-white); }
.breathing__inner { max-width: 660px; margin: 0 auto; text-align: center; }
.breathing__inner h2 { margin-bottom: 12px; }
.breathing__inner > p { color: var(--text-secondary); margin-bottom: 40px; }
.breathing__box-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.breathing__visual { width: 220px; height: 220px; position: relative; margin: 0 auto; }
.breathing__square { width: 100%; height: 100%; border: 3px solid var(--sage-light); border-radius: var(--radius-md); position: relative; }
.breathing__dot { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--sage), var(--lilac)); position: absolute; top: -8px; left: -8px; transition: all 4s linear; box-shadow: 0 0 12px rgba(139,158,107,0.4); }
.breathing__dot.pos-top-right { top: -8px; left: calc(100% - 8px); }
.breathing__dot.pos-bottom-right { top: calc(100% - 8px); left: calc(100% - 8px); }
.breathing__dot.pos-bottom-left { top: calc(100% - 8px); left: -8px; }
.breathing__dot.pos-top-left { top: -8px; left: -8px; }
.breathing__label { font-family: var(--font-heading); font-size: 1.2rem; font-style: italic; color: var(--sage-dark); position: absolute; width: 100%; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.breathing__timer { font-family: var(--font-heading); font-size: 2.5rem; color: var(--text-light); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 24px; opacity: 0.6; }
.breathing__controls { display: flex; gap: 16px; justify-content: center; }
.btn-breathing { padding: 14px 32px; border-radius: 50px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all var(--transition); border: none; }
.btn-breathing--start { background: linear-gradient(135deg, var(--sage), var(--sage-dark)); color: white; }
.btn-breathing--start:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(139,158,107,0.3); }
.btn-breathing--stop { background: transparent; border: 2px solid var(--sage-light); color: var(--sage-dark); }
.btn-breathing--stop:hover { background: rgba(139,158,107,0.06); }
.breathing__note { font-size: 0.88rem; color: var(--text-light); font-style: italic; margin-top: 16px; }

/* Progressive Muscle Relaxation */
.pmr-section { padding: 80px 0; }
.pmr__inner { max-width: 720px; margin: 0 auto; }
.pmr__inner h2 { text-align: center; margin-bottom: 12px; }
.pmr__inner > p { text-align: center; color: var(--text-secondary); margin-bottom: 36px; }
.pmr__steps { list-style: none; }
.pmr__step { background: var(--warm-white); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 12px; box-shadow: var(--shadow-sm); color: var(--text-secondary); font-size: 0.95rem; }
.pmr__step strong { color: var(--text-primary); font-weight: 600; display: block; margin-bottom: 4px; font-family: var(--font-heading); font-size: 1.05rem; }
.pmr__ground { text-align: center; margin-top: 40px; padding: 32px; background: linear-gradient(135deg, rgba(139,158,107,0.06), rgba(180,167,214,0.04)); border-radius: var(--radius-md); border: 1px solid var(--border-light); }
.pmr__ground p { font-family: var(--font-heading); font-size: 1.2rem; font-style: italic; color: var(--sage-dark); margin: 0; line-height: 1.6; }

/* Crisis Resources (full section) */
.crisis-resources-section { background: var(--warm-white); padding: 80px 0; }
.crisis-resources__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.crisis-resources__inner h2 { color: var(--lilac-dark); margin-bottom: 16px; }
.crisis-resources__inner > p { color: var(--text-secondary); margin-bottom: 36px; }
.crisis-resources__list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.crisis-resources__card { background: var(--cream); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 20px 24px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-sm); text-align: left; }
.crisis-resources__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(180,167,214,0.2), rgba(139,158,107,0.15)); display: flex; align-items: center; justify-content: center; }
.crisis-resources__card strong { display: block; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 2px; }
.crisis-resources__card span { font-size: 0.88rem; color: var(--text-light); }
.crisis-resources__card a { font-weight: 700; color: var(--sage-dark); }
.crisis-resources__closing { font-style: italic; color: var(--text-secondary); font-size: 0.97rem; }

/* Helpful Reads */
.reads-section { padding: 80px 0; }
.reads__inner { max-width: 720px; margin: 0 auto; }
.reads__inner h2 { text-align: center; margin-bottom: 12px; }
.reads__inner > p { text-align: center; color: var(--text-secondary); margin-bottom: 36px; }
.reads__card { background: var(--warm-white); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 28px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.reads__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.reads__card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.reads__card .reads__author { font-size: 0.88rem; color: var(--sage-dark); margin-bottom: 8px; font-weight: 500; }
.reads__card p:last-child { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }

/* Resources reduced-motion override for breathing dot */
@media (prefers-reduced-motion: reduce) {
  .breathing__dot { transition-duration: 0.01ms !important; }
}