/**
 * Zamseed CSR / Community Impact Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-csr {
    --zs-csr-content-width: var(--zs-container-max, 1200px);
    padding: 100px 0;
    background-color: var(--zs-warm, #fdfcf9);
}

.zs-csr__header {
    width: min(var(--zs-csr-content-width, var(--zs-container-max, 1200px)), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin-left: auto;
    margin-right: auto;
}

/* One container for the banner and the grid.
   The grid needs a 1050px maximum for the approved 249px card — (1050 - 54) / 4
   — and the banner previously used the section's 1200px, so the cards read as a
   narrower block floating under a wider, unrelated panel. Sharing the measure
   makes the banner's left edge line up with card one and its right edge with
   card four at every width. */
.zs-csr__featured,
.zs-csr__cards {
    width: calc(100% - (var(--zs-csr-content-side-padding, 20px) * 2));
    /* 1200 is the measure of the homepage CSR container in Figma (11096:35738);
       the 1050 this replaced squeezed the four cards to 247px against the
       285px the frame specifies. The CSR & Impact preset re-declares the var
       at its own 1050 measure, so that page is unaffected. */
    max-width: var(--zs-csr-grid-max, 1200px);
    margin-inline: auto;
}

.zs-csr__header {
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, center);
    margin-bottom: 40px;
    text-align: var(--zs-header-text-align, center);
    max-width: 740px;
}

.zs-csr__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zs-accent, #c48c33);
}

.zs-csr__heading {
    margin: 0 var(--zs-header-margin-right, auto) 16px var(--zs-header-margin-left, auto);
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--zs-primary, #2d5a27);
}

.zs-csr__description {
    margin: 0 var(--zs-header-margin-right, auto) 0 var(--zs-header-margin-left, auto);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

/* Featured banner. Geometry, gradient and the warm top-left glow are taken
   from the homepage frame (Figma 11096:35746): 30px radius, 63/46/46 padding,
   and an amber radial over the green linear. The CSR & Impact preset already
   carried these values; the base had drifted to 28px/64-46-48 with the glow
   missing entirely. */
.zs-csr__featured {
    position: relative;
    margin-bottom: 40px;
    padding: 63px 46px 46px;
    border-radius: 30px;
    background:
        radial-gradient(ellipse 18% 32% at 8% 12%, rgba(196, 140, 51, 0.2) 0%, rgba(196, 140, 51, 0) 68%),
        linear-gradient(140deg, #244f22 0%, var(--zs-primary, #2d5a27) 60%);
    box-shadow: 0 24px 30px rgba(45, 90, 39, 0.18);
    overflow: hidden;
}

.zs-csr__featured-label {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.76);
}

.zs-csr__featured-title {
    margin: 0 0 13px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 2.4rem;
    font-weight: 700;
    /* 61.44px against the 38.4px size, per Figma 11096:35751. */
    line-height: 1.6;
    color: #ffffff;
}

.zs-csr__featured-description {
    max-width: 640px;
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

/* Initiative cards */
/* Four equal columns. minmax(0, 1fr) rather than 1fr so a long unbroken title
   cannot widen its own column and make the cards uneven. */
.zs-csr__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.zs-csr__card {
    --zs-csr-card-focal-x: 50%;
    --zs-csr-card-focal-y: 50%;
    --zs-csr-image-hover-scale: 1.025;
    --zs-csr-hover-y: -4px;
    --zs-csr-transition-duration: 260ms;
    --zs-csr-transition-ease: var(--zs-ease-hover, cubic-bezier(0.2, 0.8, 0.2, 1));
    --zs-csr-overlay-start-color: #000000;
    --zs-csr-overlay-mid-color: #000000;
    --zs-csr-overlay-end-color: #000000;
    --zs-csr-overlay-start-opacity: 0.04;
    --zs-csr-overlay-mid-opacity: 0.12;
    --zs-csr-overlay-end-opacity: 0.78;
    --zs-csr-overlay-start-position: 18%;
    --zs-csr-overlay-mid-position: 40%;
    --zs-csr-overlay-end-position: 100%;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 260px;
    /* Slightly taller than wide, per the supplied design. */
    aspect-ratio: 0.95 / 1;
    border: 1px solid rgba(15, 36, 24, 0.08);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    /* Neutral, not black: a card whose image fails resolves to an intentional
       empty state rather than a dark hole. */
    background-color: #d9ddd4;
    box-shadow:
        0 12px 30px rgba(15, 36, 24, 0.12),
        0 3px 10px rgba(15, 36, 24, 0.08);
    isolation: isolate;
    transition:
        transform var(--zs-csr-transition-duration) var(--zs-csr-transition-ease),
        box-shadow var(--zs-csr-transition-duration) var(--zs-csr-transition-ease),
        border-color var(--zs-csr-transition-duration) var(--zs-csr-transition-ease);
}

a.zs-csr__card:hover,
a.zs-csr__card:focus-visible {
    transform: translateY(var(--zs-csr-hover-y));
    border-color: rgba(45, 90, 39, 0.22);
    box-shadow:
        0 18px 38px rgba(15, 36, 24, 0.16),
        0 6px 14px rgba(15, 36, 24, 0.10);
}

a.zs-csr__card:focus-visible {
    outline: 3px solid #d5a928;
    outline-offset: 3px;
}

/* Out-specifies Elementor's own image reset.
   elementor/assets/css/frontend.min.css ships:
       .elementor img { border:none; border-radius:0; box-shadow:none;
                        height:auto; max-width:100% }
   That selector is one class plus one element (0,1,1). A single-class rule here
   is (0,1,0) and loses, so `height: 100%` was being replaced by `height: auto`
   and the photograph rendered at its own 1024x683 landscape ratio inside a
   portrait card — filling the top and leaving the card's background visible
   beneath it. That is the grey lower panel; it was invisible while the card
   background was near-black and obvious once it became #d9ddd4.

   `.zs-csr__card img.zs-csr__card-image` is (0,2,1) and wins. The media wrapper
   is not an <img>, so the reset never applied to it, but it is qualified here
   too so the pair stays readable as one rule. */
.zs-csr__card .zs-csr__card-media,
.zs-csr__card img.zs-csr__card-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.zs-csr__card img.zs-csr__card-image {
    object-fit: cover;
    object-position: var(--zs-csr-card-focal-x) var(--zs-csr-card-focal-y);
    /* The reset also zeroes border-radius; the card clips with overflow:hidden,
       so the image does not need its own, but the preset's radius is restored
       below at matching specificity. */
    transform: scale(1);
    transition: transform 560ms var(--zs-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

a.zs-csr__card:hover .zs-csr__card-image,
a.zs-csr__card:focus-visible .zs-csr__card-image {
    transform: scale(var(--zs-csr-image-hover-scale));
}

.zs-csr__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--zs-csr-overlay-start-color) calc(var(--zs-csr-overlay-start-opacity) * 100%), transparent) var(--zs-csr-overlay-start-position),
            color-mix(in srgb, var(--zs-csr-overlay-mid-color) calc(var(--zs-csr-overlay-mid-opacity) * 100%), transparent) var(--zs-csr-overlay-mid-position),
            color-mix(in srgb, var(--zs-csr-overlay-end-color) calc(var(--zs-csr-overlay-end-opacity) * 100%), transparent) var(--zs-csr-overlay-end-position)
        );
}

.zs-csr__card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 999px;
    background-color: var(--zs-csr-badge-bg, #0b6b3a);
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.zs-csr__card-badge svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.zs-csr__card-badge img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Contrast comes from .zs-csr__card-overlay, whose stops are Elementor
   controls, plus the text-shadow below. The shadow is the part that does not
   depend on card height: the overlay's dark end is a percentage, so a
   three-line title reaches higher than a two-line one and gets less of it.
   Belt and braces, rather than a second gradient darkening the photograph. */
.zs-csr__card-title {
    position: absolute;
    left: 20px;
    right: 16px;
    bottom: 18px;
    z-index: 2;
    margin: 0;
    max-width: 215px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
    overflow-wrap: anywhere;
}

/* CSR & Impact page preset.
   Figma node 11096:35737: centred 1200px section, 740px header, green
   featured banner, and four 300px-tall initiative cards. */
.zs-csr--preset-csr-impact-page {
    padding: 100px 0;
    background-color: #fdfcf9;
    /* Declared on the root so the banner and the card grid both take the
       preset's 1050 measure. Re-declaring it on .zs-csr__featured alone left
       the grid on the base 1200 default and the two stopped lining up. */
    --zs-csr-grid-max: 1050px;
}

.zs-csr--preset-csr-impact-page .zs-csr__header {
    max-width: 740px;
    margin-bottom: 40px;
    gap: 20px;
}

.zs-csr--preset-csr-impact-page .zs-csr__eyebrow {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 2.16px;
    color: #c48c33;
}

.zs-csr--preset-csr-impact-page .zs-csr__heading {
    margin-bottom: 0;
    font-size: 48px;
    line-height: 56px;
    color: #2d5a27;
}

.zs-csr--preset-csr-impact-page .zs-csr__description {
    max-width: 740px;
    font-size: 18px;
    line-height: 28.8px;
    color: #555555;
}

.zs-csr--preset-csr-impact-page .zs-csr__featured {
    /* Same measure as the grid — the preset must not reintroduce the wider banner. */
    max-width: var(--zs-csr-grid-max, 1050px);
    margin-bottom: 28px;
    padding: 63px 46px 46px;
    border-radius: 30px;
    background:
        radial-gradient(ellipse 18% 32% at 8% 12%, rgba(196, 140, 51, 0.2) 0%, rgba(196, 140, 51, 0) 68%),
        linear-gradient(140deg, #244f22 0%, #2d5a27 60%);
    box-shadow: 0 24px 30px rgba(45, 90, 39, 0.18);
}

.zs-csr--preset-csr-impact-page .zs-csr__featured-label {
    margin-bottom: 13px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 2.16px;
    color: rgba(255, 255, 255, 0.76);
}

.zs-csr--preset-csr-impact-page .zs-csr__featured-title {
    margin-bottom: 13px;
    font-size: 38.4px;
    line-height: 61.44px;
    color: #ffffff;
}

.zs-csr--preset-csr-impact-page .zs-csr__featured-description {
    max-width: 632px;
    font-size: 16px;
    line-height: 25.6px;
    color: rgba(255, 255, 255, 0.86);
}

.zs-csr--preset-csr-impact-page .zs-csr__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.zs-csr--preset-csr-impact-page .zs-csr__card {
    min-height: 260px;
    aspect-ratio: 0.95 / 1;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    box-shadow: none;
}

.zs-csr--preset-csr-impact-page .zs-csr__card img.zs-csr__card-image {
    border-radius: 14px;
}

.zs-csr--preset-csr-impact-page .zs-csr__card-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.8) 100%);
}

.zs-csr--preset-csr-impact-page .zs-csr__card-badge {
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
    padding: 8px;
    background-color: #145f35;
    font-size: 18px;
}

.zs-csr--preset-csr-impact-page .zs-csr__card-badge img,
.zs-csr--preset-csr-impact-page .zs-csr__card-badge svg {
    width: 18px;
    height: 18px;
}

.zs-csr--preset-csr-impact-page .zs-csr__card-title {
    left: 0;
    right: 0;
    bottom: 0;
    left: 20px;
    right: 16px;
    bottom: 18px;
    max-width: 215px;
    font-size: 24px;
    line-height: 1.06;
    letter-spacing: 0;
    /* The shadow stays on. It is what keeps a three-line title readable where
       the overlay's percentage stops give it less coverage than a two-line one. */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}

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

@media (max-width: 1024px) {
    .zs-csr__cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .zs-csr--preset-csr-impact-page .zs-csr__heading {
        font-size: 42px;
        line-height: 50px;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__featured {
    /* Same measure as the grid — the preset must not reintroduce the wider banner. */
    max-width: var(--zs-csr-grid-max, 1050px);
        padding: 54px 40px 42px;
    }
}

@media (max-width: 900px) {
    .zs-csr--preset-csr-impact-page {
        padding: 88px 0;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 767, not 768: Elementor's mobile tier is <= 767px, and the widget's own
   <source media="(max-width: 767px)"> mobile image swap already uses 767. At
   768 the layout changed one pixel before the mobile control values and the
   mobile art direction did. */
@media (max-width: 767px) {
    .zs-csr {
        padding: var(--zs-section-padding-mobile, 68px) 0;
    }

    .zs-csr__featured {
        padding: 32px 28px;
    }

    .zs-csr__featured-title {
        font-size: 1.9rem;
    }

    .zs-csr__cards {
        grid-template-columns: 1fr;
    }

    .zs-csr__card {
        min-height: 250px;
    }

    .zs-csr--preset-csr-impact-page {
        padding: 76px 0;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__header {
        align-items: flex-start;
        text-align: left;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__heading {
        font-size: 36px;
        line-height: 42px;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__description {
        font-size: 16px;
        line-height: 26px;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__featured {
    /* Same measure as the grid — the preset must not reintroduce the wider banner. */
    max-width: var(--zs-csr-grid-max, 1050px);
        padding: 38px 28px;
        border-radius: 22px;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__featured-title {
        font-size: 32px;
        line-height: 38px;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__featured-description {
        font-size: 15px;
        line-height: 24px;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__cards {
        grid-template-columns: 1fr;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__card {
        min-height: 280px;
    }
}

@media (max-width: 560px) {
    .zs-csr--preset-csr-impact-page .zs-csr__heading {
        font-size: 32px;
        line-height: 38px;
    }

    .zs-csr--preset-csr-impact-page .zs-csr__featured {
    /* Same measure as the grid — the preset must not reintroduce the wider banner. */
    max-width: var(--zs-csr-grid-max, 1050px);
        padding: 34px 24px;
    }
}

@media (max-width: 375px) {
    .zs-csr--preset-csr-impact-page .zs-csr__card-title {
        font-size: 22px;
        line-height: 1.16;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zs-csr__card,
    .zs-csr__card-image {
        transition: none !important;
    }

    a.zs-csr__card:hover,
    a.zs-csr__card:focus-visible {
        transform: none !important;
    }

    a.zs-csr__card:hover .zs-csr__card-image,
    a.zs-csr__card:focus-visible .zs-csr__card-image {
        transform: none !important;
    }
}

/* Responsive card grid, per the supplied design: 4 up on desktop, 2 up on
   tablet, stacked on mobile. Placed last so it wins over the older breakpoint
   blocks above without editing each of them.

   1024, not 1023: the block this must beat is @media (max-width: 1024px), and
   at exactly 1024 the old 1023 bound left that block unopposed — the grid went
   two-up without picking up the 760px measure, so the cards ballooned to 472px
   for that single pixel. 1024 is also Elementor's tablet bound. */
@media (max-width: 1024px) {
    /* The banner has to take the same measure as the grid, or its edges stop
       lining up with cards one and four below the desktop tier. Only the preset
       was narrowing here, so an unpresetted instance kept the full-width banner
       over a 760px grid. */
    .zs-csr__featured,
    .zs-csr__cards {
        width: calc(100% - 48px);
        max-width: 760px;
    }

    .zs-csr__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .zs-csr__card {
        min-height: 280px;
        aspect-ratio: 1.05 / 1;
    }

    .zs-csr__card-title {
        font-size: 23px;
    }
}

@media (max-width: 767px) {
    .zs-csr__cards {
        grid-template-columns: 1fr;
        gap: 16px;
        width: calc(100% - 32px);
        max-width: 480px;
    }

    .zs-csr__card {
        width: 100%;
        min-height: 330px;
        aspect-ratio: 0.98 / 1;
        border-radius: 14px;
    }

    .zs-csr__card-title {
        left: 20px;
        right: 20px;
        bottom: 20px;
        max-width: 280px;
        font-size: 24px;
        line-height: 1.06;
    }
}

@media (max-width: 390px) {
    .zs-csr__card {
        min-height: 315px;
    }

    .zs-csr__card-title {
        font-size: 22px;
    }
}

/* Featured banner: same responsive steps as the card grid, so the two stay
   aligned rather than drifting apart at each breakpoint. */
@media (max-width: 1023px) {
    .zs-csr__featured {
        width: calc(100% - 48px);
        max-width: 760px;
        padding: 48px 36px 40px;
        border-radius: 24px;
    }
}

@media (max-width: 767px) {
    .zs-csr__featured {
        width: calc(100% - 32px);
        max-width: 480px;
        margin-bottom: 28px;
        padding: 36px 24px 32px;
        border-radius: 20px;
    }
}