/* ============================================
   RESPONSIVE STYLES FOR CSR PAGE
   Mobile-first approach with breakpoints:
   - Mobile: max-width: 767px
   - Tablet: 768px - 991px
   - Desktop: 992px+
   ============================================ */

/* ============================================
   TABLET STYLES (768px - 991px)
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {

    /* CSR Hero Section */
    .csr-hero-section {
        padding-top: 120px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .csr-hero-content .csr-hero-title {
        font-size: 48px;
        line-height: 56px;
        letter-spacing: -0.6px;
        margin-bottom: 32px;
        max-width: 600px;
    }

    .csr-hero-content .csr-hero-description {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.2px;
        margin-bottom: 64px;
        max-width: 650px;
    }

    /* CSR Hero Images Slider */
    .csr-hero-images-slider {
        margin-bottom: 64px;
    }

    .csr-hero-image-items {
        width: 320px;
        height: 200px;
    }

    /* Creating Change with Purpose */
    .csr-hero-change-with-purpose {
        max-width: 100%;
        margin-bottom: 48px;
        padding: 0 16px;
    }

    .csr-hero-change-with-purpose h3 {
        font-size: 32px;
        line-height: 40px;
    }

    .csr-hero-divider {
        margin-bottom: 20px;
        height: 48px;
    }

    .csr-hero-change-with-purpose p {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.18px;
    }

    /* Hero States */
    .csr-hero-states {
        max-width: 100%;
        margin-bottom: 80px;
        padding: 0 16px;
    }

    .csr-hero-states-card-number {
        font-size: 32px;
        line-height: 40px;
    }

    .csr-hero-states-card-label {
        font-size: 18px;
        line-height: 22px;
    }

    /* Where We Make a Difference Section */
    .csr-where-we-make-a-difference-section {
        padding: 80px 0;
    }

    .csr-where-we-make-a-difference-title-wrapper {
        margin-bottom: 32px;
    }

    .csr-where-we-make-a-difference-title-wrapper .csr-where-we-make-a-difference-title {
        font-size: 40px;
        line-height: 48px;
        letter-spacing: -0.5px;
    }

    .csr-where-we-make-a-difference-card {
        padding: 32px 5px 0 11px;
        margin-bottom: 32px;
    }

    .csr-where-we-make-a-difference-card-title {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.24px;
        margin-bottom: 20px;
        min-height: 56px;
    }

    .csr-where-we-make-a-difference-card-image {
        height: 160px;
        margin-bottom: 14px;
    }

    /* Collaboration for a Cause Section */
    .csr-collaboration-for-a-cause-section {
        padding: 80px 0;
    }

    .csr-collaboration-for-a-cause-heading .csr-collaboration-for-a-cause-title {
        font-size: 40px;
        line-height: 48px;
        letter-spacing: -0.5px;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .csr-collaboration-for-a-cause-description .csr-collaboration-for-a-cause-description-text {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: -0.18px;
    }

    .csr-collaboration-for-a-cause-cards {
        margin-top: 48px;
    }

    .csr-collaboration-for-a-cause-top-card {
        padding: 20px;
    }

    .csr-collaborator-logo {
        height: 120px;
        margin-bottom: 12px;
        padding: 12px 0 20px;
    }

    .csr-collaboration-for-a-cause-bottom-card-title {
        font-size: 22px;
        line-height: 26px;
    }

    .csr-collaboration-for-a-cause-bottom-card {
        padding: 20px;
    }

    .csr-collaboration-for-a-cause-bottom-card-content-title {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .csr-collaboration-for-a-cause-bottom-card-content-description {
        font-size: 15px;
        line-height: 20px;
    }

    .csr-collaboration-for-a-cause-icon-showpiece {
        height: 140px;
    }

    .csr-collaboration-for-a-cause-bottom-card-image-expansion {
        padding-left: 60px;
    }

    /* Keep horizontal expansion on tablet, just adjust spacing */
    .csr-collaboration-for-a-cause-bottom-card-image-expansion-items {
        gap: 4px;
    }

    /* Expanding Our Mission Section */
    .csr-expanding-our-mission-section {
        padding: 80px 0 100px;
    }

    .csr-expanding-our-mission-heading {
        margin-bottom: 48px;
    }

    .csr-expanding-our-mission-heading .csr-expanding-our-mission-title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -0.36px;
    }

    /* .csr-expanding-our-mission-section .margin-right-0 {
        padding-right: 15px;
    }

    .csr-expanding-our-mission-section .margin-left-0 {
        padding-left: 15px;
    } */

    .csr-expanding-our-mission-section .minus-1margin-left {
        margin-left: 0;
    }

    .csr-expanding-our-mission-content {
        padding: 20px;
    }

    .csr-expanding-our-mission-content-description {
        margin-bottom: 32px;
    }

    .csr-expanding-our-mission-content-description p {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .csr-expanding-our-mission-content-description ul {
        font-size: 18px;
        line-height: 22px;
    }

    .csr-expanding-our-mission-content-our-mission-card p {
        font-size: 20px;
        line-height: 24px;
    }

    .csr-expanding-our-mission-section .csr-collaboration-for-a-cause-bottom-card-image-expansion {
        padding: 20px;
    }
}

/* ============================================
   MOBILE STYLES (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {

    /* CSR Hero Section */
    .csr-hero-section {
        padding-top: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .csr-hero-content .csr-hero-title {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -0.4px;
        margin-bottom: 24px;
        max-width: 100%;
    }

    .csr-hero-content .csr-hero-description {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.16px;
        margin-bottom: 48px;
        max-width: 100%;
    }

    /* CSR Hero Images Slider */
    .csr-hero-images-slider {
        margin-bottom: 48px;
        mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    .csr-hero-images {
        gap: 12px;
    }

    .csr-hero-image-items {
        width: 250px;
        height: 150px;
    }

    /* Creating Change with Purpose */
    .csr-hero-change-with-purpose {
        max-width: 100%;
        margin-bottom: 40px;
        padding: 0;
    }

    .csr-hero-change-with-purpose h3 {
        font-size: 24px;
        line-height: 32px;
        text-align: center;
    }

    .csr-hero-divider {
        margin-bottom: 16px;
        height: 40px;
    }

    .csr-hero-divider::before,
    .csr-hero-divider::after {
        height: 20px;
    }

    .csr-hero-change-with-purpose p {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.14px;
        text-align: left;
    }

    /* Hero States */
    .csr-hero-states {
        max-width: 100%;
        margin-bottom: 60px;
        padding: 0;
    }

    .csr-hero-states .csr-hero-states-card {
        padding: 12px;
        gap: 16px;
    }

    .csr-hero-states-card-number {
        font-size: 28px;
        line-height: 36px;
    }

    .csr-hero-states-card-label {
        font-size: 16px;
        line-height: 20px;
    }

    /* Where We Make a Difference Section */
    .csr-where-we-make-a-difference-section {
        padding: 60px 0;
    }

    .csr-where-we-make-a-difference-title-wrapper {
        margin-bottom: 24px;
    }

    .csr-where-we-make-a-difference-title-wrapper .csr-where-we-make-a-difference-title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.36px;
    }

    .csr-where-we-make-a-difference-card {
        padding: 24px 5px 0 11px;
        margin-bottom: 24px;
    }

    .csr-where-we-make-a-difference-card-content {
        padding-left: 20px;
    }

    .csr-where-we-make-a-difference-card-title {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.2px;
        margin-bottom: 16px;
        min-height: auto;
    }

    .csr-where-we-make-a-difference-card-image {
        height: 140px;
        margin-bottom: 12px;
        border-radius: 8px;
    }

    .csr-where-we-make-a-difference-card-description {
        font-size: 13px;
        line-height: 18px;
    }

    .csr-where-we-make-a-difference-card-icon {
        width: 24px;
        height: 24px;
    }

    /* Collaboration for a Cause Section */
    .csr-collaboration-for-a-cause-section {
        padding: 60px 0;
    }

    .csr-collaboration-for-a-cause-heading .csr-collaboration-for-a-cause-title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.36px;
        max-width: 100%;
        margin-bottom: 16px;
    }

    .csr-collaboration-for-a-cause-description .csr-collaboration-for-a-cause-description-text {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.16px;
        margin-top: 0;
    }

    .csr-collaboration-for-a-cause-cards {
        margin-top: 32px;
    }

    .csr-collaboration-for-a-cause-top-card {
        padding: 16px;
        border-radius: 16px 16px 0 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .csr-collaboration-for-a-cause-bottom-card-content-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .csr-collaborator-logo {
        height: 100px;
        margin-bottom: 0;
        padding: 12px 0 16px;
    }

    .csr-collaboration-for-a-cause-bottom-card-title {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.2px;
        margin-bottom: 10px;
    }

    .csr-collaboration-for-a-cause-bottom-card-description {
        font-size: 13px;
        line-height: 18px;
    }

    .csr-collaboration-for-a-cause-bottom-card {
        padding: 16px;
    }

    .csr-collaboration-for-a-cause-bottom-card-content-title {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.16px;
        margin-bottom: 16px;
    }

    .csr-collaboration-for-a-cause-bottom-card-content-description {
        font-size: 14px;
        line-height: 18px;
        /* -webkit-line-clamp: 12; */
    }

    .csr-collaboration-for-a-cause-icon-showpiece {
        height: 100px;
    }

    .csr-collaboration-for-a-cause-bottom-card-image-expansion {
        padding-left: 0;
        margin-top: 20px;
    }

    /* Keep horizontal expansion on mobile, just adjust spacing */
    .csr-collaboration-for-a-cause-bottom-card-image-expansion-items {
        gap: 4px;
        height: 250px;
    }

    /* Ensure images work properly on mobile with touch */
    .csr-collaboration-for-a-cause-bottom-card-image-expansion-item img {
        border-radius: 4px;
    }

    /* Expanding Our Mission Section */
    .csr-expanding-our-mission-section {
        padding: 60px 0 80px;
    }

    .csr-expanding-our-mission-heading {
        margin-bottom: 32px;
    }

    .csr-expanding-our-mission-heading .csr-expanding-our-mission-title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.28px;
        text-align: center;
    }

    .csr-expanding-our-mission-section .margin-right-0 {
        padding-right: 12px;
    }

    .csr-expanding-our-mission-section .margin-left-0 {
        padding-left: 12px;
    }

    .csr-expanding-our-mission-section .minus-1margin-left {
        margin-left: 0;
    }

    .csr-expanding-our-mission-content {
        padding: 16px;
    }

    .csr-expanding-our-mission-content-description {
        margin-bottom: 24px;
    }

    .csr-expanding-our-mission-content-description p {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.16px;
        margin-bottom: 12px;
    }

    .csr-expanding-our-mission-content-description ul {
        font-size: 14px;
        line-height: 18px;
        letter-spacing: -0.14px;
        padding-left: 20px;
    }

    .csr-expanding-our-mission-content-our-mission-card {
        padding: 12px;
    }

    .csr-expanding-our-mission-content-our-mission-card-heading-with-icon {
        gap: 6px;
        margin-bottom: 16px;
    }

    .csr-expanding-our-mission-content-our-mission-card-heading-with-icon svg {
        width: 20px;
        height: 20px;
    }

    .csr-expanding-our-mission-content-our-mission-card-heading-with-icon h3 {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.16px;
    }

    .csr-expanding-our-mission-content-our-mission-card p {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.16px;
    }

    .csr-expanding-our-mission-section .csr-collaboration-for-a-cause-bottom-card-image-expansion {
        padding: 16px;
        height: fit-content;
        margin-top: -1px;
    }
}

/* ============================================
   VERY SMALL MOBILE (max-width: 375px)
   ============================================ */

@media (max-width: 375px) {
    .csr-hero-content .csr-hero-title {
        font-size: 28px;
        line-height: 34px;
    }

    .csr-hero-content .csr-hero-description {
        font-size: 15px;
        line-height: 19px;
        margin-bottom: 40px;
    }

    .csr-hero-image-items {
        width: 260px;
        height: 160px;
    }

    .csr-hero-change-with-purpose h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .csr-where-we-make-a-difference-title-wrapper .csr-where-we-make-a-difference-title {
        font-size: 26px;
        line-height: 32px;
    }

    .csr-collaboration-for-a-cause-heading .csr-collaboration-for-a-cause-title {
        font-size: 26px;
        line-height: 32px;
    }

    .csr-expanding-our-mission-heading .csr-expanding-our-mission-title {
        font-size: 26px;
        line-height: 32px;
    }
}

/* ============================================
   LANDSCAPE MOBILE (max-height: 500px)
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .csr-hero-section {
        padding-top: 70px;
    }

    .csr-hero-content .csr-hero-title {
        margin-bottom: 20px;
    }

    .csr-hero-content .csr-hero-description {
        margin-bottom: 32px;
    }

    .csr-hero-images-slider {
        margin-bottom: 32px;
    }

    .csr-hero-change-with-purpose {
        margin-bottom: 32px;
    }

    .csr-hero-states {
        margin-bottom: 40px;
    }
}