/* =============================================================================
   Image Collage (4-image variant)
   Figma: desktop 3541-15129 | mobile 3541-15143
   card color driven by CSS custom property --collage4-card-bg (set inline):
     white  → #ffffff  (use on coloured backgrounds, e.g. orange why-work section)
     orange → #ED6A59  (use on white/light backgrounds)
   ============================================================================= */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.collage-4-wrap {
    width: 100%;
    /* custom property fallback */
    --collage4-card-bg: #ffffff;
}

/* =============================================================================
   SHARED canvas base
   ============================================================================= */
.collage-4-canvas {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* =============================================================================
   SHARED image card & img styles
   ============================================================================= */
.collage-4-img {
    position: absolute;
    overflow: hidden;
    border-radius: 8px;
    background: var(--collage4-card-bg);
}

.collage-4-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* logos need contain so they don't crop */
    display: block;
    padding: 8px;
    /* small inset so logo doesn't bleed to edge */
    box-sizing: border-box;
}

/* ── Decorative blocks ──────────────────────────────────────────────────── */
.collage-4-deco {
    position: absolute;
    background: var(--collage4-deco-bg, var(--collage4-card-bg));
    border-radius: 8px;
}

/* =============================================================================
   DESKTOP / TABLET  (≥ 768px)
   Figma canvas: 1003 × 248px
   Positions as % of that canvas.
   ============================================================================= */
.collage-4-canvas--desktop {
    /* aspect-ratio keeps it proportional on all desktop widths */
    aspect-ratio: 1003 / 248;
    display: block;
}

.collage-4-canvas--mobile {
    display: none;
}

/* ── Desktop image slots ──────────────────────────────────────────────────
   Figma absolute coords → % of 1003 × 248:
     x% = left / 1003 × 100
     y% = top  / 248  × 100
     w% = width / 1003 × 100
     h% = height / 248 × 100
   ──────────────────────────────────────────────────────────────────────── */

/* d1 — BYU / small portrait
   Figma: left=0, top=21.64, w=163.683, h=109.176 */
.collage-4-img--d1 {
    left: 0%;
    top: 8.73%;
    /* 21.64 / 248 */
    width: 16.32%;
    /* 163.683 / 1003 */
    height: 44.02%;
    /* 109.176 / 248 */
}

/* d2 — Manipal / medium portrait
   Figma: left=248.84, top=54.27, w=205.554, h=172.906 */
.collage-4-img--d2 {
    left: 24.81%;
    /* 248.84 / 1003 */
    top: 21.88%;
    /* 54.27 / 248 */
    width: 20.49%;
    /* 205.554 / 1003 */
    height: 69.72%;
    /* 172.906 / 248 */
}

/* d3 — Univ of Hawaii / wide landscape
   Figma: left=472.75, top=0, w=253.296, h=168.949 */
.collage-4-img--d3 {
    left: 47.13%;
    /* 472.75 / 1003 */
    top: 0%;
    width: 25.25%;
    /* 253.296 / 1003 */
    height: 68.12%;
    /* 168.949 / 248 */
}

/* d4 — SDA / medium portrait
   Figma: left=797, top=9.64, w=205.554, h=172.906 */
.collage-4-img--d4 {
    left: 79.46%;
    /* 797 / 1003 */
    top: 3.89%;
    /* 9.64 / 248 */
    width: 20.49%;
    /* 205.554 / 1003 */
    height: 69.72%;
    /* 172.906 / 248 */
}

/* ── Desktop decorative squares ──────────────────────────────────────────  */

/* d1 — wide rectangle mid-left
   Figma: left=126, top=141.64, w=110.061, h=52.638 */
.collage-4-deco--d1 {
    left: 12.56%;
    /* 126 / 1003 */
    top: 57.11%;
    /* 141.64 / 248 */
    width: 10.97%;
    /* 110.061 / 1003 */
    height: 21.23%;
    /* 52.638 / 248 */
}

/* d2 — wide rectangle mid-right
   Figma: left=473, top=194.64, w=110.061, h=52.638 */
.collage-4-deco--d2 {
    left: 47.16%;
    /* 473 / 1003 */
    top: 78.48%;
    /* 194.64 / 248 */
    width: 10.97%;
    /* 110.061 / 1003 */
    height: 21.23%;
    /* 52.638 / 248 */
}

/* d3 — small square left
   Figma: left=182.56, top=58.52, size=29.669 */
.collage-4-deco--d3 {
    left: 18.2%;
    /* 182.56 / 1003 */
    top: 23.6%;
    /* 58.52 / 248 */
    width: 2.96%;
    /* 29.669 / 1003 */
    height: 11.97%;
    /* 29.669 / 248 */
}

/* d4 — small square right
   Figma: left=744, top=115.64, size=29.669 */
.collage-4-deco--d4 {
    left: 74.18%;
    /* 744 / 1003 */
    top: 46.63%;
    /* 115.64 / 248 */
    width: 2.96%;
    /* 29.669 / 1003 */
    height: 11.97%;
    /* 29.669 / 248 */
}

/* =============================================================================
   MOBILE  (< 768px)
   Figma mobile canvas: 295 × 230px  (node 3541-15143)
   Switch to portrait layout.
   ============================================================================= */
@media (max-width: 767px) {
    .collage-4-canvas--desktop {
        display: none;
    }

    .collage-4-canvas--mobile {
        display: block;
        aspect-ratio: 295 / 230;
    }

    /* ── Mobile image slots ───────────────────────────────────────────────
       x% = left / 295 × 100
       y% = top  / 230 × 100
       ────────────────────────────────────────────────────────────────────── */

    /* m1 — BYU / small
       Figma: left=38.86, top=0, w=95.782, h=63.887 */
    .collage-4-img--m1 {
        left: 13.17%;
        /* 38.86 / 295 */
        top: 0%;
        width: 32.47%;
        /* 95.782 / 295 */
        height: 27.78%;
        /* 63.887 / 230 */
    }

    /* m2 — Manipal / tall
       Figma: left=174.4, top=18.98, w=120.604, h=101.449 */
    .collage-4-img--m2 {
        left: 59.12%;
        /* 174.4 / 295 */
        top: 8.25%;
        /* 18.98 / 230 */
        width: 40.88%;
        /* 120.604 / 295 */
        height: 44.11%;
        /* 101.449 / 230 */
    }

    /* m3 — University of Hawaii / wide
       Figma: left=0, top=120.18, w=141.866, h=94.625 */
    .collage-4-img--m3 {
        left: 0%;
        top: 52.25%;
        /* 120.18 / 230 */
        width: 48.09%;
        /* 141.866 / 295 */
        height: 41.14%;
        /* 94.625 / 230 */
    }

    /* m4 — SDA / portrait
       Figma: left=154.52, top=139.16, w=107.126, h=90.111 */
    .collage-4-img--m4 {
        left: 52.38%;
        /* 154.52 / 295 */
        top: 60.5%;
        /* 139.16 / 230 */
        width: 36.31%;
        /* 107.126 / 295 */
        height: 39.18%;
        /* 90.111 / 230 */
    }

    /* ── Mobile decorative squares ──────────────────────────────────────── */

    /* m1 — wide rectangle bridging the two rows
       Figma: left=93.98, top=75.7, w=68.925, h=32.964 */
    .collage-4-deco--m1 {
        left: 31.86%;
        /* 93.98 / 295 */
        top: 32.91%;
        /* 75.7 / 230 */
        width: 23.36%;
        /* 68.925 / 295 */
        height: 14.33%;
        /* 32.964 / 230 */
    }

    /* m2 — small square top-right area
       Figma: left=144.74, top=15.58, size=18.58 */
    .collage-4-deco--m2 {
        left: 49.06%;
        /* 144.74 / 295 */
        top: 6.77%;
        /* 15.58 / 230 */
        width: 6.3%;
        /* 18.58 / 295 */
        height: 8.08%;
        /* 18.58 / 230 */
        border-radius: 4px;
    }
}