/* Purpose: Instagram Feed section — dark navy band with 3-col portrait grid. */

.igfeed {
    background: var(--color-primary);
    padding: var(--space-20) 0 var(--space-24);
}
@media (max-width: 767px) {
    .igfeed { padding-top: var(--space-10); padding-bottom: var(--space-10); }  /* 40px */
    .igfeed .igfeed__sub { max-width: 300px; text-align: center; text-wrap: balance; }  /* narrower + balanced lines to avoid a widow */
}

.igfeed__inner {
    text-align: center;
}

/* Eyebrow — "WATCH · SHOP · LOVE" with decorative lines */
.igfeed__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--weight-medium);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-4);
}
.igfeed__eyebrow::before,
.igfeed__eyebrow::after {
    content: '';
    flex: 0 0 60px;
    height: 1px;
    background: var(--color-gold);
    opacity: 0.55;
}

.igfeed__heading {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: var(--weight-regular);
    color: var(--color-on-navy);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
}
.igfeed__heading-accent {
    color: #c9a84c;
    font-style: normal;
}

.igfeed__sub {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: #fff;
    line-height: var(--leading-normal);
    max-width: 540px;
    margin: 0 auto var(--space-10);
}

/* ---- Smash Balloon shell overrides ---- */
.igfeed #sb_instagram {
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
}
.igfeed .sbi_header,
.igfeed .sbi_bio,
.igfeed .sbi_follow_btn,
.igfeed #sbi_load { display: none !important; }

/* LAYOUT IS OWNED BY THE PLUGIN — do not re-add column rules here.
   Smash Balloon renders the container as `#sbi_images` (an id, no class) and lays it out from the feed's
   own Columns / Post-count / Padding settings. Earlier rules targeted `.sbi_images`, which matches nothing,
   so they never applied. Change the number of columns in Instagram Feed → your feed → Layout. */

.igfeed .sbi_item {
    padding: 0 !important;
    margin: 0 !important;
}

/* Tile shape follows the plugin's "Image Aspect Ratio" setting, which SBI exposes as a data attribute.
   The bare rule is the fallback; each attribute rule below wins when that ratio is selected. */
.igfeed .sbi_photo_wrap {
    display: block;
    border-radius: 0;          /* square corners — matches the rest of the grid */
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
}
/* SBI ships its own rounding on the tile/link/image, so zero those too. */
.igfeed .sbi_item,
.igfeed .sbi_photo,
.igfeed .sbi_photo_wrap img { border-radius: 0 !important; }
.igfeed #sb_instagram[data-imageaspectratio="1:1"]  .sbi_photo_wrap { aspect-ratio: 1 / 1; }
.igfeed #sb_instagram[data-imageaspectratio="4:5"]  .sbi_photo_wrap { aspect-ratio: 4 / 5; }
.igfeed #sb_instagram[data-imageaspectratio="9:16"] .sbi_photo_wrap { aspect-ratio: 9 / 16; }
.igfeed #sb_instagram[data-imageaspectratio="16:9"] .sbi_photo_wrap { aspect-ratio: 16 / 9; }
.igfeed #sb_instagram[data-imageaspectratio="3:2"]  .sbi_photo_wrap { aspect-ratio: 3 / 2; }

.igfeed .sbi_photo_wrap img,
.igfeed .sbi_photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Smash Balloon's own video play overlay — ensure visible on dark bg */
.igfeed .sbi_video_overlay,
.igfeed .sbi_play_btn_wrap { z-index: 2; }

/* Hover fade */
.igfeed .sbi_photo_wrap:hover img { opacity: 0.85; transition: opacity var(--duration-base) var(--ease-out); }

/* ---- Responsive ----
   No column overrides here either: the plugin's own Columns for tablet / mobile settings handle it. */