/* =============================================================================
   Image Collage — Modular reusable component
   Figma: desktop node 3446-12406 | mobile node 3446-12438
   ============================================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────────
   Horizontal padding mirrors the site's section rhythm:
   ≥1200px  → 120px each side
   900–1199px → 60px each side
   <900px   → 24px each side (mobile uses its own stacked layout)
   ──────────────────────────────────────────────────────────────────────────── */
.image-collage-section {
    padding: 0 120px;
    width: 100%;
    box-sizing: border-box;
}

/* Inner container: 1200px max, no extra padding — images fill this area */
.image-collage-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* =============================================================================
   SHARED — canvas base
   ============================================================================= */
.collage-canvas {
    position: relative;
    width: 100%;
    overflow: visible;
    /* decorative elements may bleed slightly */
}

/* =============================================================================
   DESKTOP / TABLET CANVAS
   Figma canvas: 1200 × 422px  (content y: 107→529, offset by 107px = 422px tall)
   aspect-ratio keeps the layout proportional between 900px–1200px.
   ============================================================================= */
.collage-canvas--desktop {
    /* 1200 : 422 → preserve design proportions */
    aspect-ratio: 1200 / 422;
}

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

/* ── Desktop image slots ──────────────────────────────────────────────────────
   All positions are expressed as % of the 1200px-wide × 422px-tall canvas.
   Origin (0 , 0) = top-left of canvas.
   Figma coords are offset by left=120, top=107 from the frame origin, so:
     x% = (figma_left - 120) / 1200 * 100
     y% = (figma_top  - 107) / 422  * 100
     w% = figma_width  / 1200 * 100
     h% = figma_height / 422  * 100
   ──────────────────────────────────────────────────────────────────────────── */
.collage-img {
    position: absolute;
    overflow: hidden;
    border-radius: 8.552px;
}

.collage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* d-img1 — "8532 1"  top-left small portrait
   Figma: left=184, top=128.64, w=163.683, h=109.176  → x=64, y=21.64 */
.collage-img--d-img1 {
    left: 5.33%;
    /* 64 / 1200 */
    top: 5.13%;
    /* 21.64 / 422 */
    width: 13.64%;
    /* 163.683 / 1200 */
    height: 25.87%;
    /* 109.176 / 422 */
}

/* d-img2 — "2149175160 1"  medium portrait top-center
   Figma: left=432.84, top=161.27, w=205.554, h=172.906  → x=312.84, y=54.27 */
.collage-img--d-img2 {
    left: 26.07%;
    /* 312.84 / 1200 */
    top: 12.86%;
    /* 54.27 / 422 */
    width: 17.13%;
    /* 205.554 / 1200 */
    height: 40.97%;
    /* 172.906 / 422 */
}

/* d-img3 — "8532 2"  wide landscape top-mid
   Figma: left=656.75, top=107, w=253.296, h=168.949  → x=536.75, y=0 */
.collage-img--d-img3 {
    left: 44.73%;
    /* 536.75 / 1200 */
    top: 0%;
    width: 21.11%;
    /* 253.296 / 1200 */
    height: 40.04%;
    /* 168.949 / 422 */
}

/* d-img4 — "2149175160 2"  medium portrait top-right
   Figma: left=981, top=116.64, w=205.554, h=172.906  → x=861, y=9.64 */
.collage-img--d-img4 {
    left: 71.75%;
    /* 861 / 1200 */
    top: 2.28%;
    /* 9.64 / 422 */
    width: 17.13%;
    /* 205.554 / 1200 */
    height: 40.97%;
    /* 172.906 / 422 */
}

/* d-img5 — "2148490307 2"  wide landscape bottom-left
   Figma: left=120, top=312.64, w=242.417, h=161.692  → x=0, y=205.64 */
.collage-img--d-img5 {
    left: 0%;
    top: 48.73%;
    /* 205.64 / 422 */
    width: 20.2%;
    /* 242.417 / 1200 */
    height: 38.32%;
    /* 161.692 / 422 */
}

/* d-img6 — "2149220329 1"  small portrait bottom-left-center
   Figma: left=390, top=367.64, w=183.566, h=122.071  → x=270, y=260.64 */
.collage-img--d-img6 {
    left: 22.5%;
    /* 270 / 1200 */
    top: 61.76%;
    /* 260.64 / 422 */
    width: 15.3%;
    /* 183.566 / 1200 */
    height: 28.93%;
    /* 122.071 / 422 */
}

/* d-img7 — "2148490307 3"  wide landscape bottom-center
   Figma: left=602, top=367.64, w=242.417, h=161.692  → x=482, y=260.64 */
.collage-img--d-img7 {
    left: 40.17%;
    /* 482 / 1200 */
    top: 61.76%;
    /* 260.64 / 422 */
    width: 20.2%;
    /* 242.417 / 1200 */
    height: 38.32%;
    /* 161.692 / 422 */
}

/* d-img8 — "2149220329 2"  small portrait bottom-right-center
   Figma: left=872, top=304.64, w=183.566, h=122.071  → x=752, y=197.64 */
.collage-img--d-img8 {
    left: 62.67%;
    /* 752 / 1200 */
    top: 46.84%;
    /* 197.64 / 422 */
    width: 15.3%;
    /* 183.566 / 1200 */
    height: 28.93%;
    /* 122.071 / 422 */
}

/* d-img9 — "8532 3"  wide landscape bottom-right
   Figma: left=1084, top=304.64, w=235.395, h=157.008  → x=964, y=197.64 */
.collage-img--d-img9 {
    left: 80.33%;
    /* 964 / 1200 */
    top: 46.84%;
    /* 197.64 / 422 */
    width: 19.62%;
    /* 235.395 / 1200 */
    height: 37.21%;
    /* 157.008 / 422 */
}

/* ── Decorative orange squares (desktop) ─────────────────────────────────── */
.collage-deco {
    position: absolute;
    background: #ed6a59;
    border-radius: 8px;
}

/* d1 — Figma: left=310, top=248.64, w=110.061, h=52.638  → x=190, y=141.64 */
.collage-deco--d1 {
    left: 15.83%;
    /* 190 / 1200 */
    top: 33.56%;
    /* 141.64 / 422 */
    width: 9.17%;
    /* 110.061 / 1200 */
    height: 12.47%;
    /* 52.638 / 422 */
}

/* d2 — Figma: left=657, top=301.64, w=110.061, h=52.638  → x=537, y=194.64 */
.collage-deco--d2 {
    left: 44.75%;
    /* 537 / 1200 */
    top: 46.12%;
    /* 194.64 / 422 */
    width: 9.17%;
    /* 110.061 / 1200 */
    height: 12.47%;
    /* 52.638 / 422 */
}

/* d3 — Figma: left=872, top=447.64, w=61, h=53  → x=752, y=340.64 */
.collage-deco--d3 {
    left: 62.67%;
    /* 752 / 1200 */
    top: 80.72%;
    /* 340.64 / 422 */
    width: 5.08%;
    /* 61 / 1200 */
    height: 12.56%;
    /* 53 / 422 */
}

/* d4 — Figma: left=366.56, top=165.52, size=29.669  → x=246.56, y=58.52 */
.collage-deco--d4 {
    left: 20.55%;
    /* 246.56 / 1200 */
    top: 13.87%;
    /* 58.52 / 422 */
    width: 2.47%;
    /* 29.669 / 1200 */
    height: 7.03%;
    /* 29.669 / 422 */
    border-radius: 8px;
}

/* d5 — Figma: left=928, top=222.64, size=29.669  → x=808, y=115.64 */
.collage-deco--d5 {
    left: 67.33%;
    /* 808 / 1200 */
    top: 27.4%;
    /* 115.64 / 422 */
    width: 2.47%;
    /* 29.669 / 1200 */
    height: 7.03%;
    /* 29.669 / 422 */
    border-radius: 8px;
}

/* =============================================================================
   TABLET (900px – 1199px)
   Same landscape canvas, scales via aspect-ratio already set above.
   Reduce section horizontal padding at ≤1200px.
   ============================================================================= */
@media (max-width: 1200px) {
    .image-collage-section {
        padding: 0 60px;
    }
}

/* =============================================================================
   MOBILE  (<900px)
   Switch to portrait stacked layout.
   Desktop canvas hidden; mobile canvas shown.
   Images are counter-rotated from the landscape reading (swap w/h).
   Mobile Figma canvas: 390 × 750px
   ============================================================================= */
@media (max-width: 899px) {
    .image-collage-section {
        padding: 0 24px;
    }

    .collage-canvas--desktop {
        display: none;
    }

    .collage-canvas--mobile {
        display: block;
        /* Mobile canvas: 390 × 748px (bottom element ends at 736px, rounded up) */
        aspect-ratio: 327 / 623;
    }

    /* ── Mobile image slots ─────────────────────────────────────────────────
       All % of 390 × 748 Figma mobile frame.
       x% = figma_left / 390 * 100
       y% = figma_top  / 748 * 100
       ──────────────────────────────────────────────────────────────────────── */

    /* m-img1 — "8532 1"  Figma: left=67, top=113, w=106.116, h=70.779 */
    .collage-img--m-img1 {
        left: 17.18%;
        /* 67 / 390 */
        top: 0%;
        /* (113-113) / 623 */
        width: 27.21%;
        /* 106.116 / 390 */
        height: 11.36%;
        /* 70.779 / 623 */
    }

    /* m-img2 — "2149175160 1"  Figma: left=217, top=134.32, w=133.261, h=112.095 */
    .collage-img--m-img2 {
        left: 55.64%;
        /* 217 / 390 */
        top: 3.42%;
        /* (134.32-113) / 623 */
        width: 34.17%;
        /* 133.261 / 390 */
        height: 18%;
        /* 112.095 / 623 */
    }

    /* m-img3 — "2148490307 2"  Figma: left=24, top=246.26, w=157.199, h=104.799 */
    .collage-img--m-img3 {
        left: 6.15%;
        /* 24 / 390 */
        top: 21.39%;
        /* (246.26-113) / 623 */
        width: 40.31%;
        /* 157.199 / 390 */
        height: 16.82%;
        /* 104.799 / 623 */
    }

    /* m-img4 — "2149220329 1"  Figma: left=195, top=267.42, w=119.006, h=79.139 */
    .collage-img--m-img4 {
        left: 50%;
        /* 195 / 390 */
        top: 24.79%;
        /* (267.42-113) / 623 */
        width: 30.51%;
        /* 119.006 / 390 */
        height: 12.7%;
        /* 79.139 / 623 */
    }

    /* m-img5 — "8532 2"  Figma: left=31, top=364, w=143.928, h=96 */
    .collage-img--m-img5 {
        left: 7.95%;
        /* 31 / 390 */
        top: 40.29%;
        /* (364-113) / 623 */
        width: 36.9%;
        /* 143.928 / 390 */
        height: 15.41%;
        /* 96 / 623 */
    }

    /* m-img6 — "2149175160 2"  Figma: right=23.74→left=232.999, top=368, w=133.261, h=112.095 */
    .collage-img--m-img6 {
        left: 59.74%;
        /* 232.999 / 390 */
        top: 40.93%;
        /* (368-113) / 623 */
        width: 34.17%;
        /* 133.261 / 390 */
        height: 18%;
        /* 112.095 / 623 */
    }

    /* m-img7 — "2149220329 2"  Figma: left=205, top=500.65, w=119.006, h=79.139 */
    .collage-img--m-img7 {
        left: 52.56%;
        /* 205 / 390 */
        top: 62.22%;
        /* (500.65-113) / 623 */
        width: 30.51%;
        /* 119.006 / 390 */
        height: 12.7%;
        /* 79.139 / 623 */
    }

    /* m-img8 — "2148490307 3"  Figma: left=35, top=522.54, w=157.199, h=104.799 */
    .collage-img--m-img8 {
        left: 8.97%;
        /* 35 / 390 */
        top: 65.74%;
        /* (522.54-113) / 623 */
        width: 40.31%;
        /* 157.199 / 390 */
        height: 16.82%;
        /* 104.799 / 623 */
    }

    /* m-img9 — not present in Figma mobile layout */
    .collage-img--m-img9 {
        display: none;
    }

    /* m-img10 — "8532 3"  Figma: left=120, top=640.34, w=143.928, h=96 */
    .collage-img--m-img10 {
        left: 30.77%;
        /* 120 / 390 */
        top: 84.64%;
        /* (640.34-113) / 623 */
        width: 36.9%;
        /* 143.928 / 390 */
        height: 15.41%;
        /* 96 / 623 */
    }

    /* ── Mobile decorative blocks ─────────────────────────────────────────── */

    /* m1 — Figma: left=128, top=196.78  w=76.278, h=36.481 */
    .collage-deco--m1 {
        left: 32.82%;
        top: 13.45%;
        /* (196.78-113) / 623 */
        width: 19.56%;
        height: 5.86%;
        /* 36.481 / 623 */
    }

    /* m2 — Figma: left=99, top=473.06  w=76.278, h=36.481 */
    .collage-deco--m2 {
        left: 25.38%;
        top: 57.8%;
        /* (473.06-113) / 623 */
        width: 19.56%;
        height: 5.86%;
        /* 36.481 / 623 */
    }

    /* m3 — Figma: left=209, top=592  w=39, h=36 */
    .collage-deco--m3 {
        left: 53.59%;
        top: 76.89%;
        /* (592-113) / 623 */
        width: 10%;
        height: 5.78%;
        /* 36 / 623 */
    }

    /* m4 — Figma: left=184.18, top=130.25  size=20.562 */
    .collage-deco--m4 {
        left: 47.22%;
        top: 2.77%;
        /* (130.25-113) / 623 */
        width: 5.27%;
        height: 3.3%;
        /* 20.562 / 623 */
        border-radius: 4px;
    }

    /* m5 — Figma: left=186, top=386  size=20.562 */
    .collage-deco--m5 {
        left: 47.69%;
        top: 43.82%;
        /* (386-113) / 623 */
        width: 5.27%;
        height: 3.3%;
        /* 20.562 / 623 */
        border-radius: 4px;
    }

    /* On mobile the collage-deco border-radius matches mobile Figma (~8px) */
    .collage-canvas--mobile .collage-deco {
        border-radius: 8px;
    }
}