/*
 * AL_HOME_OUTDOOR_TILES_V1
 * Home "Outdoor-Erlebnisse" section (Elementor section 2b228962).
 * Pages: DE home (post 71) and EN home (post 19051); both carry the same Elementor element IDs.
 *
 * 1. All breakpoints: keep rounded corners while the image "Grow" hover animation scales the <img>.
 *    Elementor rounds the <img> itself (20px), but the clipping element is the image widget
 *    wrapper (class "overflow-hidden") with radius 0, so the scaled image showed square corners.
 * 2. Mobile (Elementor mobile breakpoint, max-width 767px): 2 x 2 tile grid instead of 4 stacked tiles.
 * 3. Tablet / large-phone landscape (768-991px, four tiles in one row via the style.css tablet rule):
 *    tile labels scale with the tile width so the longest label ("snorkeling") always fits.
 *
 * Rules drive Elementor's own container custom properties (--flex-wrap, --gap, --width,
 * --padding-bottom, --margin-bottom) instead of raw properties where Elementor uses them,
 * and win by selector specificity, not !important.
 * The tablet layout rule (768-991px) for this section lives in style.css and is not touched here.
 *
 * If the section is rebuilt in Elementor (new element IDs), these selectors stop matching
 * and the section falls back to Elementor's own layout. Nothing else breaks.
 */

:is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b228962 {
    --al-outdoor-radius: 20px;
    --al-outdoor-gap: 10px;
}

/* 1. Rounded clip for the hover-zoom (all breakpoints). */
:is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b6081ab .elementor-widget-image.overflow-hidden {
    border-radius: var(--al-outdoor-radius);
    isolation: isolate; /* Safari/WebKit: keep radius clipping while the child is transformed */
}

/* 2. Mobile 2 x 2 grid. */
@media (max-width: 767px) {
    /* Section: room for the bottom wave shape divider (Elementor sets it to 67px high). */
    :is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b228962 {
        --padding-bottom: 72px;
    }

    /* Outer wrapper: two rows (columns 60e3c1a and 5748d52c) stacked. */
    :is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b6081ab {
        --gap: var(--al-outdoor-gap);
        --row-gap: var(--al-outdoor-gap);
        --column-gap: var(--al-outdoor-gap);
    }

    /* Each former column becomes one row of two tiles. */
    :is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b6081ab > .elementor-element:is(.elementor-element-60e3c1a, .elementor-element-5748d52c) {
        --flex-wrap: nowrap;
        --gap: var(--al-outdoor-gap);
        --row-gap: var(--al-outdoor-gap);
        --column-gap: var(--al-outdoor-gap);
        --padding-bottom: 0px;
    }

    /* Tiles: half width each, equal height, rounded. */
    :is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b6081ab > .elementor-element > .elementor-element.e-con {
        --width: calc(50% - var(--al-outdoor-gap) / 2);
        --margin-bottom: 0px;
        --border-radius: var(--al-outdoor-radius);
        flex: 0 0 calc(50% - var(--al-outdoor-gap) / 2);
        min-width: 0;
        overflow: hidden;
    }

    /* Same tile proportions for all four photos (originals are 480 x 750). */
    :is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b6081ab .elementor-widget-image img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }

    /* Tile labels: fit a half-width tile. */
    :is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b6081ab .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(16px, 5vw, 26px);
        overflow-wrap: anywhere;
    }
}

/* 3. Tablet / large-phone landscape: four tiles in one row (style.css tablet rule).
 * Tile width = (100vw - 104px) / 4 (measured 768-991px). The longest label measures 6.22 x font-size,
 * so font-size = tile * 0.145 keeps it at <= 90% of the tile: ~24px at 768, ~26px at 820, 32px at 991.
 * Mobile (<=767) and desktop (>=992) sizes are unchanged. */
@media (min-width: 768px) and (max-width: 991px) {
    :is(body.home.page-id-71, body.page-id-19051) .elementor-element.elementor-element-2b6081ab .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(18px, calc((100vw - 104px) * 0.036), 32px);
    }
}