/* ============================================================
   ABOUT PAGE STYLES
   ============================================================ */

/* ---- Founders Header ---- */
.about-founders-div {
    margin-top: 100px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    font-size: 44px;
}

.about-advisors-div {
    margin-top: 180px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    font-size: 44px;
}


/* ---- Founders Grid ----
   Wraps as many founder-cards per row as fit. With 3 founders that
   means 2 in the first row and the 3rd centered by itself on the
   second row — justify-content: center handles that automatically,
   with no need to hard-code which card goes where. If a founder is
   added or removed later, the wrap/centering keeps working as-is. */
.founders-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    padding: 50px 8% 100px;
}

/* One founder's whole card: accent line on top, then the row
   holding the photo column and the text details. Fixed width (rather
   than sizing to content) keeps every card the same size regardless
   of how much "Ask Me About" text a founder has. */
.founder-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 14px;
    padding: 36px 30px 30px;
    min-height: 400px;
    flex: 1 1 420px;
    min-width: 450px;
    max-width: 700px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

/* Below this, two 420px-wide cards no longer fit side by side —
   force every card to its own full-width row instead of letting flex
   awkwardly shrink them. */
@media (max-width: 950px) {
    .founder-card {
        flex: 1 1 100%;
        max-width: 480px;
    }
}

/* Gold accent bar across the top of every card */
.founder-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #B8922A;
}

/* Row holding the photo column + text details */
.founder-top {
    display: flex;
    gap: 26px;
    flex: 1;
}

/* Left column: circular headshot + role/company caption below it */
.founder-photo-col {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.founder-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.founder-role {
    margin: 0;
    font-weight: bold;
    color: #2D2D2D;
}

.founder-company {
    margin: 2px 0 0;
    font-size: 14px;
    color: #666;
}

/* Right column: name + all the labeled info lines */
.founder-details {
    flex: 1;
    font-size: 21px;
}

.founder-name {
    margin: 0 0 14px;
    font-size: 28px;
}

.founder-field {
    margin: 4px 0;
}

.founder-field-label {
    font-weight: bold;
}

.founder-list {
    margin: 4px 0 14px 20px;
    padding: 0;
}


/* ---- LinkedIn Icon ----
   Sits inside .founder-photo-col, directly under the photo. Since it
   lives in the (fixed-width) photo column instead of at the bottom of
   the whole card, its position never shifts even if the details column
   next to it grows or shrinks. */
.founder-linkedin {
    display: flex;
    margin-top: 12px;
}

.linkedin-icon {
    width: 25px;
    height: 25px;
    padding: 2px;
    border-radius: 4px;
    background-color: #0A66C2;
    fill: #ffffff;
    flex-shrink: 0;
}

.founder-linkedin:hover .linkedin-icon {
    background-color: #004182;
    cursor: pointer;
}


/* ---- Advisors Grid ----
   Same wrap/centering approach as .founders-grid, so it keeps working
   correctly no matter how many advisors are added later — 2 per row,
   with a leftover odd one out centering itself on its own row. */
.advisors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    padding: 50px 8% 100px;
}

/* Same card look as .founder-card, just simpler contents
   (field + short description instead of a bulleted list). */
.advisor-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 14px;
    padding: 36px 30px 30px;
    min-height: 300px;
    min-width: 400px;
    flex: 1 1 420px;
    max-width: 580px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 950px) {
    .advisor-card {
        flex: 1 1 100%;
        max-width: 480px;
    }
}

.advisor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #B8922A;
}

.advisor-top {
    display: flex;
    gap: 26px;
    flex: 1;
}

.advisor-photo-col {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.advisor-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.advisor-details {
    flex: 1;
    font-size: 21px;
}

.advisor-name {
    margin: 0 0 2px;
    font-size: 28px;
}

.advisor-title {
    margin: 0 0 20px;
    font-size: 16px;
}

.advisor-field {
    margin: 4px 0 14px;
}

.advisor-field-label {
    font-weight: bold;
}

/* Small gold outlined pill button linking to the advisor's Purdue
   faculty page — fills solid gold on hover, matching the chevron
   language used by the FAQ toggles elsewhere on the site. */
.advisor-about {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 18px;
    font-size: 24px;
}

.advisor-about,
.advisor-about:link,
.advisor-about:visited,
.advisor-about:hover,
.advisor-about:active {
    color: #B8922A; /* whatever color you want */
    text-decoration: underline; /* optional */
}



/* Sits directly under the photo, same as .founder-linkedin */
.advisor-linkedin {
    display: flex;
    margin-top: 12px;
}

.advisor-linkedin:hover .linkedin-icon {
    background-color: #004182;
    cursor: pointer;
}