/* ==========================================
   CAPABILITIES SECTION
   Filename  : css/capabilities.css
   Depends on: global.css
   ==========================================

   From global — DO NOT redeclare here:
   ✓  h2  → DM Sans, weight 600, letter-spacing -3%, size responsive
   ✓  h3  → weight 600, 32px/35px @1024px+, letter-spacing -3%
   ✓  p   → weight 500, 16px/24px, letter-spacing -3%
   ✓  .container    → max-width 1340px, margin auto, padding 0 20px
   ✓  .container-xl → max-width 1520px, margin auto, padding 0 20px
   ✓  --white, --accent-color (#E3001D), --primary-color
   ✓  CSS reset, box-sizing

   ========================================== */


/* =========================================
   SECTION
   ========================================= */

.capabilities {
    width: 100%;
    background: var(--primary-color);
}


/* =========================================
   HEADER — Red square + section heading
   ========================================= */

.capabilities__header {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
}

/* Square anchored to section top-left, outside container flow */
.capabilities__square {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 320px;
    background: var(--accent-color);
}

.capabilities__header>.container {
    position: relative;
    z-index: 1;
}

/*
 * Section heading — only weight (700 vs global 600) and line-height (51px vs 54px @1024px)
 * differ from global h2. Font-size, letter-spacing, font-family all inherited.
 *
 * margin-left pulls the heading left past the container's content edge into the red square.
 * Adjust this single value to control how far into the square the text sits.
 */
.capabilities__heading {
    font-weight: 600;
    line-height: 51px;
    max-width: 1300px;
    /*
     * Set by capabilities.js (mirrors hero.js):
     * 50% of the word “Building” inside the red square, 50% + rest of text outside.
     * Fallback −65px is the approximate desktop value.
     */
    margin-left: var(--capabilities-heading-margin, -65px);
}


/* =========================================
   CARDS GRID
   ========================================= */

.capabilities__grid {
    display: flex;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 80px;
    margin-top: -60px;
}

/* Column 1 — card 1 pinned to bottom */
.capabilities__col--1 {
    flex: 413 1 0px;
    min-width: 413px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Columns 2 & 3 — common positioned ancestor for the shared image */
.capabilities__right {
    flex: 1063 1 0px;
    min-width: 0;
    display: flex;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

/*
 * ::before — covers the 12px horizontal flex gap between col--2 and col--3.
 * Gap left edge = col--2 width = (100% − 12px) × 450/1051 ≈ 42.8% − 5px.
 */
.capabilities__right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(42.8% - 5px);
    width: 12px;
    background: var(--primary-color);
    z-index: 1;
    pointer-events: none;
}

/*
 * ::after — covers the entire col--3 area below card 3 (gap + card 4 area).
 * Extends bottom:0 instead of a fixed 12px so rendering rounding never exposes
 * a sliver of the shared image below card 3.
 * z-index:0 → same level as image but LATER in DOM → paints over it.
 * Cards are z-index:1 → still render on top of this cover. ✓
 */
.capabilities__right::after {
    content: '';
    position: absolute;
    top: 282px;
    left: calc(42.8% + 7px);
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    z-index: 0;
    pointer-events: none;
}

/* Column 2 */
.capabilities__col--2 {
    flex: 450 1 0px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Column 3 — two cards stacked */
.capabilities__col--3 {
    flex: 601 1 0px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================
   SHARED IMAGE — visible in cards 2 & 3
   =========================================
   Image spans the full height of .capabilities__right (= card 2's min-height: 616px).
   Horizontally centered at the seam between col 2 and col 3:
     seam left = col2_width = (100% - 12px) * 450/1051 ~= 42.8% - 5px
   Cards 2 & 3 have semi-transparent backgrounds (~20% opacity) so the image
   shows through. The ::before pseudo-element on .capabilities__right covers
   the 12px horizontal gap. .capabilities__col--3 background covers the
   12px vertical gap between card 3 and card 4.
   ========================================= */

.capabilities__shared-img {
    position: absolute;
    top: 0;
    left: calc(42.8% - 5px);
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    /* Prevent global img { max-width: 100% } reset from squashing and stretching the image */
    max-width: none;
}


/* =========================================
   CARD — Base
   ========================================= */

.capabilities__card {
    position: relative;
    z-index: 1;

    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Top block: heading + body text, 12px apart, max-width limits line length */
.capabilities__card-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    /*
     * On wide desktops, max-width:326px limits line length.
     * On narrower screens the card itself is narrower, so we must also cap at 100%
     * to prevent the card-top from ever exceeding its card's content area.
     * overflow:hidden is a hard backstop so any edge-case overflow never leaks
     * into adjacent card columns.
     */
    max-width: min(326px, 100%);
    overflow: hidden;
    /* Prevent long words from breaking out of the constrained width */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Body text inside card — constrained right to give breathing room */
.capabilities__card-top p {
    padding-right: 80px;
}

/*
 * h3 and p inside cards are fully handled by global:
 * h3 @1024px+ = 32px / 35px / weight 600 / letter-spacing -3%
 * p           = 16px / 24px / weight 500 / letter-spacing -3%
 * No local overrides needed.
 */


/* =========================================
   CARD — Variants (sizes & backgrounds)
   ========================================= */

.capabilities__card--1 {
    min-width: 413px;
    min-height: 282px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.2) 100%),
        linear-gradient(116.18deg, #000000 18.95%, rgba(0, 0, 0, 0) 74.41%),
        url('/home-assets/assets/images/card-1.jpg') center / cover no-repeat;
}

.capabilities__card--2 {
    min-width: 450px;
    min-height: 616px;
    flex: 1;
}

.capabilities__card--3 {
    min-width: 413px;
    min-height: 282px;
}

.capabilities__card--4 {
    min-width: 601px;
    min-height: 322px;
    flex: 1;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.2) 100%),
        url('/home-assets/assets/images/card-4.jpg') center / cover no-repeat;
}


/* =========================================
   READ MORE
   ========================================= */

.capabilities__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--white);
}

.capabilities__read-more-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease,
        margin-right 0.35s ease;
    margin-right: 0;
}

.capabilities__card:hover .capabilities__read-more-text,
.capabilities__read-more:hover .capabilities__read-more-text {
    max-width: 100px;
    opacity: 1;
    margin-right: 8px;
}

.capabilities__read-more svg {
    flex-shrink: 0;
    display: block;
    transition: transform 0.3s ease;
}

.capabilities__card:hover .capabilities__read-more svg,
.capabilities__read-more:hover .capabilities__read-more svg {
    transform: translateX(4px);
}


/* =========================================
   RESPONSIVE — TABLET  (768px – 1023px)
   Keep the desktop grid layout but let all
   flex items shrink below their desktop
   min-widths so the proportions stay clean.
   ========================================= */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Remove hard min-widths — flex ratios keep proportions */
    .capabilities__col--1,
    .capabilities__right,
    .capabilities__col--2,
    .capabilities__col--3,
    .capabilities__card--1,
    .capabilities__card--2,
    .capabilities__card--3,
    .capabilities__card--4 {
        min-width: 0;
    }

    /* Reduce card-2's tall min-height so the section isn't oversized on tablet */
    .capabilities__card--2 {
        min-height: 460px;
    }

    .capabilities__card--3 {
        min-height: 200px;
    }

    .capabilities__card--4 {
        min-height: 248px;
    }

    .capabilities__grid {
        padding-bottom: 48px;
    }

    /* Square/header stay at 240px — the JS re-measures on every resize.
     * Heading font inherits from global: h2 @ 768px = 40px (no local override).
     * Line-height set here (section-specific) to keep proportions tight;
     * the base 51px lh is for 48px font — too loose for 40px. */
    .capabilities__square {
        min-width: 240px;
        min-height: auto;
    }

    .capabilities__header {
        min-height: 240px;
    }

    .capabilities__heading {
        line-height: 46px;
    }
}

/* Below 1024px the large negative margin-top is visually too aggressive */
@media (max-width: 1023px) {
    .capabilities__grid {
        margin-top: 20px;
    }

    /*
     * On tablet the cards are much narrower than desktop (~220px for card-2).
     * The 80px right-padding would leave only ~76px for text, collapsing long
     * headings into so many wrapped lines that the card-top visually bleeds
     * into adjacent card columns.
     */
    .capabilities__card-top p {
        padding-right: 0;
    }
}


/* =========================================
   RESPONSIVE — MOBILE  (< 768px)
   Cards stack in a single column, each
   full-width.  Cards 3 & 4 share an image
   via .capabilities__col--3::before.
   ========================================= */
@media (max-width: 767px) {

    /* ---- Grid: vertical stack ---- */
    .capabilities__grid {
        flex-direction: column;
        gap: 12px;
        /* margin-top overridden to 20px by the max-width: 1023px block above */
        padding-bottom: 40px;
    }

    /* Square/header at 120px baseline for all mobile (< 768px).
     * Heading font inherits from global: h2 @ base = 24px, @ 576px = 34px.
     * Both are larger than card h3 (20px / 26px), so hierarchy is preserved.
     * The JS (capabilities.js) re-reads square.offsetWidth on every resize,
     * so the heading position auto-adjusts to match the new squareRight.
     * Line-height 40px: proportional for 24–34px font (1.67–1.18×) —
     * avoids the awkward gap from the 51px base rule. */
    .capabilities__header {
        min-height: auto;
        padding-top: 112px;
        padding-bottom: 24px;
    }

    .capabilities__square {
        position: absolute;
        left: 20px;
        top: 48px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        bottom: auto;
    }

    .capabilities__heading {
        margin-left: 0;
        line-height: 40px;
    }

    /* Col-1: natural size, no longer pushed to bottom.
     * align-items:stretch (default) makes card-1 fill the full column width.
     * flex:none lets the column size to the card's content/min-height. */
    .capabilities__col--1 {
        flex: none;
        min-width: 0;
        justify-content: flex-start;
    }

    /*
     * Right wrapper: stack col-2 and col-3 vertically.
     * Background image placed here (on the common ancestor) so it is ONE
     * continuous image shared across both card-2 and card-3.
     * Both cards have semi-transparent backgrounds (~20% dark overlay via #0F172A33)
     * so the image shows through. Card-4 has its own card-4.jpg that covers it.
     */
    .capabilities__right {
        flex: none;
        flex-direction: column;
        gap: 0;
        background: url('/home-assets/assets/images/card-2_and_card-3.jpg') center / cover no-repeat;
    }

    /* ---- Hide desktop-only gap-masking elements ---- */
    .capabilities__shared-img,
    .capabilities__right::before,
    .capabilities__right::after {
        display: none;
    }

    /*
     * Col-2 and col-3: flex:none overrides the desktop flex-grow values (450 / 601).
     * With flex-grow > 0 in a column-direction flex container, the browser can
     * size columns proportionally instead of by content, creating extra height
     * that exposes the .capabilities__right background as a gap strip.
     * flex:none = flex: 0 0 auto → each column is exactly its content height.
     */
    .capabilities__col--2 {
        flex: none;
        min-width: 0;
    }

    /* Col-3: flex:none + gap:0 (no strip between card-3 and card-4) */
    .capabilities__col--3 {
        flex: none;
        min-width: 0;
        gap: 0;
    }

    /* ---- Cards: full-width, no desktop min-widths ---- */
    .capabilities__card--1,
    .capabilities__card--2,
    .capabilities__card--3,
    .capabilities__card--4 {
        min-width: 0;
        width: 100%;
    }

    /*
     * Card-1: re-declare the FULL background shorthand at mobile.
     * Overriding background-size / background-position as separate
     * properties on a 3-layer shorthand background can produce
     * inconsistent rendering (e.g. the image not covering) across
     * browsers at certain viewport widths. The full shorthand is
     * the only safe guarantee all three layers are applied correctly.
     */
    .capabilities__card--1 {
        min-height: 340px;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.2) 100%),
            linear-gradient(116.18deg, #000000 18.95%, rgba(0, 0, 0, 0) 74.41%),
            url('/home-assets/assets/images/card-1.jpg') center / cover no-repeat;
    }

    /*
     * Cards 2 and 3 use border-bottom to create a 12px "gap" between consecutive
     * stacked cards WITHOUT exposing the .capabilities__right shared background.
     * A flex gap would show the shared image in the strip; a colored border keeps
     * that strip opaque (primary-color) while matching the other inter-card gaps.
     * min-height is increased by 12px so the visible card area stays the same size.
     *   card-2: 292px total (12px border + 280px visible card)
     *   card-3: 272px total (12px border + 260px visible card)
     */
    .capabilities__card--2 {
        min-height: 292px;
        border-bottom: 12px solid var(--primary-color);
    }

    .capabilities__card--3 {
        min-height: 272px;
        border-bottom: 12px solid var(--primary-color);
    }

    .capabilities__card--4 {
        min-height: 280px;
    }

    /*
     * Card-4: restore its own background image.
     * The right container's shared background shows through cards 2 & 3
     * (semi-transparent overlay ~20%). Card-4's opaque image covers the
     * right’s background at card-4's position.
     */
    .capabilities__card--4 {
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.2) 100%),
            url('/home-assets/assets/images/card-4.jpg') center / cover no-repeat;
    }

    /* ---- Remove extra right padding on paragraphs (already handled by ≤1023px block) ---- */
}


/* =========================================
   RESPONSIVE — EXTRA SMALL  (< 480px)
   Very small phones (320–479px): narrow the
   square slightly so the heading fits on two
   lines at the global base h2 size (24px).
   No font-size override — global h2 = 24px
   is already above the card h3 (20px).
   Line-height 30px for 24px font = 1.25× ratio
   (compact, proportional for a large heading).
   ========================================= */
@media (max-width: 479px) {
    .capabilities__header {
        padding-top: 96px;
        padding-bottom: 20px;
    }

    .capabilities__square {
        top: 40px;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .capabilities__heading {
        line-height: 30px;
    }
}


/* =========================================
   AHA-STYLE SCROLL REVEAL — v2.0

   DESKTOP: GSAP controls transforms and opacity entirely.
     - gsap.set() positions cards off-screen initially.
     - ScrollTrigger pin + scrub drives the timeline.
     - .is-revealed is added AFTER the pin ends (cleanup).

   MOBILE: IntersectionObserver adds .is-revealed, then
     CSS transitions below handle the reveal.
   ========================================= */

/* Desktop: clipping container while cards are mid-flight */
@media (min-width: 768px) {

    /* Grid overflow hidden prevents horizontal scrollbar during fly-in.
     * (overflow:hidden is also set by JS; this is the CSS baseline.) */
    [data-aha-image-grid-intro] .capabilities__grid {
        overflow: hidden;
    }

    /* Wrapper columns stay fixed — GSAP moves individual .capabilities__card elements only */
    [data-aha-image-grid-intro] .capabilities__col--1,
    [data-aha-image-grid-intro] .capabilities__right {
        transform: none;
        opacity: 1;
        will-change: auto;
        transition: none;
    }

    /* Shared image: hidden at start; JS fades it in */
    [data-aha-image-grid-intro] .capabilities__shared-img {
        opacity: 0;
    }

    /* Post-animation revealed state: ensure final correct values */
    [data-aha-image-grid-intro].is-revealed .capabilities__card--1,
    [data-aha-image-grid-intro].is-revealed .capabilities__card--2,
    [data-aha-image-grid-intro].is-revealed .capabilities__card--3,
    [data-aha-image-grid-intro].is-revealed .capabilities__card--4 {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    [data-aha-image-grid-intro].is-revealed .capabilities__shared-img {
        opacity: 1 !important;
    }
}

/* Mobile (IntersectionObserver fallback) */
@media (max-width: 767px) {

    /* Initial hidden state */
    [data-aha-image-grid-intro] .capabilities__card--1 {
        transform: translateX(-60px);
        opacity: 0;
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    }

    [data-aha-image-grid-intro] .capabilities__card--2,
    [data-aha-image-grid-intro] .capabilities__card--3,
    [data-aha-image-grid-intro] .capabilities__card--4 {
        transform: translateX(60px);
        opacity: 0;
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    }

    /* Stagger via delay */
    [data-aha-image-grid-intro] .capabilities__card--2 {
        transition-delay: 0.06s;
    }

    [data-aha-image-grid-intro] .capabilities__card--3 {
        transition-delay: 0.12s;
    }

    [data-aha-image-grid-intro] .capabilities__card--4 {
        transition-delay: 0.18s;
    }

    /* Revealed */
    [data-aha-image-grid-intro].is-revealed .capabilities__card--1,
    [data-aha-image-grid-intro].is-revealed .capabilities__card--2,
    [data-aha-image-grid-intro].is-revealed .capabilities__card--3,
    [data-aha-image-grid-intro].is-revealed .capabilities__card--4 {
        transform: translateX(0);
        opacity: 1;
    }
}