/* ============================================================
   BEINC — PDP Project Media (Section CSS)

   Flexible mansory grid. Tiles are placed via flexbox so any
   combination of widths can wrap onto rows.

   Width modifiers (apply to .pdp-media-tile):
     --full          100%
     --half          calc(50% - gap/2)            ← default in spec
     --two-thirds    calc(66.666% - gap/3)
     --one-third     calc(33.333% - gap*2/3)

   Aspect modifiers come from the inner .pdp-media (--landscape,
   --portrait, --square, --wide). Each tile sizes its inner media
   to fill the tile width; the aspect ratio drives the height.

   Gap between tiles = pad-x (matches global padding).
   Section respects pad-x left/right.
   ============================================================ */


.pdp-project-media {
    position: relative;
    z-index: 4;
    background: var(--color-black2);
    padding: var(--space-10) 2vw;     /* horizontal pad = global pad-x */
}

.pdp-project-media__grid {
    display: flex;
    flex-wrap: wrap;
    /* IMPORTANT — flex `gap` percentage row-gap resolves against the
       container's HEIGHT (often 0 with no defined height) → row gap
       collapses to 0. Use vw units so both row & column gap render
       against viewport width consistently. */
    gap: 2vw;
    width: 100%;
}


/* Tile width modifiers — gap-aware via calc() with the same vw value */
.pdp-media-tile {
    display: block;
    /* Default: half width */
    flex: 0 0 calc((100% - 2vw) / 2);
    max-width: calc((100% - 2vw) / 2);
}

.pdp-media-tile--full {
    flex: 0 0 100%;
    max-width: 100%;
}

.pdp-media-tile--half {
    flex: 0 0 calc((100% - 2vw) / 2);
    max-width: calc((100% - 2vw) / 2);
}

.pdp-media-tile--two-thirds {
    flex: 0 0 calc((100% - 2vw) * 2 / 3);
    max-width: calc((100% - 2vw) * 2 / 3);
}

.pdp-media-tile--one-third {
    flex: 0 0 calc((100% - 2vw * 2) / 3);
    max-width: calc((100% - 2vw * 2) / 3);
}

/* The .pdp-media inside fills tile width; aspect ratio handles height. */
.pdp-media-tile > .pdp-media {
    width: 100%;
}


/* ============================================================
   RESPONSIVE — TABLET (768–1023px)
   Same layout as desktop.
   ============================================================ */
@media (max-width: 1023px) {
    .pdp-project-media {
        padding: var(--space-9) 4vw;
    }
    .pdp-project-media__grid {
        gap: 4vw;
    }
    .pdp-media-tile,
    .pdp-media-tile--half {
        flex: 0 0 calc((100% - 4vw) / 2);
        max-width: calc((100% - 4vw) / 2);
    }
    .pdp-media-tile--two-thirds {
        flex: 0 0 calc((100% - 4vw) * 2 / 3);
        max-width: calc((100% - 4vw) * 2 / 3);
    }
    .pdp-media-tile--one-third {
        flex: 0 0 calc((100% - 4vw * 2) / 3);
        max-width: calc((100% - 4vw * 2) / 3);
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤767px)
   All tiles become full-width (single column), regardless of their
   width modifier. Vertical stacking with the same gap.
   ============================================================ */
@media (max-width: 767px) {
    .pdp-project-media {
        padding: var(--space-7) 4vw;
    }

    .pdp-project-media__grid {
        gap: 4vw;             /* row-gap = mobile global pad-x */
    }

    .pdp-media-tile,
    .pdp-media-tile--full,
    .pdp-media-tile--half,
    .pdp-media-tile--two-thirds,
    .pdp-media-tile--one-third {
        flex: 0 0 100%;
        max-width: 100%;
    }
}