/* =============================================================
   Instagram Feed Section (homepage)
   Reusable component. Wraps the Smash Balloon feed (#sb_instagram)
   in the site's section rhythm + enforces WCAG AA button contrast.
   ============================================================= */

.zizania-instagram {
    padding-block: var(--space-section-lg);
    background-color: var(--surface-container-low);
}

.zizania-instagram__inner {
    text-align: center;
}

.zizania-instagram__label {
    margin: 0 0 0.5rem;
}

.zizania-instagram__handle {
    display: inline-block;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--tertiary);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color var(--transition-base);
}

.zizania-instagram__handle:hover,
.zizania-instagram__handle:focus-visible {
    color: var(--muted);
    text-decoration: underline;
}

.zizania-instagram__handle:focus-visible {
    outline: 2px solid var(--tertiary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.zizania-instagram__feed {
    max-width: var(--container-max);
    margin-inline: auto;
}

/* --- WCAG AA: dark text on olive/blue action buttons --- */
.zizania-instagram #sb_instagram .sbi_follow_btn a,
.zizania-instagram #sb_instagram #sbi_load .sbi_load_btn {
    color: var(--on-primary) !important;
    font-weight: 600;
}

/* Visible keyboard focus on all feed interactive elements */
.zizania-instagram #sb_instagram a:focus-visible,
.zizania-instagram #sb_instagram button:focus-visible {
    outline: 2px solid var(--tertiary);
    outline-offset: 2px;
}

/* --- Rounded photo tiles, matching homepage product cards --- */
.zizania-instagram #sb_instagram .sbi_photo,
.zizania-instagram #sb_instagram .sbi_photo_wrap > a,
.zizania-instagram #sb_instagram .sbi_link,
.zizania-instagram #sb_instagram .sbi_imgLiquid_bgSize {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}