/* Play page styles extracted from root.css */

/* Section wrapper */
.play-section { padding: var(--space-12) 0; }

/* Intro */
.page-intro { background: linear-gradient(135deg, var(--color-neutral-50) 0%, #ffffff 100%); padding: var(--space-12) 0 var(--space-10); border-bottom: 1px solid var(--color-neutral-200); }
.page-intro-header { text-align: center; max-width: 900px; margin: 0 auto; }
.page-eyebrow { color: var(--color-primary-600); font-weight: var(--font-semibold); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.page-title { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--font-extrabold); color: var(--color-neutral-900); margin-bottom: var(--space-3); line-height: var(--leading-tight); }
.page-lead { font-size: var(--text-lg); color: var(--color-neutral-600); margin: 0 auto var(--space-6); max-width: 760px; line-height: var(--leading-relaxed); }
.page-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Subnav */
.play-subnav { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, 0.8); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--color-neutral-200); }
.play-subnav-list { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-2) 0; margin: 0; list-style: none; overflow-x: auto; }
.play-subnav-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-neutral-700); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); }
.play-subnav-link:hover { background: var(--color-neutral-100); color: var(--color-neutral-900); text-decoration: none; }
.play-subnav-link i { color: var(--color-primary-600); }

/* Variants */
.section-muted { background: var(--color-neutral-50); }

/* Shared helpers used by Play template */
.icon-text { display: inline-flex; align-items: center; gap: 0.5ch; white-space: nowrap; }
.section-header { text-align: center; margin-bottom: var(--space-8); }
.section-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--gradient-accent); color: white; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); margin-bottom: var(--space-2); box-shadow: var(--shadow-md); }
.section-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--color-neutral-900); margin-bottom: var(--space-2); line-height: var(--leading-tight); }
.section-subtitle { font-size: var(--text-lg); color: var(--color-neutral-600); line-height: var(--leading-relaxed); max-width: 640px; margin: 0 auto; }

/* Heat compare */
.heat-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 960px) { .heat-compare { grid-template-columns: 1fr; } }
.heat-card { background: white; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-md); }
.heat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.heat-pill { background: var(--color-neutral-100); color: var(--color-neutral-800); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-weight: var(--font-bold); font-size: var(--text-sm); }
.level-high .heat-pill { background: #fee2e2; color: var(--color-error-700); }
.level-medium .heat-pill { background: #fef3c7; color: var(--color-warning-700); }
.level-low .heat-pill { background: #dbeafe; color: var(--color-info-700); }
.heat-range { font-size: var(--text-sm); color: var(--color-neutral-700); }
.heat-desc { color: var(--color-neutral-600); margin-bottom: var(--space-3); }
.metric-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.metric-item { color: var(--color-neutral-700); }

/* Heat compare responsive */
@media (max-width: 768px) {
    .heat-compare { gap: var(--space-2); }
    .heat-card { padding: var(--space-2); border-radius: var(--radius-md); box-shadow: none; }
    .heat-card-header { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
    .heat-pill { font-size: var(--text-xs); padding: 2px 8px; }
    .heat-range { font-size: var(--text-xs); }
    .heat-desc { display: none; }
    .metric-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .metric-item { font-size: var(--text-xs); white-space: nowrap; }
    .metric-item i { font-size: 0.8em; }
}
@media (max-width: 420px) {
    .heat-card { padding: var(--space-1); }
    .heat-card-header { gap: var(--space-1); }
}

/* Safety */
.safety-section { background: var(--color-neutral-50); color: var(--color-neutral-800); }
.safety-section .section-title { color: var(--color-neutral-900); }
.safety-section .section-subtitle { color: var(--color-neutral-600); }
.safety-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.safety-panel { background: white; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-5); }
.panel-title { font-size: var(--text-xl); color: var(--color-neutral-900); margin-bottom: var(--space-3); }
.panel-list { list-style: disc; padding-left: var(--space-6); color: var(--color-neutral-700); }
.safety-panel.do { border-color: rgba(34, 197, 94, 0.25); }
.safety-panel.dont { border-color: rgba(239, 68, 68, 0.25); }
@media (max-width: 900px) { .safety-panels { grid-template-columns: 1fr; } }
.safety-badge { background: var(--gradient-warm); }
.safety-warning { margin-top: var(--space-12); padding: var(--space-5); background: var(--gradient-card); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); display: flex; align-items: center; gap: var(--space-4); max-width: 800px; margin-left: auto; margin-right: auto; }
.warning-icon { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--gradient-warm); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); color: white; flex-shrink: 0; }
.warning-content h4 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-neutral-900); margin-bottom: var(--space-1); }
.warning-content p { color: var(--color-neutral-700); line-height: var(--leading-relaxed); margin: 0; font-style: italic; }

/* Timeline */
.timeline { position: relative; list-style: none; padding-left: var(--space-8); display: grid; gap: var(--space-5); }
.timeline::before { content: ''; position: absolute; left: var(--space-4); top: 0; bottom: 0; width: 2px; background: var(--color-neutral-200); }
.timeline-item { position: relative; }
.timeline-dot { position: absolute; left: calc(var(--space-4) - 6px); top: 4px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--gradient-warm); box-shadow: var(--shadow-glow); }
.timeline-content h4 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.timeline-content p { margin: 0; color: var(--color-neutral-600); }

/* Scene / Ideas */
.ideas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1100px) { .ideas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ideas-grid { grid-template-columns: 1fr; } }
.scene-card { background: white; border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-fast); position: relative; overflow: hidden; }
.scene-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-secondary); transform: scaleX(0); transition: var(--transition-fast); }
.scene-card:hover::before { transform: scaleX(1); }
.scene-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.scene-icon { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--gradient-secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-2); font-size: var(--text-lg); color: white; }
.scene-card h4 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-neutral-900); margin-bottom: var(--space-3); }
.scene-card p { color: var(--color-neutral-600); line-height: var(--leading-relaxed); margin: 0; font-size: var(--text-sm); }

/* Aftercare */
.aftercare-two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
.aftercare-list { list-style: none; padding: 0; margin: 0; }
.aftercare-list li { margin-bottom: var(--space-3); color: var(--color-neutral-700); }
.aftercare-callout { background: var(--gradient-card); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; gap: var(--space-3); align-items: flex-start; }
.aftercare-callout i { color: var(--color-accent-500); font-size: var(--text-2xl); margin-top: 2px; }
.aftercare-callout p { margin: 0; font-style: italic; color: var(--color-neutral-700); }
@media (max-width: 900px) { .aftercare-two-col { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 900px; margin: 0 auto; }
.faq-item { border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: white; overflow: hidden; }
.faq-item + .faq-item { margin-top: var(--space-3); }
.faq-summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-5); position: relative; font-weight: var(--font-semibold); color: var(--color-neutral-900); }
.faq-summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-summary { background: var(--color-neutral-50); }
.faq-content { padding: var(--space-4) var(--space-5); color: var(--color-neutral-700); border-top: 1px solid var(--color-neutral-200); }

/* Accessibility */
.skip-link { position: absolute; top: -40px; left: 6px; background: var(--color-primary-600); color: white; padding: 8px; text-decoration: none; border-radius: 4px; z-index: 1000; }
.skip-link:focus { top: 6px; }

/* Responsive tweaks */
@media (max-width: 768px) {
    .play-subnav { top: 0; }
    .section-title { font-size: var(--text-2xl); }
}