/**
 * MTIC Theme — Home Instagram Feed Component
 * Covers: homepage social media feed (LightWidget embed)
 * @package mtic-theme
 */

.mtic-home-social-media {
    padding: var(--mtic-spacing-lg) 0;
}

.mtic-home-social-media__panel {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.mtic-home-social-media__header {
    margin-bottom: 0.75rem;
}

.mtic-home-social-media__heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-family: var(--mtic-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mtic-dark);
}

.mtic-home-social-media__icon {
    flex-shrink: 0;
}

.mtic-home-social-media__profile-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.mtic-home-social-media__profile-link:hover,
.mtic-home-social-media__profile-link:focus-visible {
    color: var(--mtic-dark);
}

/* ------------------------------------------------------------------
   Bigger Instagram thumbnails on MOBILE only — code-only crop + zoom.
   The photos live inside a cross-origin iframe and LightWidget controls
   the column count internally, so we can't reflow them. Instead we keep
   the natural grid, zoom the whole widget (--mtic-ig-scale) and let the
   wrapper's overflow:hidden CROP the columns that fall off the right edge.
   Net effect at scale 2 on a 4-up grid: 2 big tiles per row. JS keeps the
   wrapper height in sync (transforms don't grow the layout box) so the
   section below never overlaps.
   Desktop keeps scale 1 = full width, no transform = untouched.
   ------------------------------------------------------------------ */
.mtic-home-social-media__widget {
    --mtic-ig-scale: 1;
    overflow: hidden;
}

.mtic-home-social-media__widget iframe {
    width: 100%;
    border: 0;
    display: block;
    overflow: hidden;
    transform: scale(var(--mtic-ig-scale));
    transform-origin: top left;
}

@media screen and (max-width: 767px) {
    .mtic-home-social-media__profile-link {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
    }

    /* Zoom 2x → the 4-up grid is cropped to 2 large tiles per row.
       Raise toward 2.5–3 for even bigger (fewer) tiles. */
    .mtic-home-social-media__widget {
        --mtic-ig-scale: 2;
    }
}