/* Team members page styles */
.team-members-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 100px; /* Fix header overlap issue */
}

.team-section {
    margin-bottom: 60px;
}

.section-title {
    color: #20B2AA;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    font-family: 'Popstar', cursive;
}

.section-divider {
    border: none;
    height: 3px;
    background-color: #20B2AA;
    margin: 0 auto 40px;
    width: 900px; /* Increase underline length */
}

/* Cat image styles */
.section-cat {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 5;
}

.section-cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Cat positions for each section */
.human-practice-section .section-cat {
    top: -20%;
    left: -5%;
}

.drylab-section .section-cat {
    top: -10%;
    right: -10%;
}

.design-section .section-cat {
    top: -30%;
    left: -10%;
}

.advisors-section .section-cat {
    top: -25%;
    right: -10%;
}

/* Advisor card section styles - maintain original styles and interactions */
.advisors-cards-section {
    margin-bottom: 60px;
}

.advisors-cards-section .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}



/* Unified text gradient for all sections - bright two-color gradient */
.member-card-back .member-quote {
    background: linear-gradient(135deg, #FFD700 0%, #FF6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 100% 200%; /* Make gradient background twice the size of content area */
    background-attachment: local; /* Key: make background follow content scroll */
    font-size: 0.9rem;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    text-align: left;
    border-radius: 8px;
    word-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 197, 50, 0.6) rgba(242, 197, 50, 0.1);
}

/* Add relative positioning to sections */
.team-section {
    position: relative;
}

/* Basic grid layout */
.team-grid {
    display: grid;
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Wet lab special layout: first row 3 items, second row 2 items centered */
.wetlab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.wetlab-grid .member-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.wetlab-grid .member-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.wetlab-grid .member-card:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.wetlab-grid .member-card:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

.wetlab-grid .member-card:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

/* Human Practice, Dry lab, Wiki: two per row, centered */
.human-practice-grid,
.drylab-grid,
.wiki-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Design and Advisors: three per row */
.design-grid,
.advisors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Advisors area: ensure three-column layout, maintain card size and font unchanged */
.advisors-section .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-items: center;
}

/* Flip card container */
.member-card {
    width: 400px;
    height: 250px;
    cursor: pointer;
    position: relative;
    perspective: 1200px;
}

.member-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.member-card-front,
.member-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
}

/* Card front */
.member-card-front {
    display: flex;
    align-items: center;
    background-color: #000000;
    /* border: 2px solid #333; */
}

.member-card-front .member-info{
    display: flex;
    justify-content: center;
    text-align: center;
}


/* Card back */
.member-card-back {
    background-color: #000000;
    border: 2px solid #F2C532;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
}

/* Photo area */
.member-photo {
    width: auto;
    height: 90%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Information area */
.member-info {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

/* Special styles for card back information area */
.member-card-back .member-info {
    padding: 15px;
    justify-content: center; /* Changed to center for vertical centering */
    align-items: flex-start;
}

.member-name {
    color: #F2C532;
    font-size: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.member-role {
    color: #F2C532;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    font-style: italic;
}

.member-quote {
    color: #F2C532;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
    margin: 0;
}

/* Old styles have been overridden by the unified styles above */

/* Custom scrollbar styles */
.member-card-back .member-quote::-webkit-scrollbar {
    width: 6px;
}

.member-card-back .member-quote::-webkit-scrollbar-track {
    background: rgba(242, 197, 50, 0.1);
    border-radius: 3px;
}

.member-card-back .member-quote::-webkit-scrollbar-thumb {
    background: rgba(242, 197, 50, 0.6);
    border-radius: 3px;
}

.member-card-back .member-quote::-webkit-scrollbar-thumb:hover {
    background: rgba(242, 197, 50, 0.9);
}

/* Paw icon container */
.paw-container {
    position: absolute;
    bottom: 10px; /* Adjust to bottom */
    right: 10px; /* Adjust to right */
    z-index: 10;
}

/* Paw icon */
.paw-icon {
    height: 50px;
    width: 50px;
}

.member-card-back .paw-icon {
    color: #000000;
}

/* Special styles for advisor cards */
.advisor-card .member-card-front {
    background: linear-gradient(135deg, #F2C532 0%, #FFD700 100%);
}

.advisor-card .member-card-back {
    background: linear-gradient(135deg, #F2C532 0%, #FFD700 100%); /* Keep same background color as front */
}

.advisor-card .member-name,
.advisor-card .paw-icon {
    color: #000000;
}

.advisor-card .member-role,
.advisor-card .member-quote{
    background: linear-gradient(135deg, #19718A 0%, #2C8C5E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Center align text in advisor cards */
.advisor-card .member-card-front .member-info,
.advisor-card .member-card-back .member-info {
    align-items: center;
    text-align: center;
}

/* Advisor card back self-introduction text maintains original color but adds scroll functionality */
.advisor-card .member-card-back .member-quote {
    background-size: 100% 200%; /* Make gradient background twice the size of content area */
    background-attachment: local; /* Key: make background follow content scroll */
    font-size: 0.9rem;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    text-align: left;
    border-radius: 8px;
    word-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 197, 50, 0.6) rgba(242, 197, 50, 0.1);
}



/* Hover flip effect - using 3D flip */
.member-card:hover .member-card-inner {
    transform: rotateY(180deg);
}

/* ========================= */
/* Simple advisor cards (no flip) */
/* ========================= */
.advisors-simple-section {
    margin-top: 10px;
}

.advisors-simple-grid {
    display: grid;
    /* 10 people four-row layout: first/third row 3 columns, second/fourth row 2 columns (centered) */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.advisor-simple-card {
    display: flex;
    align-items: center;
    gap: 0; /* Consistent with spacing achieved through left-right margins above */
    background: #D9DEE3; /* Light gray close to example image */
    border-radius: 15px; /* Consistent with rounded corners above */
    padding: 0; /* Consistent with no padding on outer card above */
    width: 400px; /* Consistent with card above */
    height: 250px; /* Consistent with card above */
}

/* Specify 3-2-3-2 layout:
   Row 1: columns 1-3
   Row 2: centered columns 2-3 (achieved through placeholder empty columns)
   Row 3: columns 1-3
   Row 4: centered columns 2-3
*/
.advisors-simple-grid .advisor-simple-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.advisors-simple-grid .advisor-simple-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.advisors-simple-grid .advisor-simple-card:nth-child(3) { grid-column: 3; grid-row: 1; }
.advisors-simple-grid .advisor-simple-card:nth-child(4) { grid-column: 2; grid-row: 2; }
.advisors-simple-grid .advisor-simple-card:nth-child(5) { grid-column: 3; grid-row: 2; }
.advisors-simple-grid .advisor-simple-card:nth-child(6) { grid-column: 1; grid-row: 3; }
.advisors-simple-grid .advisor-simple-card:nth-child(7) { grid-column: 2; grid-row: 3; }
.advisors-simple-grid .advisor-simple-card:nth-child(8) { grid-column: 3; grid-row: 3; }
.advisors-simple-grid .advisor-simple-card:nth-child(9) { grid-column: 2; grid-row: 4; }
.advisors-simple-grid .advisor-simple-card:nth-child(10) { grid-column: 3; grid-row: 4; }

.advisor-simple-photo {
    height: 90%; /* Relative height consistent with cards above */
    aspect-ratio: 3 / 4; /* Close to common portrait ratio above */
    width: auto;
    flex: 0 0 auto;
    border-radius: 10px; /* Consistent with card rounded corners above */
    margin: 0 15px; /* Consistent with horizontal spacing between image and info block above */
    overflow: hidden;
    background: #ffffff;
}

.advisor-simple-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advisor-simple-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px; /* Consistent with info block padding above */
}

.advisor-simple-name {
    margin: 0 0 10px 0;
    font-size: 1.5rem; /* Consistent with name font size above */
    font-weight: 800;
    background: linear-gradient(135deg, #1B8A3D 0%, #2C8C5E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.advisor-simple-quote {
    margin: 0;
    font-size: 1rem; /* Consistent with statement font size above */
    line-height: 1.4;
    font-style: italic; /* Consistent with statement style above */
    color: #0B6C7A; /* Blue-green, close to example image */
}

/* Compatibility: if simple advisor cards incorrectly use member-photo class, maintain same size */
.advisors-simple-grid .member-photo {
    height: 90%;
    aspect-ratio: 3 / 4;
    width: auto;
    flex: 0 0 auto;
    border-radius: 10px;
    margin: 0 15px;
    overflow: hidden;
    background: #ffffff;
}