/* ==========================
   About Hero
   ========================== */

/* A CSS background rather than an <img> - object-fit only offers
   fixed keywords (cover/contain/etc), with no way to dial in a size
   between them. background-size accepts a percentage, so the crop/zoom
   can actually be tuned (see home.css's .welcome-cta for the same
   technique). background-color is the fallback for whatever the
   percentage doesn't cover. */
.about-hero {
    position: relative;
    overflow: hidden;

    padding: 7rem 0 3.5rem;

    background-color: var(--color-secondary);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;

    color: #fff;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgb(17 52 86 / 88%) 0%,
        rgb(17 52 86 / 80%) 100%
    );
}

.about-hero .container {
    position: relative;
    z-index: 1;
}

.about-hero h1 {
    margin-bottom: 0.75rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.about-lede {
    max-width: 42rem;

    color: rgb(255 255 255 / 90%);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* ==========================
   Hero Quick Facts
   ========================== */
/* Folded into the hero itself, rather than a separate full-bleed
   band - red stays an accent (icons only) here, matching how it's
   used everywhere else on the site, instead of introducing a large
   saturated-color section that appears nowhere else. */

.about-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;

    margin-top: 1.75rem;
    padding-top: 1.5rem;

    border-top: 1px solid rgb(255 255 255 / 20%);

    list-style: none;
}

.about-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    color: rgb(255 255 255 / 90%);
    font-size: 0.95rem;
    font-weight: 500;
}

.about-facts i {
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* ==========================
   About Page Body
   ========================== */

.about-page {
    padding: 3.5rem 0 4rem;
    background: #f8fafc;
}

/* One larger feature (the longest content - a 5-item list) paired
   with two shorter ones side by side below it, rather than three
   equal-height zigzag rows - "What We Do" earns the bigger anchor
   spot, and pairing Meetings/Membership keeps two short blurbs from
   each dragging out into their own mostly-empty full-width row. The
   media boxes are navy rather than red: red is an accent color
   everywhere else on the site (buttons, small icons, borders), and a
   big red panel would reintroduce the "red as a large background
   field" problem the old stat band had. */

/* Placeholder for a photo the club hasn't uploaded yet (see
   about.html) - shaped like an actual photo panel (rounded rectangle,
   sized to the content next to it) rather than a small icon circle, so
   the layout already reads correctly once a real image replaces it. */
.about-feature-media {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 4 / 3;

    background: var(--color-secondary);
    border-radius: 16px;

    box-shadow: 0 10px 24px rgb(17 52 86 / 18%);
}

.about-feature-media i {
    font-size: 4rem;
    color: #fff;
}

.about-feature-media-sm {
    max-width: 280px;
}

.about-feature-media-sm i {
    font-size: 3rem;
}

.about-feature-primary {
    display: grid;
    grid-template-columns: minmax(320px, 480px) 1fr;
    align-items: center;
    gap: 3.5rem;

    margin-bottom: 4rem;
}

.about-feature-content {
    max-width: 640px;
}

.about-feature-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}

.about-feature-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.about-feature-content h2 {
    margin: 0 0 0.75rem;

    color: var(--color-secondary);
    font-size: 1.4rem;
}

.about-feature-content p,
.about-feature-content ul {
    margin: 0 0 1rem;

    color: #475569;
    line-height: 1.6;
}

.about-feature-content ul {
    padding-left: 1.2rem;
}

.about-feature-content li {
    margin-bottom: 0.4rem;
}

.about-link {
    display: inline-block;

    color: var(--color-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.about-link:hover {
    color: var(--color-primary);
}

/* ==========================
   Flyout Destinations
   ========================== */

.about-flyouts {
    margin-top: 3rem;
}

.about-section-title {
    margin-bottom: 0.4rem;

    color: var(--color-secondary);
    font-size: 1.4rem;
}

.about-section-subtitle {
    margin-bottom: 1.5rem;

    color: #64748b;
}

/* ==========================
   Board & Officers
   ========================== */

.about-officers {
    margin-top: 3rem;
    text-align: center;
}

.about-officers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
    gap: 2rem;
    /* auto-fit collapses unused tracks rather than stretching the ones
       in use, so with fewer officers than the row fits, the grid's
       default justify-content: start packs them against the left edge
       instead of centering the group as a whole. */
    justify-content: center;
}

.about-officer {
    text-align: center;
}

.about-officer-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.9rem;

    object-fit: cover;
    border-radius: 50%;
}

.about-officer-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-secondary);
    box-shadow: 0 10px 24px rgb(17 52 86 / 18%);
}

.about-officer-photo-placeholder i {
    font-size: 2.5rem;
    color: #fff;
}

.about-officer-role {
    margin-bottom: 0.2rem;

    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.about-officer-name {
    color: var(--color-secondary);
    font-size: 1.05rem;
    font-weight: 700;
}

/* ==========================
   Responsive
   ========================== */

@media (max-width: 700px) {
    .about-feature-primary {
        grid-template-columns: 1fr;
        justify-items: center;

        text-align: center;
    }

    .about-feature-primary .about-feature-media {
        max-width: 220px;
    }

    .about-feature-pair {
        grid-template-columns: 1fr;
    }

    .about-feature-card {
        align-items: center;
        text-align: center;
    }

    .about-feature-content ul {
        text-align: left;
    }

    /* Two officers to a row, smaller photos, rather than one big circle
       per screenful. */
    .about-officers h2 {
        margin-bottom: 1.5rem;
    }

    .about-officers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1rem;
    }

    .about-officer-photo {
        width: 96px;
        height: 96px;
    }

    .about-officer-photo-placeholder i {
        font-size: 2rem;
    }
}