/* ── Recovery Science Post — Component Styles ── */

/* ---------- Stats Row ---------- */
.pcm-stats-row {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    margin:40px 0;
    border:1px solid #dcd7ca;
    background:#faf8f4;
}
.pcm-stats-row .stat-item {
    text-align:center;
    padding:32px 16px;
    border-right:1px solid #dcd7ca;
    position:relative;
}
.pcm-stats-row .stat-item:last-child { border-right:none; }
.pcm-stats-row .stat-number {
    font-family:franklin-gothic-condensed,sans-serif;
    font-size:36px;
    font-weight:700;
    color:#a69162;
    margin-bottom:6px;
    line-height:1;
    transition:color 0.3s;
}
.pcm-stats-row .stat-label {
    font-family:franklin-gothic-compressed,sans-serif;
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#888;
    line-height:1.4;
}

/* ---------- Chart Wrap ---------- */
.pcm-chart-wrap {
    margin:40px 0;
    padding:28px 24px 20px;
    border:1px solid #dcd7ca;
    background:#faf8f4;
}
.pcm-chart-title {
    font-family:franklin-gothic-condensed,sans-serif;
    font-size:18px;
    font-weight:600;
    color:#1a1a1a;
    margin-bottom:20px;
    padding-bottom:12px;
    border-bottom:1px solid #e8e3d8;
}
.pcm-chart-wrap em {
    display:block;
    margin-top:14px;
    font-family:franklin-gothic-compressed,sans-serif;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#aaa;
    font-style:normal;
}

/* Bar row hover effect */
.pcm-bar-row {
    transition:transform 0.2s ease;
}
.pcm-bar-row:hover {
    transform:translateX(3px);
}

/* ---------- Highlight Box ---------- */
.highlight-box {
    margin:40px 0;
    padding:28px 28px 24px;
    background:#f5efe0;
    border-left:4px solid #a69162;
}
.highlight-box h3 {
    font-family:franklin-gothic-condensed,sans-serif;
    font-size:20px;
    font-weight:600;
    color:#1a1a1a;
    margin:0 0 12px;
}
.highlight-box p {
    font-size:16px;
    line-height:1.7;
    color:#444;
    margin-bottom:0;
}

/* ---------- Callout Warning ---------- */
.pcm-callout-warning {
    margin:40px 0;
    padding:28px 28px 24px;
    background:linear-gradient(135deg,#1F3C50 0%,#2a4d64 100%);
    position:relative;
    overflow:hidden;
}
.pcm-callout-warning::before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:120px;
    height:120px;
    background:radial-gradient(circle at top right,rgba(166,145,98,0.15) 0%,transparent 70%);
    pointer-events:none;
}
.pcm-callout-warning h3 {
    font-family:franklin-gothic-condensed,sans-serif;
    font-size:20px;
    font-weight:600;
    color:#fff;
    margin:0 0 12px;
    position:relative;
}
.pcm-callout-warning p {
    font-size:16px;
    line-height:1.7;
    color:rgba(255,255,255,0.85);
    margin-bottom:0;
    position:relative;
}

/* ---------- Numbered List ---------- */
.pcm-numbered-list {
    margin:36px 0;
}
.pcm-numbered-item {
    display:flex;
    gap:20px;
    align-items:flex-start;
    padding:24px 0;
    border-bottom:1px solid #eee;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.5s ease, transform 0.5s ease;
}
.pcm-numbered-item.revealed {
    opacity:1;
    transform:translateY(0);
}
.pcm-numbered-item:first-child { padding-top:0; }
.pcm-numbered-item:last-child { border-bottom:none; }

.pcm-numbered-badge {
    flex-shrink:0;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#a69162;
    color:#fff;
    font-family:franklin-gothic-condensed,sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1;
    margin-top:2px;
}
.pcm-numbered-content h4 {
    font-family:franklin-gothic-condensed,sans-serif;
    font-size:18px;
    font-weight:600;
    color:#1a1a1a;
    margin:0 0 8px;
}
.pcm-numbered-content p {
    margin:0;
    font-size:16px;
    line-height:1.7;
    color:#444;
}

/* ---------- Scroll reveal base ---------- */
.pcm-stats-row,
.pcm-chart-wrap,
.highlight-box,
.pcm-callout-warning {
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease, transform 0.6s ease;
}
.pcm-stats-row.revealed,
.pcm-chart-wrap.revealed,
.highlight-box.revealed,
.pcm-callout-warning.revealed {
    opacity:1;
    transform:translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width:768px) {
    .pcm-stats-row {
        grid-template-columns:1fr 1fr;
    }
    .pcm-stats-row .stat-item:nth-child(2) { border-right:none; }
    .pcm-stats-row .stat-item:nth-child(1),
    .pcm-stats-row .stat-item:nth-child(2) { border-bottom:1px solid #dcd7ca; }
    .pcm-stats-row .stat-number { font-size:30px; }
    .pcm-chart-wrap { padding:20px 16px 16px; }
}
@media (max-width:480px) {
    .pcm-stats-row { grid-template-columns:1fr; }
    .pcm-stats-row .stat-item { border-right:none; border-bottom:1px solid #dcd7ca; }
    .pcm-stats-row .stat-item:last-child { border-bottom:none; }
    .pcm-numbered-item { flex-direction:column; gap:12px; }
}