/* ================= about.css ================= */



.about-main { overflow: hidden; }

/* Story */
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.story-text h2 { color: var(--blue-deep); font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 20px; }
.story-text p { font-size: 1.05rem; margin-bottom: 18px; color: var(--ink); }
.story-image { position: relative; }
.story-image img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; height: 440px; object-fit: cover; }
.image-caption {
    position: absolute; bottom: -16px; right: -16px; background: var(--white);
    padding: 14px 20px; border-radius: 10px; box-shadow: var(--shadow-md);
    font-size: 0.88rem; color: var(--muted); font-style: italic; border-left: 4px solid var(--coral);
}

/* Mission banner */
.mission-banner {
    background:
        radial-gradient(700px 240px at 0% 0%, rgba(63,81,201,0.10), transparent 60%),
        var(--coral-soft);
    padding: 64px 0;
}
.mission-banner .quote-mark { width: 44px; height: 44px; color: var(--coral); margin-bottom: 10px; }
.mission-quote {
    font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--blue-deep); line-height: 1.4; max-width: 900px; margin: 0 auto 16px;
}
.mission-by { color: var(--coral); font-weight: 600; }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value-card {
    background: var(--white); padding: 34px 28px; border-radius: var(--radius);
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; background: var(--coral-soft); color: var(--coral);
    border-radius: 16px; margin-bottom: 18px;
}
.value-icon svg { width: 28px; height: 28px; }
.value-card h3 { color: var(--blue-deep); font-size: 1.18rem; margin-bottom: 10px; }
.value-card p { color: var(--muted); font-size: 0.96rem; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team-card {
    text-align: center; background: var(--white); padding: 36px 28px;
    border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.team-card .icon-circle { margin-left: auto; margin-right: auto; }
.team-card h4 { color: var(--blue-deep); font-size: 1.15rem; margin-bottom: 8px; }
.team-card p { color: var(--muted); font-size: 0.95rem; }

/* Facilities */
.facilities-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.facilities-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; height: 420px; object-fit: cover; }
.facilities-content h2 { color: var(--blue-deep); font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 22px; }
.facilities-list { list-style: none; }
.facilities-list li {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; font-size: 1.02rem;
}
.facilities-list svg { width: 22px; height: 22px; color: var(--green); flex-shrink: 0; margin-top: 3px; }
.facilities-list strong { color: var(--blue-deep); }

@media (max-width: 900px) {
    .story-grid, .facilities-grid { grid-template-columns: 1fr; gap: 40px; }
    .values-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
    .story-image img, .facilities-media img { height: 340px; }
}
@media (max-width: 600px) {
    .values-grid, .team-grid { grid-template-columns: 1fr; }
    .image-caption { right: 12px; bottom: -14px; }
}