/* ============================================================
   Student Stories Page
   ============================================================ */

/* Intro */
.ss-intro {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}
.ss-intro-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff;
    flex-shrink: 0;
}
.ss-intro-text h2 { color: var(--color-primary); margin-bottom: 14px; }
.ss-intro-text p  { color: var(--color-grey); line-height: 1.8; margin-bottom: 12px; }

/* Story Layout */
.ss-story-wrap {
    display: grid;
    gap: 48px;
    align-items: start;
}
.ss-story-left  { grid-template-columns: 380px 1fr; }
.ss-story-right { grid-template-columns: 1fr 380px; }

/* Quote Block */
.ss-story-quote-block {
    border-radius: 20px;
    padding: 36px 32px;
    position: sticky;
    top: 90px;
}
.ss-blue   { background: linear-gradient(145deg, #1B2C65, #2a407a); }
.ss-crimson{ background: linear-gradient(145deg, #CD163F, #a01030); }
.ss-green  { background: linear-gradient(145deg, #1a6b3c, #2e7d32); }

.ss-story-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.6);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ss-story-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,.4);
}

.ss-blockquote {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255,255,255,.95);
    font-style: italic;
    margin: 0 0 28px;
    padding: 0;
    border: none;
    quotes: "\201C" "\201D";
}
.ss-blockquote::before { content: open-quote; }
.ss-blockquote::after  { content: close-quote; }

.ss-story-attribution {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 20px;
}
.ss-story-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    flex-shrink: 0;
}
.ss-story-attribution strong { display: block; color: #fff; font-size: .9rem; }
.ss-story-attribution span   { color: rgba(255,255,255,.7); font-size: .75rem; }

/* Story Content */
.ss-story-content { padding: 8px 0; }

.ss-story-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #EEF2FF;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
}
.ss-tag-crimson { background: #fde8ea; color: var(--color-secondary); }
.ss-tag-green   { background: #e8f5e9; color: #2e7d32; }

.ss-story-content h2 {
    color: var(--color-primary);
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    margin-bottom: 18px;
    line-height: 1.3;
}
.ss-story-content p {
    color: var(--color-grey);
    line-height: 1.85;
    margin-bottom: 16px;
    font-size: 15px;
}

/* Impact box */
.ss-impact-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #EEF2FF;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 20px 0;
}
.ss-impact-box i { color: var(--color-primary); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.ss-impact-box p { margin: 0; font-size: 14px; }
.ss-impact-crimson { background: #fde8ea; border-left-color: var(--color-secondary); }
.ss-impact-crimson i { color: var(--color-secondary); }
.ss-impact-green { background: #e8f5e9; border-left-color: #2e7d32; }
.ss-impact-green i { color: #2e7d32; }

.ss-closing {
    font-style: italic;
    color: var(--color-dark) !important;
    font-size: 14px !important;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
    margin-top: 20px !important;
}

/* Mission Section */
.ss-mission-section { background: var(--color-primary); }
.ss-mission-block { max-width: 760px; margin: 0 auto; text-align: center; }
.ss-mission-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #fff;
    margin: 0 auto 28px;
}
.ss-mission-block h2 { color: #fff; margin-bottom: 16px; }
.ss-mission-block p  { color: rgba(255,255,255,.8); line-height: 1.8; margin-bottom: 14px; font-size: 15px; }

.ss-mission-quote {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    font-style: italic;
    margin: 32px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.ss-mission-quote i { color: var(--color-secondary); font-size: 1.5rem; }

.ss-mission-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 900px) {
    .ss-story-left,
    .ss-story-right { grid-template-columns: 1fr; }
    .ss-story-right .ss-story-quote-block { order: -1; }
    .ss-story-quote-block { position: relative; top: 0; }
    .ss-intro { flex-direction: column; gap: 20px; }
}
@media (max-width: 600px) {
    .ss-story-wrap { gap: 28px; }
    .ss-blockquote { font-size: .95rem; }
}