/* about-us/corporate-social-responsibility - page-only rules, loaded AFTER
   about-us-family.css. Measured on /about-us/corporate-social-responsibility-wp.
   Nothing here can reach another About Us page. */

/* ---- Breadcrumb ------------------------------------------------------------
   This page's hero is LIGHT, so the family's white crumb was near invisible.
   Owner 2026-10-06: every item 14px (the family size), both dots black;
   "Home" / "About Us" black, the current item #666. */
.zabu .zabu-hero.is-split .zabu-crumb a { font-size: 14px; color: #000; }
.zabu .zabu-hero.is-split .zabu-crumb a .zabu-crumb-label { color: #000; }
.zabu .zabu-hero.is-split .zabu-crumb a .zabu-dot svg { fill: #000; }
.zabu .zabu-hero.is-split .zabu-crumb a:hover .zabu-crumb-label { color: #046bd2; }
.zabu .zabu-hero.is-split .zabu-crumb a:hover .zabu-dot svg { fill: #000; }
.zabu .zabu-hero.is-split .zabu-crumb .is-current { font-size: 14px; color: #666; }
.zabu .zabu-hero.is-split .zabu-crumb .is-current .zabu-dot svg { fill: #000; }

/* ---- In-copy links ----------------------------------------------------------
   Live keeps text links in the theme link colour #046bd2; the shared
   `.zmit a { color: inherit }` turned them black. Buttons and the crumb keep
   their own colours; only the page's own sections (the footer sits outside them). */
.zabu > section p a:not([class]),
.zabu > section li a:not([class]) { color: #046bd2; }
.zabu > section p a:not([class]):hover,
.zabu > section li a:not([class]):hover { text-decoration: underline; }
.zabu .zabu-crumb a { text-decoration: none; }

/* ---- Image gallery ----------------------------------------------------------
   Live is an Elementor image carousel: 3 slides (2 on tablet, 1 on phone),
   24px apart, moves one slide at a time, loops forever, autoplays every 2.5s
   with an 800ms slide, and draws white 25px chevron-circle arrows INSIDE the
   images, 10px from each edge, vertically centred. No scrollbar. */
.zabu .zabu-gallery-carousel { position: relative; overflow: hidden; }
.zabu .zabu-gallery-carousel .zabu-gallery-rail {
    display: flex; gap: 24px; overflow: visible; padding: 0;
    scrollbar-width: none; will-change: transform;
}
.zabu .zabu-gallery-carousel .zabu-gallery-rail::-webkit-scrollbar { display: none; }
.zabu .zabu-gallery-carousel .zabu-gallery-rail img {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3); height: auto; aspect-ratio: 418 / 416;
    object-fit: cover; display: block;
}
.zabu .zabu-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 25px; height: 25px; padding: 0; border: 0; background: none;
    color: #fff; cursor: pointer; line-height: 0;
}
.zabu .zabu-gallery-nav svg { width: 25px; height: 25px; fill: currentColor; display: block; }
.zabu .zabu-gallery-nav.prev { left: 10px; }
.zabu .zabu-gallery-nav.next { right: 10px; }
.zabu .zabu-gallery-nav:focus-visible { outline: 2px solid #046bd2; outline-offset: 2px; border-radius: 50%; }

@media (max-width: 1024px) {
    .zabu .zabu-gallery-carousel .zabu-gallery-rail img {
        flex-basis: calc((100% - 24px) / 2); width: calc((100% - 24px) / 2);
    }
}
@media (max-width: 767px) {
    .zabu .zabu-gallery-carousel .zabu-gallery-rail img { flex-basis: 100%; width: 100%; }
}

/* ============================================================================
   TABLET (767-1024, the reference's tablet range), measured at 768 on
   /about-us/corporate-social-responsibility-wp. Desktop and phone untouched.
   ============================================================================ */
@media (min-width: 767.02px) and (max-width: 1024.98px) {
    /* hero: crumb, then the figure (285 x 249, left), then h1 34/600/48 and
       copy 14/22; 20px side padding */
    .zabu .zabu-hero.is-split { padding: 30px 20px 27px; min-height: 0; gap: 3px; }   /* figure starts 56 down, right under the crumb */
    .zabu .zabu-hero.is-split .zabu-hero-split { display: flex; flex-direction: column; gap: 0; }
    .zabu .zabu-hero.is-split .zabu-hero-split-figure { order: -1; width: 285px; max-width: 100%; margin: 0; }
    .zabu .zabu-hero.is-split .zabu-hero-split-figure img { width: 285px; height: 249px; object-fit: cover; display: block; }
    /* the desktop flex-basis (710) became a 710px HEIGHT once stacked */
    .zabu .zabu-hero.is-split .zabu-hero-split-copy { flex: none; min-height: 0; max-width: none; }
    /* the copy column is a flex column with its own 20px gap - no extra h1 margin */
    .zabu .zabu-hero.is-split h1 { font-size: 34px; line-height: 48px; margin: 0; max-width: none; }
    .zabu .zabu-hero.is-split .zabu-hero-sub { max-width: none; }
    .zabu .zabu-hero.is-split .zabu-hero-sub p { font-size: 14px; line-height: 22px; margin: 0 0 23px; }
    .zabu .zabu-hero.is-split .zabu-hero-sub p:last-child { margin-bottom: 0; }

    /* focus areas: 3 cards a row, 20 apart; #f7f7fc card, image 147 tall,
       body 25px, title 16/600/24, copy 12/16.8 */
    .zabu .zabu-focus { padding: 30px 15px; }
    .zabu .zabu-focus h2 { font-size: 34px; line-height: 44px; margin: 0 0 30px; }
    .zabu .zabu-focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .zabu .zabu-focus-card img { width: 100%; height: 147px; object-fit: cover; }
    .zabu .zabu-focus-body { padding: 25px; min-height: 286px; }   /* live card 433 = 147 image + 286 */
    .zabu .zabu-focus-body h3 { font-size: 16px; line-height: 24px; margin: 0 0 20px; }
    .zabu .zabu-focus-body p { font-size: 12px; line-height: 16.8px; }

    /* commitments in numbers: h2 41/600/48, rows 30 below it, 20 apart */
    .zabu .zabu-count { padding: 0 20px 50px; }
    .zabu .zabu-count h2 { font-size: 41px; line-height: 48px; margin: 0 0 30px; }

    /* impact: 2 cards a row, 20 apart; image 236 tall, body 25px */
    .zabu .zabu-impact { padding: 30px 15px; }
    .zabu .zabu-impact h2 { font-size: 34px; line-height: 44px; margin: 0 0 64px; }
    .zabu .zabu-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .zabu .zabu-impact-card img { width: 100%; height: 236px; object-fit: cover; }
    .zabu .zabu-impact-body { padding: 25px; min-height: 260px; }   /* live body min-height 260 */
    .zabu .zabu-impact-body h3 { font-size: 16px; line-height: 24px; margin: 0 0 20px; }
    .zabu .zabu-impact-body p { font-size: 12px; line-height: 16.8px; }

    /* gallery: 65px sides, h2 41/65, two 300px slides */
    .zabu .zabu-gallery { padding: 50px 65px 55px; }
    .zabu .zabu-gallery h2 { font-size: 41px; line-height: 65px; }

    /* end CTA: logo + copy (336) left, the two buttons stacked on the right */
    .zabu .zabu-endcta { padding: 60px 100px; display: grid; grid-template-columns: 336px auto; column-gap: 32px; align-items: start; }
    .zabu .zabu-endcta-copy img { width: 336px; height: 47px; object-fit: contain; object-position: left center; }
    .zabu .zabu-endcta-copy p { font-size: 18px; line-height: 26px; margin-top: 0; }   /* the copy column's own 20px gap spaces it */
    .zabu .zabu-endcta-actions { display: flex; flex-direction: column; gap: 21px; margin: 0; }
    .zabu .zabu-endcta-btn { width: 185px; height: 47px; padding: 0; justify-content: center; font-size: 13px; }
}

/* ============================================================================
   PHONE (<=767), measured at 390 on /about-us/corporate-social-responsibility-wp
   ============================================================================ */
@media (max-width: 767.01px) {
    /* hero: 40/20 padding; crumb, then the 285 x 249 figure CENTRED, then
       h1 31/600/41 and copy 14/22 (20 under the h1, 23 between paragraphs) */
    .zabu .zabu-hero.is-split { padding: 40px 20px; min-height: 0; gap: 0; }
    .zabu .zabu-hero.is-split .zabu-hero-split { display: flex; flex-direction: column; gap: 0; }
    .zabu .zabu-hero.is-split .zabu-hero-split-figure { order: -1; width: 285px; max-width: 100%; margin: 0 auto; }
    .zabu .zabu-hero.is-split .zabu-hero-split-figure img { width: 285px; max-width: 100%; height: 249px; object-fit: cover; display: block; }
    .zabu .zabu-hero.is-split .zabu-hero-split-copy { flex: none; min-height: 0; max-width: none; gap: 20px; }
    .zabu .zabu-hero.is-split h1 { font-size: 31px; line-height: 41px; margin: 0; max-width: none; }
    .zabu .zabu-hero.is-split .zabu-hero-sub { max-width: none; }
    .zabu .zabu-hero.is-split .zabu-hero-sub p { font-size: 14px; line-height: 22px; margin: 0 0 23px; }
    .zabu .zabu-hero.is-split .zabu-hero-sub p:last-child { margin-bottom: 0; }

    /* focus areas: one column, 20 apart; image 239 tall; body 25px,
       title 16/600/24, copy 12/16.8 */
    .zabu .zabu-focus { padding: 50px 10px; }
    .zabu .zabu-focus h2 { font-size: 31px; line-height: 41px; margin: 0 0 30px; }
    .zabu .zabu-focus-grid { grid-template-columns: 1fr; gap: 20px; }
    .zabu .zabu-focus-card img { width: 100%; height: 239px; object-fit: cover; }
    .zabu .zabu-focus-body { padding: 25px; min-height: 0; }
    .zabu .zabu-focus-body h3 { font-size: 16px; line-height: 24px; margin: 0 0 20px; }
    .zabu .zabu-focus-body p { font-size: 12px; line-height: 16.8px; }

    /* commitments: h2 30/600/39; each row a 30px number then a 14px label,
       15 apart; rows 20 apart */
    .zabu .zabu-count { padding: 25px 10px 50px; }
    .zabu .zabu-count h2 { font-size: 30px; line-height: 39px; margin: 0 0 30px; }
    .zabu .zabu-count-row { gap: 20px; }
    .zabu .zabu-count-cell { gap: 15px; }
    .zabu .zabu-count-num { font-size: 30px; line-height: 30px; }
    .zabu .zabu-count-label { font-size: 14px; line-height: 14px; }

    /* impact: one column, cards 20 apart; image 249 tall */
    .zabu .zabu-impact { padding: 50px 10px; }
    .zabu .zabu-impact h2 { font-size: 31px; line-height: 41px; margin: 0 0 64px; }
    .zabu .zabu-impact-grid { grid-template-columns: 1fr; gap: 20px; }
    .zabu .zabu-impact-card img { width: 100%; height: 249px; object-fit: cover; }
    .zabu .zabu-impact-body { padding: 6px 25px 25px; min-height: 0; }   /* live: title 6px under the image */
    .zabu .zabu-impact-body h3 { font-size: 16px; line-height: 24px; margin: 0 0 20px; }
    .zabu .zabu-impact-body p { font-size: 12px; line-height: 16.8px; }

    /* gallery: 10px sides, h2 31/41; owner 2026-10-07: ONE full-width photo per screen */
    .zabu .zabu-gallery { padding: 50px 10px; }
    .zabu .zabu-gallery h2 { font-size: 31px; line-height: 41px; margin: 0 0 30px; }
    .zabu .zabu-gallery-carousel .zabu-gallery-rail img { flex-basis: 100%; width: 100%; height: auto; aspect-ratio: 418 / 416; }

    /* end CTA: logo 310 x 43, copy 18/26 under it, the two 185 x 47 buttons centred */
    .zabu .zabu-endcta { padding: 40px 40px 60px; gap: 0; }
    .zabu .zabu-endcta-copy img { width: 310px; max-width: 100%; height: 43px; object-fit: contain; object-position: left center; }
    .zabu .zabu-endcta-copy p { font-size: 18px; line-height: 26px; margin-top: 0; }   /* the copy column's own 20px gap spaces it */
    .zabu .zabu-endcta-actions { display: flex; flex-direction: column; align-items: center; gap: 21px; margin-top: 69px; }
    .zabu .zabu-endcta-btn { width: 185px; height: 47px; padding: 0; justify-content: center; font-size: 13px; }
}

/* Breadcrumb, phones: owner 2026-10-07 - always ONE row. At 14px it wrapped on
   narrower phones; every item drops to 12px (still equal) and never wraps. */
@media (max-width: 767.01px) {
    .zabu .zabu-hero.is-split .zabu-crumb { flex-wrap: nowrap; white-space: nowrap; }
    .zabu .zabu-hero.is-split .zabu-crumb a,
    .zabu .zabu-hero.is-split .zabu-crumb .is-current { font-size: 12px; }
}