/* ============================================================
   Why Connectivity Component
   ============================================================ */

.why-conn-section {
    background-color: #05001C;
    overflow: hidden;
    position: relative; /* required: iOS WebKit won't clip GPU-composited children without a positioned ancestor */
    margin: 80px 0;
    padding-bottom: 40px;
}

/* ---- Hero image ---- */
.why-conn-hero-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center top;
}

/* ---- Inner wrapper: header + content, kept within max-width ---- */
.why-conn-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 36px 0;
}

.why-conn-inner--content {
    padding-top: 0;
    padding-bottom: 40px;
}

/* ---- Header ---- */
.why-conn-header {
    text-align: center;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-conn-section.is-visible .why-conn-header {
    opacity: 1;
    transform: translateY(0);
}

.why-conn-header--space-above {
    margin-top: 8vw;
}

.why-conn-heading {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(28px, 3.6vw, 52px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 14px;
}

.why-conn-subtitle {
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   4-column grid, 2 rows:
     Row 1: [landscape oval] [bullet1] [bullet2] [bullet3]  — fills full width
     Row 2: [bullet4] [bullet5] [bullet6] [deco]            — shifted right ½ col
   Bullets 4–6 and deco use translateX(50%) so each sits
   visually between two row-1 circles (honeycomb stagger).

   Every item gets an EXPLICIT grid-column/grid-row (keyed off a
   stable identity class, not nth-child/auto-flow). Bullets are
   optional — when one is left empty its DOM node is skipped
   entirely — and explicit placement means a missing bullet just
   leaves an empty cell instead of reflowing every sibling that
   follows it into the wrong row/column.
   ============================================================ */
.why-conn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 15px;
    column-gap: 30px;
    padding-bottom: 48px;
}

.why-conn-item--landscape { grid-column: 1; grid-row: 1; }
.why-conn-item--bullet-1  { grid-column: 2; grid-row: 1; }
.why-conn-item--bullet-2  { grid-column: 3; grid-row: 1; }
.why-conn-item--bullet-3  { grid-column: 4; grid-row: 1; }
.why-conn-item--bullet-4  { grid-column: 1; grid-row: 2; }
.why-conn-item--bullet-5  { grid-column: 2; grid-row: 2; }
.why-conn-item--bullet-6  { grid-column: 3; grid-row: 2; }
.why-conn-item--deco      { grid-column: 4; grid-row: 2; }

/* ---- Each grid item is a square ---- */
.why-conn-item {
    aspect-ratio: 1 / 1;
    position: relative;
    opacity: 0;
    transform: translateX(-60px); /* default direction: from left */
    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.5s;
    will-change: transform, opacity;
}

.why-conn-section.is-visible .why-conn-item {
    opacity: 1;
    transform: none;
}

/* ---- Bullet 2 & 3: from right ---- */
.why-conn-item--bullet-2,
.why-conn-item--bullet-3 {
    transform: translateX(60px);
}

/* ---- Bullet 5: stays — no animation ---- */
.why-conn-item--bullet-5 {
    opacity: 1;
    transform: translateX(50%); /* stagger offset only, always in final position */
    transition: none;
    will-change: auto;
}

/* ---- Circle: fills the item square ---- */
.why-conn-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1a2d7a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14%;
    gap: 20px;
    box-sizing: border-box;
}

/* ---- Icon ---- */
.why-conn-icon {
    width: 28%;
    height: auto;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

/* ---- Label (inside circle) ---- */
.why-conn-label {
    font-family: "Space Grotesk", sans-serif;
    /* font-size: clamp(11px, 1.1vw, 15px); */
    font-size: clamp(14px, 1.4vw, 30px);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    text-align: center;
    margin: 0;
}

/* ============================================================
   Landscape oval (col 1, row 1)
   Child is 200% wide (2:1 ellipse); right edge flush with
   col 1 right boundary; left half clipped by overflow: hidden.
   ============================================================ */
.why-conn-item--landscape {
    overflow: visible; /* let the 200%-wide child bleed left */
}

.why-conn-circle--landscape {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: none;
    padding: 0;
}

.why-conn-landscape-img {
    width: 100%;
    height: -webkit-fill-available;
    object-fit: contain;
    display: block;
}

/* ============================================================
   Row 2 stagger — bullets 4–6
   All shifted right by 50% (half-column). Directional entrance
   offsets are composed on top of the stagger.
   ============================================================ */
/* Bullet 4: from left — stagger + leftward offset */
.why-conn-item--bullet-4 {
    transform: translateX(calc(50% - 60px));
}

.why-conn-section.is-visible .why-conn-item--bullet-4 {
    transform: translateX(50%);
    opacity: 1;
}

/* Bullet 5: override generic is-visible to preserve stagger offset */
.why-conn-section.is-visible .why-conn-item--bullet-5 {
    transform: translateX(50%);
    opacity: 1;
}

/* Bullet 6: from right — stagger + rightward offset */
.why-conn-item--bullet-6 {
    transform: translateX(calc(50% + 200px));
}

.why-conn-section.is-visible .why-conn-item--bullet-6 {
    transform: translateX(50%);
    opacity: 1;
}

/* ============================================================
   Decorative half-circle (col 4, row 2)
   translateX(50%) shifts it right by half its own width so
   only the left half is visible; the section clips the rest.
   ============================================================ */
/* Deco also comes from the right (it's on the right edge) */
.why-conn-item--deco {
    transform: translateX(calc(50% + 200px));
}

.why-conn-section.is-visible .why-conn-item--deco {
    transform: translateX(50%);
    opacity: 1;
}

/* ---- Bottom content ---- */
.why-conn-content {
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.why-conn-content p { margin-bottom: 12px; }
.why-conn-content p:last-child { margin-bottom: 0; font-size: 16px; }
.why-conn-btn.conn-cta-btn-wrap{
    padding-bottom: 80px;
}

.why-conn-section--no-margins {
    margin: 0;
}

/* ============================================================
   Alternate layout: image and deco swap ends, alternate background.
   Row 1 keeps bullets 1–3 in their normal order but the landscape
   image moves from the front to the back (bullet 3 becomes the
   optional one). Row 2 keeps bullets 4–6 in their normal order but
   the deco half-circle moves from the back to the front, so it now
   bleeds off the left edge instead of the right.
   Explicit grid-column/grid-row (not order/auto-flow) so a missing
   bullet can never push a sibling into the wrong row.
   ============================================================ */
.why-conn-section--alt {
    background: linear-gradient(to top, #05001C 40%, #3051E6 100%) !important;
}

.why-conn-section--alt .why-conn-item--bullet-3  { grid-column: 1; grid-row: 1; }
.why-conn-section--alt .why-conn-item--bullet-1  { grid-column: 2; grid-row: 1; }
.why-conn-section--alt .why-conn-item--bullet-2  { grid-column: 3; grid-row: 1; }
.why-conn-section--alt .why-conn-item--landscape { grid-column: 4; grid-row: 1; }
.why-conn-section--alt .why-conn-item--deco       { grid-column: 1; grid-row: 2; }
.why-conn-section--alt .why-conn-item--bullet-4  { grid-column: 2; grid-row: 2; }
.why-conn-section--alt .why-conn-item--bullet-5  { grid-column: 3; grid-row: 2; }
.why-conn-section--alt .why-conn-item--bullet-6  { grid-column: 4; grid-row: 2; }

/* ---- Row 1: bullet 2 & the (now last) image enter from the right ---- */
.why-conn-section--alt .why-conn-item--bullet-3,
.why-conn-section--alt .why-conn-item--bullet-1 {
    transform: translateX(-60px);
}

.why-conn-section--alt .why-conn-item--bullet-2,
.why-conn-section--alt .why-conn-item--landscape {
    transform: translateX(60px);
}

/* Image now bleeds off the right edge instead of the left */
.why-conn-section--alt .why-conn-circle--landscape {
    right: auto;
    left: 0;
}

/* ---- Row 2: stagger shifts left so deco bleeds off the left edge ---- */
.why-conn-section--alt .why-conn-item--deco,
.why-conn-section--alt .why-conn-item--bullet-4,
.why-conn-section--alt .why-conn-item--bullet-5,
.why-conn-section--alt .why-conn-item--bullet-6 {
    transform: translateX(calc(-50% - 60px));
}

/* Bullet 6: enters from the right instead of the left */
.why-conn-section--alt .why-conn-item--bullet-6 {
    transform: translateX(calc(-50% + 60px));
}

.why-conn-section--alt .why-conn-item--deco {
    transform: translateX(calc(-50% - 200px));
}

.why-conn-section.is-visible.why-conn-section--alt .why-conn-item--deco,
.why-conn-section.is-visible.why-conn-section--alt .why-conn-item--bullet-4,
.why-conn-section.is-visible.why-conn-section--alt .why-conn-item--bullet-5,
.why-conn-section.is-visible.why-conn-section--alt .why-conn-item--bullet-6 {
    transform: translateX(-50%);
    opacity: 1;
}

/* ---- Responsive: mobile ---- */
@media screen and (max-width: 768px) {
    .why-conn-inner {
        padding: 40px 24px 0;
    }
    .why-conn-inner--content {
        padding-top: 32px;
        padding-bottom: 56px;
    }
    .why-conn-header {
        margin-bottom: 32px;
    }
    .why-conn-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 8px;
        row-gap: 12px;

        margin: 0 20px;
    }
    /* Desktop honeycomb uses explicit 4-col placement; mobile reflows
       to a simple 2-col grid in natural DOM order, alt layout included. */
    .why-conn-grid .why-conn-item {
        grid-column: auto;
        grid-row: auto;
    }
    /* Odd bullet count (1 / 3 / 5): on the 2-col mobile grid the final bullet
       lands alone in its row. Span both columns and center it, keeping the same
       single-circle width as its siblings (column-gap is 8px). data-bullets and
       .why-conn-item--bullet-last are both set server-side in the PHP. */
    .why-conn-grid[data-bullets="1"] .why-conn-item--bullet-last,
    .why-conn-grid[data-bullets="3"] .why-conn-item--bullet-last,
    .why-conn-grid[data-bullets="5"] .why-conn-item--bullet-last {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 4px);
    }
    /* iOS Safari: grid items default to min-width:auto which lets content
       blow out the 1fr track size; 0 forces them to respect the track. */
    .why-conn-item {
        min-width: 0;
        min-height: 0;
    }
    /* Reset row-2 stagger & directional offsets for mobile auto-flow */
    .why-conn-grid .why-conn-item--bullet-4,
    .why-conn-grid .why-conn-item--bullet-6 {
        transform: translateX(-60px); /* restore default left direction */
    }
    .why-conn-grid .why-conn-item--bullet-5 {
        opacity: 0;
        transform: translateX(-60px);
        transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: 0.5s;
        will-change: transform, opacity;
    }
    .why-conn-section.is-visible .why-conn-grid .why-conn-item--bullet-4,
    .why-conn-section.is-visible .why-conn-grid .why-conn-item--bullet-5,
    .why-conn-section.is-visible .why-conn-grid .why-conn-item--bullet-6 {
        transform: none;
        opacity: 1;
    }
    /* Landscape oval and deco half-circle are desktop-only */
    .why-conn-item--landscape,
    .why-conn-item--deco {
        display: none;
    }
    .why-conn-content {
        max-width: 351px;
    }
    .why-conn-label {
        max-width: 100%;
    }
    .why-conn-section .conn-cta-btn-wrap {
        margin: 0 24px;
    }
    .why-conn-circle {
        gap: 10px;
        padding: 14% 12%;
    }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .why-conn-header,
    .why-conn-item {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
    /* Restore stagger offsets for row-2 items */
    .why-conn-item--bullet-4,
    .why-conn-item--bullet-5,
    .why-conn-item--bullet-6,
    .why-conn-item--deco {
        transform: translateX(50%);
    }
    .why-conn-section--alt .why-conn-item--bullet-4,
    .why-conn-section--alt .why-conn-item--bullet-5,
    .why-conn-section--alt .why-conn-item--bullet-6,
    .why-conn-section--alt .why-conn-item--deco {
        transform: translateX(-50%);
    }
}