/* ================================================
   TEAM GLAM — Instagram / Reels Feed
   ================================================ */

.tg-insta-section {
    background: #ffffff;
    padding: 80px 0;
}

/* ── Header ──────────────────────────────────── */
.tg-insta-header {
    text-align: center;
    padding: 0 40px;
    margin-bottom: 40px;
}

.tg-insta-heading {
    font-family: 'beaufort-pro', serif;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400;
    color: #000000;
    margin: 0 0 12px;
    line-height: 1.1;
}

.tg-insta-handle {
    font-family: 'brandon-grotesque', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #888888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tg-insta-handle:hover { color: #000000; }

/* ── Grid ─────────────────────────────────────── */
.tg-insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

/* ── Item ─────────────────────────────────────── */
.tg-insta-item {
    display: block;
    text-decoration: none;
}

.tg-insta-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* square */
    overflow: hidden;
    background: #f0ede8;
}

.tg-insta-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.tg-insta-item:hover .tg-insta-thumb img {
    transform: scale(1.06);
}

/* Hover overlay */
.tg-insta-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.tg-insta-item:hover .tg-insta-hover {
    background: rgba(0,0,0,0.18);
}

/* Video / Reel play indicator */
.tg-insta-play {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    line-height: 0;
    pointer-events: none;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}

.tg-insta-play svg {
    width: 20px;
    height: 20px;
}

/* ── Footer ──────────────────────────────────── */
.tg-insta-footer {
    text-align: center;
    padding: 0 40px;
    margin-top: 48px;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 767px) {
    .tg-insta-section { padding: 56px 0; }
    .tg-insta-header,
    .tg-insta-footer  { padding: 0 24px; }
    .tg-insta-footer  { margin-top: 32px; }
    .tg-insta-grid    { grid-template-columns: repeat(2, 1fr) !important; gap: 3px; }
}