/* ================================================================
   page-home.css  –  Compliance Checker
   Homepage-only styles: hero, hero strip, explore / card grid,
   case-studies card + carousel, commodities / EU / companies /
   countries cards, about, for-who callouts. Responsive overrides
   live labelled blocks at the bottom.
   ================================================================ */


/* === FULL-BLEED CONTAINER =====================================
   On the homepage the hero, explore and about sections span the
   whole viewport. */
.container { padding-left: 0; padding-right: 0; }


/* === HERO ===================================================== */

.hero {
    margin-top: var(--nav-h);
    height: 562px;          
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
    border-radius: 0;
}

/* Soft radial "spotlight" over the content area gives dark text a
   reliable light backdrop without hiding the photo's edges. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
                rgba(255, 255, 255, 0.55) 0%,
                rgba(255, 255, 255, 0)    78%);
    pointer-events: none;
    z-index: 0;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0.4;
    pointer-events: none;
}

.hero .hero__subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(13px, 1.4vw, 18px);
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ae-black-50);
    max-width: 100%;
}

.hero__content {
    position: relative;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(50px, 4vw, 90px);
    max-width: min(92%, 2400px);
    width: 100%;
}
.hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.hero__bullets {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.hero__bullet {
    display: flex;
    align-items: center;
    gap: 16px;
}
.hero__bullet i {
    flex-shrink: 0;
    color: var(--ae-darkblue);
    font-size: 16px;
}
.hero__buttons {
    display: flex;
    justify-content: center;
}

/* Soft entrance, subtle slide-up on page load. */
.hero .hero__content {
    animation: cc-hero-rise 0.8s ease-out both;
}
@keyframes cc-hero-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);     }
}
@media (prefers-reduced-motion: reduce) {
    .hero .hero__content { animation: none; }
}


/* === HERO STRIP  ================================== */

.cc-bullets {
    position: relative;
    display: flex;
    justify-content: center;
    padding: clamp(28px, 2vw, 44px) clamp(16px, 4vw, 40px);
    color: var(--white);
    background:
        radial-gradient(ellipse 70% 140% at 50% 0%,
            rgba(194, 237, 69, 0.10) 0%,
            transparent 65%),
        var(--ae-darkblue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cc-bullets .hero__bullets {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    max-width: 2400px;
}
.cc-bullets .hero__bullet { gap: 14px; }
.cc-bullets .hero__bullet i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ae-lightgreen);
    color: var(--ae-darkblue);
    font-size: 14px;
    flex-shrink: 0;
}
.cc-bullets .hero__bullet .label {
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.06em;
}
/* Vertical hairline between bullets on desktop. */
.cc-bullets .hero__bullet:not(:last-child) {
    padding-right: clamp(20px, 3vw, 40px);
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}


/* === EXPLORE ================================================== */

.explore {
    background: var(--ae-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.explore__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 163px;
    padding: 50px 40px 80px;
    max-width: min(92%, 2400px);
    width: 100%;
}
.section-heading { text-align: center; }

.section-case-studies {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 20px;
    max-width: var(--page-max);
    width: 100%;
}
.section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 80px);
    padding: 20px;
    max-width: var(--page-max);
    width: 100%;
}

.card__validation-icon {
    color: var(--ae-darkblue);
    font-size: 16px;
    flex-shrink: 0;

}

/* === CARDS — SHARED BASE ====================================== */

.card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 40px);
    min-width: 0;
}
.card__title {
    display: flex;
    align-items: center;
    gap: 20px;
}
.card__number {
    flex-shrink: 0;
    display: inline-block;
}

/* Prev / Next arrow buttons flanking the case-studies carousel */
.arrow-btn {
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin: 0 10px;
    width: 20px;
    height: 20px;
    color: var(--ae-darkblue);
    font-size: 20px;
}


/* === CARD: CASE STUDIES + CAROUSEL ============================ */

.card--case-studies {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(30px, 4vw, 80px);
    min-height: 100px;
    padding: clamp(40px, 1vw, 90px) clamp(20px, 3.5vw, 60px);
    width: 80%;
}
.card__image-area {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: clamp(380px, 45%, 640px);
    padding: 10px clamp(10px, 2.5vw, 40px);
}
.card__img-frame {
    flex: 1;
    min-width: 0;
    height: clamp(240px, 28vw, 400px);
    border-radius: var(--radius-card);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.card__img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Continuous horizontal drift driven by rAF in homepage.html. */
.carousel-track {
    display: flex;
    height: 100%;
    will-change: transform;
}
.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* === CARD: COMMODITY GROUPS =================================== */

.card--commodities {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.5vw, 60px) clamp(16px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 40px);
    min-height: var(--card-min-h);
}
.card--commodities .card__content { max-width: 60%; }

.commodity-images {
    position: absolute;
    right: 16px;
    top: 143px;
    width: 48%;
    max-width: 280px;
    overflow: hidden;
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.commodity-images__row {
    display: flex;
    gap: 7px;
    justify-content: center;
}
/* Middle row has 3 images; the third overflows and is clipped. */
.commodity-images__row--overflow { justify-content: flex-start; }
.commodity-images img {
    height: 70px;
    object-fit: cover;
    flex-shrink: 0;
}


/* === CARD: EU MEMBER STATES =================================== */

.card--eu {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.5vw, 60px) clamp(16px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 40px);
    min-height: var(--card-min-h);
}
.card--eu .card__content {
    max-width: 55%;
    position: relative;
    z-index: var(--z-content);
}
.eu-map {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    max-width: 380px;
    border-radius: var(--radius-card) 0 var(--radius-card) 0;
    object-fit: cover;
    object-position: right bottom;
}


/* === CARD: COMPANIES ========================================== */

.card--companies {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.5vw, 60px) clamp(16px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 40px);
    min-height: var(--card-min-h);
}
.card--companies .card__content {
    max-width: 55%;
    flex-shrink: 0;
}
.company-logos {
    position: absolute;
    right: 0;
    top: 90px;
    width: 50%;
    height: 100%;
    pointer-events: none;
}
.company-logos img {
    position: absolute;
    object-fit: contain;
    height: 80px;
    width: 122px;
}
.company-logos img:nth-child(1) { top: 92px;  left: 161px; }                            /* JDE Peets */
.company-logos img:nth-child(2) { top: 0;     left: 134px; }                            /* Cargill   */
.company-logos img:nth-child(3) { top: 202px; left: 144px; }                            /* Frigol    */
.company-logos img:nth-child(4) { top: 157px; left: 6px;   width: 138px; height: 90px; } /* JBS      */
.company-logos img:nth-child(5) { top: 71px;  left: 0;     width: 138px; height: 90px; } /* Mondelez */


/* === CARD: COUNTRIES WITH DEFORESTATION RISK ================== */

.card--countries {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.5vw, 60px) clamp(16px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 40px);
    min-height: var(--card-min-h);
}
.card--countries .card__content {
    max-width: 60%;
    position: relative;
    z-index: var(--z-content);
}
.countries-map {
    position: absolute;
    right: 0;
    top: 115px;
    width: 285px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}


/* === ABOUT ==================================================== */

.about {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}
.about__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    pointer-events: none;
}
.about__inner {
    position: relative;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(30px, 3vw, 56px);
    padding: clamp(40px, 4vw, 70px) clamp(24px, 4vw, 70px);
    width: 100%;
}
.about__body,
.about__how {
    /* Typography comes from .quote .muted in the HTML. */
    text-align: center;
    max-width: min(90%, 900px);
}
.about__methodology {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}


/* === ABOUT — EXPERTS ========================================== */

.about__experts {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 3vw, 50px);
    flex-wrap: wrap;
    margin: clamp(30px, 4vw, 30px) 0;
}

.about__expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    max-width: 140px;
}

.about__expert-img-wrap {
    width: clamp(80px, 8vw, 120px);
    height: clamp(80px, 8vw, 120px);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--ae-darkblue);
    flex-shrink: 0;
}

.about__expert-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__expert-img-wrap--placeholder {
    background-color: var(--ae-darkblue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about__expert-icon {
    font-size: clamp(30px, 3vw, 45px);
    color: var(--white);
}

.about__expert-name {
    font-family: var(--font-heading);
    font-size: clamp(13px, 1vw, 16px);
    color: var(--ae-darkblue);
    margin: 0;
}

.about__expert-title {
    font-family: var(--font-body);
    font-size: clamp(11px, 0.9vw, 14px);
    color: var(--ae-black);
    opacity: 0.7;
    margin: 0;
}


/* === FOR-WHO ================================================== */

.for-who {
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(30px, 3vw, 56px);
    padding: clamp(40px, 4vw, 70px) clamp(24px, 3vw, 50px) clamp(60px, 6vw, 130px);
    max-width: var(--page-max);
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}
.for-who__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
}
.callout {
    border-left: 1px solid var(--ae-darkblue);
    padding: 20px clamp(16px, 4vw, 80px) 20px clamp(20px, 3vw, 50px);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 30px);
}
.callout:nth-child(2) { padding-right: clamp(16px, 2vw, 30px); }
.callout__icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--ae-darkblue);
}
.callout__icon i { font-size: 36px; }


/* ================================================================
   RESPONSIVE — WIDE / ULTRAWIDE MONITORS  (≥ 1500px)
   The outer container caps were lifted to 2200–2400px above so the
   page actually fills 1920 / 2560 / 3840 displays. Here we grow the
   fixed-pixel internals proportionally — floating illustrations,
   commodity mosaic, company-logo cluster, card padding — so the
   composition stays balanced rather than leaving small assets
   floating in oversized cards.
   ================================================================ */
@media (min-width: 1500px) {
    /* Hero — let the photo + spotlight breathe on tall ultrawide displays */
    .hero {
        height: auto;
        min-height: 562px;
        padding: clamp(100px, 7vw, 180px) clamp(40px, 3vw, 80px);
    }

    /* Cards in the 2x2 grid: padding and min-height grow with viewport so
       a giant card doesn't end up half-empty around a small text block. */
    .card--commodities,
    .card--eu,
    .card--companies,
    .card--countries {
        padding: clamp(40px, 3vw, 80px) clamp(28px, 2.5vw, 56px);
        min-height: clamp(380px, 28vw, 540px);
    }

    /* Commodity image mosaic */
    .commodity-images     { max-width: clamp(280px, 22vw, 460px); top: clamp(143px, 10vw, 220px); }
    .commodity-images img { height: clamp(70px, 5vw, 110px); }

    /* EU map and Origin-countries map */
    .eu-map        { max-width: clamp(380px, 26vw, 600px); }
    .countries-map { width: clamp(285px, 19vw, 460px); top: clamp(115px, 8vw, 180px); }

    /* Company-logo cluster: scale logos AND their absolute positions —
       the original layout uses px offsets that would otherwise leave a
       small cluster huddled in the top-left of a much wider card. */
    .company-logos                   { top: clamp(90px, 6vw, 140px); }
    .company-logos img               { width: clamp(122px, 8vw, 184px);   height: clamp(80px, 5.5vw, 124px); }
    .company-logos img:nth-child(1)  { top: clamp(92px, 6.4vw, 140px);    left: clamp(161px, 11vw, 244px); }
    .company-logos img:nth-child(2)  { top: 0;                            left: clamp(134px, 9.3vw, 204px); }
    .company-logos img:nth-child(3)  { top: clamp(202px, 14vw, 308px);    left: clamp(144px, 10vw, 220px); }
    .company-logos img:nth-child(4)  { top: clamp(157px, 11vw, 240px);    left: 6px;
                                       width: clamp(138px, 9.5vw, 210px); height: clamp(90px, 6.2vw, 138px); }
    .company-logos img:nth-child(5)  { top: clamp(71px, 5vw, 110px);      left: 0;
                                       width: clamp(138px, 9.5vw, 210px); height: clamp(90px, 6.2vw, 138px); }
}


/* ================================================================
   RESPONSIVE — TABLET / SMALL LAPTOP
   ================================================================ */

@media (max-width: 1200px) {
    .eu-map { width: 55%; }
}

@media (max-width: 960px) {
    .hero { height: auto; min-height: 400px; }


    /* --- CARD CONTENT CENTRING ----------------------------------- */
    .card__content {
        align-items: center;
        text-align: center;
    }

    /* --- GRID CARDS (commodities / eu / companies / countries)-- */

    .section-grid      { padding: 16px; gap: 16px; }

    .card--commodities,
    .card--eu,
    .card--companies,
    .card--countries   { min-height: auto; padding: 24px 16px; overflow: hidden; }

    .card--commodities .card__content,
    .card--eu         .card__content,
    .card--companies  .card__content,
    .card--countries  .card__content { max-width: 100%; }

  /* Commodities mosaic ------------------------------ */
    .commodity-images  {
        display: flex;
        position: static;
        width: 100%;
        max-width: 100%;
        top: auto; 
        right: auto;
    }
    .commodity-images__row--overflow { justify-content: center; }

    /* EU map: below text, full-width image */
    .eu-map {
        display: block;
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        top: auto; right: auto; bottom: auto;
        border-radius: var(--radius-card);
    }

    /* Company logos: flex-wrap row under text.
       Needs to beat the nth-child selectors that fix each logo in
       place on desktop — so reset top/left/width/height on all
       five via the same specificity. */
    .company-logos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px 20px;
        position: static;
        width: 100%;
        height: auto;
        top: auto; right: auto;
    }
    /* Each logo takes a third of the row width (minus the two 20px
       column gaps), so the 5 logos lay out as exactly 3 + 2. */
    .company-logos img,
    .company-logos img:nth-child(1),
    .company-logos img:nth-child(2),
    .company-logos img:nth-child(3),
    .company-logos img:nth-child(4),
    .company-logos img:nth-child(5) {
        position: static;
        top: auto; left: auto;
        width: calc((100% - 40px) / 3);
        max-width: none;
        height: 44px;
        object-fit: contain;
    }

    /* Countries map: below text, full-width */
    .countries-map {
        display: block;
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        top: auto; right: auto;
        border-radius: var(--radius-card);
    }

    /*end tryout */

    .card--commodities .card__content,
    .card--eu .card__content,
    .card--companies .card__content,
    .card--countries .card__content { max-width: 100%; }

    .for-who       { max-width: 100%; }
    .for-who__grid { grid-template-columns: 1fr; }
}

/* Case-studies card collapses to column only on tablet-portrait &
   below, so the row layout persists on laptops. */
@media (max-width: 900px) {
    .card--case-studies { flex-direction: column; min-height: auto; }
    .card__image-area   { width: 100%; padding: 0 10px; }
    .card__img-frame    { width: 100%; height: clamp(160px, 30vw, 320px); }
}

@media (max-width: 640px) {
    .hero { padding: 60px 20px; }

    .card--case-studies { padding: 30px 20px; }
    .card__image-area   { width: 100%; padding: 0; }
    .card__img-frame    { width: 100%; height: 180px; }
}


/* ================================================================
   RESPONSIVE — MOBILE
   ================================================================ */

@media (max-width: 768px) {

    /* --- HERO -------------------------------------------------- */
    .hero              { padding: 40px 16px; min-height: 360px; }
    .hero__content     { gap: 32px; max-width: 100%; }
    .hero__text        { gap: 16px; }
    .hero__bullets     { gap: 12px; width: 100%; max-width: 300px; }
    .hero__buttons     { width: 100%; justify-content: center; }
    .hero__buttons .btn-teal {
        width: 100%;
        max-width: 320px;
        justify-content: center;   /* centre the label inside the full-width pill */
        text-align: center;
    }

    /* --- HERO STRIP (cc-bullets) ----------------------------- */
    .cc-bullets                { padding: 24px 20px; }
    .cc-bullets .hero__bullets {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: auto;
        max-width: 100%;
    }
    .cc-bullets .hero__bullet       { gap: 10px; }
    .cc-bullets .hero__bullet i {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
    .cc-bullets .hero__bullet .label {
        font-size: 11px;
        letter-spacing: 0.04em;
    }
    .cc-bullets .hero__bullet:not(:last-child) {
        padding-right: 0;
        border-right: none;
    }

    .section-grid { grid-template-columns: 1fr; gap: 24px; }

    /* --- EXPLORE ---------------------------------------------- */
    .explore__intro       { padding: 32px 16px 40px; min-height: auto; }

    /* --- CASE STUDIES CARD ------------------------------------ */
    .section-case-studies { padding: 0 16px 16px; max-width: 100%; }
    .card--case-studies   { width: 100%; padding: 24px 16px; gap: 24px; }
    .card__img-frame      { height: 180px; }



    /* --- ABOUT ------------------------------------------------- */
    .about__inner     { padding: 32px 16px; gap: 24px; }
    .about__body,
    .about__how       { max-width: 100%; }
    .about__experts   { gap: 16px; }
    .about__expert    { max-width: 100px; }

    /* --- FOR-WHO ----------------------------------------------- */
    .for-who              { padding: 32px 16px 48px; gap: 24px; }
    .callout              { padding: 16px 16px 16px 20px; }
    .callout:nth-child(2) { padding-right: 16px; }
}

/* Very small phones — extra tightening inside the mobile range. */
@media (max-width: 390px) {
    .hero           { padding: 32px 12px; }
    .hero__bullets  { max-width: 100%; }

    .card--case-studies,
    .card--commodities,
    .card--eu,
    .card--companies,
    .card--countries { padding: 20px 12px; }

    .company-logos img,
    .company-logos img:nth-child(1),
    .company-logos img:nth-child(2),
    .company-logos img:nth-child(3),
    .company-logos img:nth-child(4),
    .company-logos img:nth-child(5) {
        height: 38px;
        /* width inherits the calc((100% - 40px) / 3) from the 768px block */
    }

    .about__inner  { padding: 28px 12px; }
    .for-who       { padding: 28px 12px 40px; }
}