/* css/about.css - Styles specific to about.html */

/* Our Story Section */
.ds-section--our-story {
    /* padding from .ds-section, background from --ds-section-bg */
}
.ds-our-story__content-wrapper { /* Replaces .story-content */
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
    margin-top: 20px; /* Adjusted space from section header */
}
.ds-our-story__text-area { /* Replaces .story-text */
    flex: 1;
    min-width: 300px;
}
.ds-our-story__text-area p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--ds-gray-text);
}
.ds-our-story__image-area { /* Replaces .story-image */
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}
.ds-our-story__image { /* Replaces img inside .story-image */
    width: 100%;
    max-width: 480px; /* Control max image size */
    border-radius: 10px;
    /* .ds-img-glow-effect class will be added for hover effect */
}

/* Common Image Glow Effect (can be in main.css if used widely) */
.ds-img-glow-effect {
    box-shadow: 0 0 25px rgba(var(--ds-primary-light-rgb), 0.25);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.ds-img-glow-effect:hover {
    box-shadow: 0 0 45px rgba(var(--ds-secondary-color-rgb, 0, 255, 229), 0.35); /* Assuming secondary color rgb */
    transform: scale(1.03);
}


/* Our Mission Section */
.ds-section--our-mission {
    /* padding, background from .ds-section */
}
.ds-our-mission__content-wrapper { /* Replaces .mission-content */
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
    margin-top: 20px;
}
.ds-our-mission__image-area { /* Replaces .mission-image */
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    order: 1; /* Default order */
}
.ds-our-mission__image { /* Replaces img inside .mission-image */
    width: 100%;
    max-width: 480px;
    border-radius: 10px;
}
.ds-our-mission__text-area { /* Replaces .mission-text */
    flex: 1;
    min-width: 300px;
    order: 2; /* Default order */
}
.ds-our-mission__title { /* Replaces h2 in .mission-text */
    font-size: 2.2rem; /* Example size */
    margin-bottom: 10px;
}
/* .ds-section__divider is used here, styled in main.css */
.ds-our-mission__text-area .ds-section__divider {
    margin: 0 0 25px 0; /* Align left under title */
}
.ds-our-mission__text-area p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--ds-gray-text);
}
.ds-our-mission__list { /* Replaces ul in .mission-text */
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
.ds-our-mission__list-item { /* Replaces li in .mission-text */
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: var(--ds-gray-text);
}
.ds-our-mission__list li i {
    color: var(--ds-primary-light);
    margin-top: 5px; /* Align with text */
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}
.ds-our-mission__list li strong {
    color: var(--ds-secondary-color);
    font-weight: 600; /* Orbitron might not have a bold, Quicksand does */
}


/* Our Team Section */
.ds-section--our-team {
    display: none;
    /* padding, background from .ds-section */
}
.ds-our-team__grid { /* Replaces .team-container */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}
/* .ds-card--team-member is a modifier of .ds-card */
.ds-card--team-member { /* Replaces .team-member */
    /* Base styles from .ds-card in main.css */
    /* Animation handled by .ds-animate-on-scroll */
}
.ds-card--team-member .ds-card__image-container { /* Replaces .member-photo */
    height: 280px; /* Specific height for team photos */
    overflow: hidden; /* Ensure image fit */
}
.ds-card--team-member .ds-card__image { /* img inside .member-photo */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area */
    transition: transform 0.5s ease;
}
.ds-card--team-member:hover .ds-card__image {
    transform: scale(1.05);
}
/* .ds-card__body for .member-info */
.ds-card--team-member .ds-card__title { /* Replaces h3 in .member-info */
    font-size: 1.3rem;
    color: var(--ds-light-text); /* Override default card title color if needed */
}
.ds-team-member__role { /* Replaces .member-title (the p tag for role) */
    color: var(--ds-secondary-color);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: block; /* Ensure it takes its own line */
}
.ds-card--team-member .ds-card__description { /* Replaces .member-desc */
    /* Styles from .ds-card__description */
    font-size: 0.95rem; /* Example adjustment */
}


/* Our Values Section */
.ds-section--our-values {
    /* padding, background */
}
.ds-our-values__grid { /* Replaces .values-container */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 20px;
}
/* .ds-card--value-item is a modifier of .ds-card */
.ds-card--value-item { /* Replaces .value-item */
    /* Base styles from .ds-card */
    align-items: center; /* Center content */
    text-align: center;
    padding: 30px 25px; /* Adjust padding */
    /* Animation handled by .ds-animate-on-scroll */
}
.ds-value-item__icon-wrapper { /* Replaces .value-icon */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(var(--ds-primary-light-rgb), 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.ds-value-item__icon-wrapper i {
    font-size: 2rem;
    color: var(--ds-primary-light);
}
.ds-card--value-item .ds-card__title { /* h3 in .value-item */
    font-size: 1.3rem;
    /* color: var(--ds-secondary-color); /* From .ds-card__title */
}
.ds-card--value-item .ds-card__description { /* p in .value-item */
    /* color: var(--ds-gray-text); */ /* From .ds-card__description */
    font-size: 0.95rem;
}


/* Join Us Section */
.ds-section--join-us { /* Replaces .join-us */
    text-align: center;
    display: none; /* Controlled by original CSS, can be removed if section is active */
}
.ds-join-us__content-wrapper { /* Replaces .join-content */
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px;
}
.ds-join-us__title { /* h2 in .join-content */
    font-size: 2.3rem;
    margin-bottom: 15px;
}
.ds-join-us__subtitle { /* p in .join-content */
    color: var(--ds-gray-text);
    margin-bottom: 40px;
    font-size: 1.1rem;
}
.ds-join-us__positions-grid { /* Replaces .positions */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
/* .ds-card--position-item is a modifier of .ds-card */
.ds-card--position-item { /* Replaces .position-item */
    /* Base styles from .ds-card */
    text-align: left; /* Override centered text from .ds-card--value-item if any inheritance issue */
    padding: 25px;
}
.ds-card--position-item .ds-card__title { /* h3 in .position-item */
    font-size: 1.2rem;
    color: var(--ds-light-text);
}
.ds-card--position-item .ds-card__description { /* p in .position-item */
    font-size: 0.95rem;
    margin-bottom: 25px; /* Space before button */
}
/* .ds-btn--outline for .apply-btn is in main.css */
.ds-card--position-item .ds-card__actions .ds-btn {
    font-size: 0.9rem; /* Adjust if needed */
}


/* Responsive adjustments for About page */
@media (max-width: 992px) {
    .ds-our-team__grid,
    .ds-our-values__grid,
    .ds-join-us__positions-grid {
        /* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Allow more flexible wrapping */
    }
}

@media (max-width: 768px) {
    .ds-section--about-hero .ds-hero__title { font-size: 2.5rem; }

    .ds-our-story__content-wrapper,
    .ds-our-mission__content-wrapper {
        flex-direction: column;
    }
    .ds-our-story__image-area,
    .ds-our-mission__image-area {
        order: -1; /* Image first on mobile */
        margin-bottom: 30px;
    }
    .ds-our-mission__title { text-align: center; }
    .ds-our-mission__text-area .ds-section__divider { margin-left: auto; margin-right: auto; }

    .ds-card--team-member,
    .ds-card--value-item,
    .ds-card--position-item {
        /* Already 1fr for auto-fit, this ensures they don't try to stay side-by-side */
    }
}

@media (max-width: 480px) {
    .ds-section--about-hero .ds-hero__title { font-size: 2rem; }
    .ds-our-mission__list-item {
        /* flex-direction: column; */ /* Optional: stack icon and text */
        /* align-items: center; */
        /* text-align: center; */
        /* gap: 8px; */
    }
}