/* School Instagram — feed grid.
 *
 * These rules are ported VERBATIM from what the original JetElements Instagram
 * Gallery rendered, so the section looks identical after Crocoblock is removed:
 *   - base layout/behaviour from jet-elements/assets/css/addons/jet-instagram-gallery.css
 *   - the site's own customisations from the Elementor-generated page CSS
 *     (overlay #883A49B5, 15px gaps, Open Sans .9em/600 caption, 6/4/2 columns)
 *
 * The original class names are kept deliberately: it makes this a faithful copy
 * rather than a re-interpretation, so nothing drifts visually. Nothing here
 * depends on JetElements being installed.
 */

/* ── base layout ─────────────────────────────────────────────────────────── */
.jet-instagram-gallery__instance.layout-type-grid {
    display: flex;
    flex-flow: row wrap;
}
.jet-instagram-gallery__item { position: relative; }

/* The grid system in jet-elements.css gives col-* items 10px padding, and the
   original gallery cancelled it with the disable-cols-gap / disable-rows-gap
   wrapper classes — so spacing came purely from the 15px inner margin.
   Ported here so the layout is identical with OR without jet-elements.css
   (which disappears once Crocoblock is removed). Without this the tiles render
   ~20px narrower with ~20px larger gaps. */
.disable-cols-gap div[class*="col-desk"] { padding-left: 0; padding-right: 0; }
.disable-rows-gap div[class*="col-desk"] { padding-top: 0; padding-bottom: 0; }
.jet-instagram-gallery__instance .jet-instagram-gallery__item { padding: 0; }

.jet-instagram-gallery__inner {
    position: relative;
    overflow: hidden;
    margin: 15px;              /* site customisation (base default was 10px) */
}
.jet-instagram-gallery__instance { margin: -15px; }  /* offsets the item margin */

.jet-instagram-gallery__link {
    display: block;
    line-height: 0;
}
.jet-instagram-gallery__media { position: relative; line-height: 0; }

/* Square crop.
   The original gallery fed itself Instagram's square `thumbnail_resources`, so
   height:auto produced a uniform row. The Graph API's `media_url` returns the
   ORIGINAL aspect ratio (portraits and reels are tall), which made the row ragged
   and pushed it over the heading — so we constrain to 1:1 and cover-crop instead,
   reproducing the original's uniform square tiles. */
.jet-instagram-gallery__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    vertical-align: top;
    display: block;
}

/* ── overlay + caption ───────────────────────────────────────────────────── */
.jet-instagram-gallery__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}
.jet-instagram-gallery__content:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    content: '';
    background-color: #883A49B5;   /* site customisation */
}
.jet-instagram-gallery__caption {
    position: relative;
    z-index: 1;
    max-width: 100%;
    order: 1;
    align-self: center;
    text-align: center;
    color: #fff;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .9em;
    font-weight: 600;
    line-height: 1.3em;
    padding: 20px;
    margin: 0;
}

/* reveal the overlay on hover (matches show-overlay-on-hover) */
.jet-instagram-gallery__instance.show-overlay-on-hover .jet-instagram-gallery__inner .jet-instagram-gallery__content {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(0.21, 0.75, 0.27, 0.96);
}
.jet-instagram-gallery__instance.show-overlay-on-hover .jet-instagram-gallery__inner:hover .jet-instagram-gallery__content {
    opacity: 1;
    pointer-events: auto;
}

/* ── responsive columns (6 / 4 / 2) ──────────────────────────────────────── */
.jet-instagram-gallery__instance.layout-type-grid .jet-instagram-gallery__item {
    max-width: calc(100% / 6);
    flex: 0 0 calc(100% / 6);
}
@media (max-width: 1024px) {
    .jet-instagram-gallery__instance.layout-type-grid .jet-instagram-gallery__item {
        max-width: calc(100% / 4);
        flex: 0 0 calc(100% / 4);
    }
}
@media (max-width: 767px) {
    .jet-instagram-gallery__instance.layout-type-grid .jet-instagram-gallery__item {
        max-width: calc(100% / 2);
        flex: 0 0 calc(100% / 2);
    }
    .jet-instagram-gallery__caption { font-size: .8em; padding: 15px; }
}

.jet-instagram-gallery__notice {
    margin: 15px;
    font-style: italic;
    opacity: .7;
}