/* ============================================================
   REELS + INSTAGRAM
   A dark, saturated band: 9:16 reel rail with hover-to-play
   video, plus a live Instagram photo grid and follow CTA.
   ============================================================ */

.ig-band{
  position:relative; overflow:hidden;
  background: var(--bg-invert); color: var(--text-invert);
  padding-block: clamp(3.5rem, 7vw, 7rem);
}
.ig-band .motif-bg{ opacity:.07; }
.ig-band__halo{
  position:absolute; inset:-25%;
  background:
    radial-gradient(30% 44% at 16% 24%, var(--halo-1), transparent 66%),
    radial-gradient(28% 40% at 78% 18%, var(--halo-2), transparent 66%),
    radial-gradient(32% 46% at 52% 92%, var(--halo-3), transparent 68%);
  filter: blur(36px); animation: haloDrift 22s ease-in-out infinite; pointer-events:none;
}
.ig-band__in{ position:relative; z-index:2; }

/* ---------------- Header row ---------------- */
.ig-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap: 1.4rem 2.5rem; margin-bottom: clamp(1.8rem,4vw,3.2rem);
  width:var(--wrap); margin-inline:auto;
}
.ig-head h2{ color: var(--text-invert); font-size: var(--t-xl); }
.ig-head .eyebrow{ color: var(--accent-hi); }
.ig-head__handle{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-sm); letter-spacing:.14em;
  color: color-mix(in srgb, var(--text-invert) 74%, transparent);
  margin-top:.7rem;
}
.ig-head__handle svg{ width:17px; height:17px; fill:currentColor; }

/* Instagram-gradient follow button */
.btn--ig{
  --btn-fg:#fff;
  background-image: linear-gradient(78deg, #F9CE34 4%, #EE2A7B 46%, #6228D7 96%);
  background-color: transparent; border-color: transparent;
  box-shadow: 0 12px 36px rgba(238,42,123,.36);
}
.btn--ig::before{ background-image: linear-gradient(78deg, #6228D7 4%, #EE2A7B 54%, #F9CE34 96%); }
.btn--ig:hover{ color:#fff; box-shadow: 0 16px 46px rgba(238,42,123,.5); }
.btn--ig svg{ width:16px; height:16px; fill:currentColor; }

/* ---------------- Reel rail ---------------- */
.reels{
  display:flex; gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x:auto; overflow-y:hidden;
  padding-inline: max(calc((100vw - var(--wrap)) / 2), 1.25rem);
  padding-block: .4rem 1.4rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.reels::-webkit-scrollbar{ height:3px; }
.reels::-webkit-scrollbar-track{ background: transparent; }
.reels::-webkit-scrollbar-thumb{
  background-image: var(--grad-hot); border-radius:4px; border:0;
  opacity:0;
}
.reels:hover::-webkit-scrollbar-thumb{ opacity:1; }

.reel{
  position:relative; flex:none; display:block;
  width: clamp(178px, 21vw, 268px); aspect-ratio: 9/16;
  border-radius: var(--r-md); overflow:hidden;
  scroll-snap-align:center; isolation:isolate;
  background: color-mix(in srgb, var(--text-invert) 8%, transparent);
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.reel:hover{ transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-glow); }

/* gradient ring on hover */
.reel::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background-image: var(--grad-hot);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .45s var(--e-out); pointer-events:none; z-index:4;
}
.reel:hover::after{ opacity:1; }

.reel__media{ position:absolute; inset:0; z-index:1; }
.reel__media img,
.reel__media video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1.1s var(--e-out), opacity .45s var(--e-out);
}
.reel__media video{ position:absolute; inset:0; opacity:0; }
.reel.is-playing .reel__media video{ opacity:1; }
.reel.is-playing .reel__media img{ opacity:0; }
.reel:hover .reel__media img{ transform: scale(1.06); }

.reel__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,3,10,.42) 0%, transparent 34%, transparent 52%, rgba(12,3,10,.86) 100%);
}

/* play glyph */
.reel__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:3;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color:#fff;
  transition: opacity .4s var(--e-out), transform .5s var(--e-spring), background-color .4s;
}
.reel__play svg{ width:17px; height:17px; fill:currentColor; margin-left:2px; }
.reel:hover .reel__play{ background-image: var(--grad-hot); border-color:transparent; transform:translate(-50%,-50%) scale(1.1); }
.reel.is-playing .reel__play{ opacity:0; }

/* top badge */
.reel__badge{
  position:absolute; top:.75rem; left:.75rem; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34em .7em; border-radius: var(--r-pill);
  background: rgba(12,3,10,.44); border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
.reel__badge svg{ width:11px; height:11px; fill:currentColor; }

/* bottom caption */
.reel__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding: .9rem 1rem 1.05rem; color:#fff;
}
.reel__cap p{
  font-size:var(--t-sm); line-height:1.45; font-weight:400;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.reel__cap .stat{
  display:flex; align-items:center; gap:.85rem; margin-top:.5rem;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.72); text-align:left;
}
.reel__cap .stat span{ display:inline-flex; align-items:center; gap:.3rem; }
.reel__cap .stat svg{ width:12px; height:12px; fill:currentColor; }

/* rail hint + arrows */
.reels-foot{
  width:var(--wrap); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:.4rem;
}
.reels-hint{
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  color: color-mix(in srgb, var(--text-invert) 52%, transparent);
  display:flex; align-items:center; gap:.6rem;
}
.reels-nav{ display:flex; gap:.5rem; }
.reels-nav button{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--text-invert) 24%, transparent);
  background:transparent; color: var(--text-invert);
  display:grid; place-items:center;
  transition: background-image .4s, border-color .4s, color .4s, transform .4s var(--e-out);
}
.reels-nav button:hover{
  background-image: var(--grad-hot); border-color:transparent; color:#fff;
  transform: translateY(-2px);
}
.reels-nav svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* ---------------- Instagram photo grid ---------------- */
.ig-grid{
  width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns: repeat(6,1fr);
  gap: clamp(.4rem,.9vw,.8rem);
  margin-top: clamp(2rem,4vw,3.4rem);
}
@media (max-width:900px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }

.ig-cell{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-radius: var(--r-sm); display:block; cursor:pointer;
}
.ig-cell img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--e-out); }
.ig-cell:hover img{ transform: scale(1.09); }
.ig-cell::after{
  content:""; position:absolute; inset:0;
  background-image: var(--grad-hot); opacity:0; mix-blend-mode:multiply;
  transition: opacity .4s var(--e-out);
}
.ig-cell:hover::after{ opacity:.42; }
.ig-cell__ico{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  color:#fff; opacity:0; transform: scale(.6);
  transition: opacity .4s var(--e-out), transform .5s var(--e-spring);
}
.ig-cell:hover .ig-cell__ico{ opacity:1; transform:none; }
.ig-cell__ico svg{ width:24px; height:24px; fill:currentColor; }

/* ---------------- Live embed slot (optional) ---------------- */
.ig-embeds{
  width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap: clamp(.8rem,1.6vw,1.4rem); margin-top: clamp(2rem,4vw,3rem);
}
@media (max-width:900px){ .ig-embeds{ grid-template-columns:1fr; } }
.ig-embed{
  border-radius: var(--r-md); overflow:hidden;
  background: color-mix(in srgb, var(--text-invert) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--text-invert) 14%, transparent);
  min-height: 480px;
}
.ig-embed iframe{ width:100%; min-height:480px; border:0; display:block; }