/* ============================================================
   RF AI Unit, shared styles for AI unit overview pages
   (Big Idea, objectives, stage nav, sources, standards).
   Used by every ai-unit-NN/index.html.
   ============================================================ */

.unit-header {
    background: var(--rf-dark);
    color: var(--rf-light);
    padding: calc(80px + var(--space-xl)) 0 var(--space-xl);
}
.unit-meta { display: flex; gap: var(--space-lg); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.unit-badge {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    background: rgba(181, 101, 216, 0.2); border-radius: var(--radius-md);
    font-size: 0.875rem; font-weight: 600;
}

.objectives-list { list-style: none; margin: var(--space-lg) 0; }
.objectives-list li { padding: var(--space-sm) 0; padding-left: 2rem; position: relative; }
.objectives-list li::before { content: '✓'; position: absolute; left: 0; color: var(--rf-coral); font-weight: 700; font-size: 1.25rem; }

.stage-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: var(--space-xl) 0; }
.stage-link {
    flex: 0 0 calc(33.333% - 0.75rem); display: flex; flex-direction: column; gap: 0.35rem;
    padding: 1.25rem; border-radius: 12px; text-decoration: none; color: white;
    transition: all 0.2s ease; min-height: 110px; position: relative;
}
.stage-link:hover { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 #FF8A65, 6px 6px 0 #E77A8E, 8px 8px 0 #B565D8; text-decoration: none; }
.stage-link:nth-child(1) { background: #0D1B2A; border: 1px solid rgba(119,141,169,0.25); }
.stage-link:nth-child(2) { background: #1B263B; }
.stage-link:nth-child(3) { background: #2E3F5C; }
.stage-link:nth-child(4) { background: #415A77; }
.stage-link:nth-child(5) { background: #0D1B2A; border: 1px solid rgba(119,141,169,0.25); }
.stage-link .stage-num { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.stage-link .stage-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.stage-link .stage-desc { font-size: 0.8125rem; opacity: 0.7; line-height: 1.4; margin-top: 0.1rem; }
.stage-link i { font-size: 1.4rem; opacity: 0.75; margin-bottom: 0.4rem; }

/* Sources */
.sources-section { background: #f9fafb; border-top: 1px solid var(--rf-gray-light); border-bottom: 1px solid var(--rf-gray-light); padding: var(--space-xl) 0; }
.sources-intro { font-size: 0.9375rem; color: #374151; line-height: 1.7; margin-bottom: var(--space-lg); max-width: 800px; }
.sources-group { margin-bottom: var(--space-lg); }
.sources-group-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rf-gray); margin-bottom: 0.75rem; }
.sources-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sources-list li a { display: inline-flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9375rem; color: var(--rf-blue); text-decoration: none; transition: color 0.2s; }
.sources-list li a:hover { color: var(--rf-purple); text-decoration: underline; }
.sources-list li a::before { content: '↗'; font-size: 0.75rem; opacity: 0.7; }

/* Standards Accordion */
.standards-section { padding: var(--space-xl) 0; }
.standards-intro { font-size: 0.9375rem; color: #374151; line-height: 1.7; margin-bottom: var(--space-lg); max-width: 800px; }
.accordion { display: flex; flex-direction: column; gap: 0.5rem; max-width: 800px; }
.accordion-item { border: 1px solid rgba(255, 138, 101, 0.3); border-radius: var(--radius-md); overflow: hidden; }
.accordion-btn { width: 100%; background: white; border: none; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--rf-dark); text-align: left; transition: background 0.2s; }
.accordion-btn:hover { background: #f9fafb; }
.accordion-btn.open { background: var(--rf-dark); color: var(--rf-light); }
.accordion-btn .acc-chevron { font-size: 0.875rem; transition: transform 0.25s; flex-shrink: 0; opacity: 0.6; }
.accordion-btn.open .acc-chevron { transform: rotate(180deg); opacity: 1; }
.accordion-body { display: none; padding: 1.25rem; background: white; border-top: 1px solid var(--rf-gray-light); }
.accordion-body.open { display: block; }
.standards-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.standards-list li { font-size: 0.9375rem; color: #374151; line-height: 1.6; padding-left: 1.25rem; position: relative; }
.standards-list li::before { content: '•'; position: absolute; left: 0; color: var(--rf-coral); font-weight: 700; }
.standards-list li strong { color: var(--rf-dark); }
.standards-list li.mn-note::before { content: ''; }

/* Begin button */
@keyframes begin-bounce { 0% { transform: scale(1); } 25% { transform: scale(1.08); } 55% { transform: scale(0.96); } 75% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes arrow-dash { 0% { transform: translateX(0); } 35% { transform: translateX(8px); } 65% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
.btn-begin {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: linear-gradient(135deg, var(--rf-coral), var(--rf-pink), var(--rf-purple));
    color: white; font-weight: 700; font-size: 1.125rem; padding: 1.1rem 2.75rem; border-radius: 50px;
    text-decoration: none; box-shadow: 0 4px 20px rgba(255, 138, 101, 0.35); letter-spacing: 0.02em; transition: box-shadow 0.2s ease;
}
.btn-begin:hover { animation: begin-bounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); box-shadow: 0 8px 32px rgba(181, 101, 216, 0.45); text-decoration: none; color: white; }
.btn-begin .btn-arrow { display: inline-block; }
.btn-begin:hover .btn-arrow { animation: arrow-dash 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.build-bg { background: linear-gradient(90deg, rgba(255,138,101,0.09), rgba(233,30,99,0.08), rgba(181,101,216,0.10)); padding: var(--space-lg) 0 var(--space-lg); }
.stages-eyebrow { text-align: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rf-coral); margin-bottom: 0.35rem; margin-top: 0; }

.format-note {
    display: flex; gap: 0.75rem; align-items: flex-start;
    background: rgba(107,155,209,0.08); border: 1px solid rgba(107,155,209,0.25);
    border-radius: 12px; padding: 1rem 1.25rem; margin-top: var(--space-lg);
    font-size: 0.9375rem; color: #374151; line-height: 1.6;
}
.format-note strong { color: var(--rf-dark); }

.rf-callout { background: linear-gradient(135deg, rgba(255,138,101,0.08), rgba(181,101,216,0.08)); border-radius: 12px; padding: 1.25rem 1.5rem; }
.rf-callout p { font-size: 1.0625rem; font-weight: 600; color: var(--rf-dark); margin: 0; line-height: 1.5; }