/* ============================================
   TWING CAFE - REELS (shared). Used on HOMEPAGE, OUTLETS, FRANCHISE.
   Needs global.css (variables) + reels.js (deferred).
   <link rel="stylesheet" href="SHARED/reels.css">   <script src="SHARED/reels.js" defer></script>

   Instagram strip: each card is a light placeholder (tile) that reels.js swaps for the reel's
   embed iframe when the card scrolls into view (max 3 at a time). Fixed aspect box = no layout shift.
   <ul class="reels__track" role="region" aria-label="..." tabindex="0">
     <li class="reel-card" data-reel-id="REEL_ID">
       <div class="reel-card__frame">
         <button type="button" class="reel-tile" data-title="..." aria-label="Play reel 1">...svg + label...</button>
       </div>
       <p class="reel-card__caption">...</p>
       <a class="reel-card__link" href="https://www.instagram.com/reel/REEL_ID/">Watch on Instagram</a>
     </li>
   </ul>
   <p class="reels__foot"><a class="reels__follow" href="...">Follow @twing.cafe</a></p>
   REEL_ID = the part between /reel/ and the next slash (no ?igsh= tracking).
   Future own-video card: put <video class="reel-video" muted loop playsinline preload="none"
   data-src="...mp4"> inside .reel-card__frame instead of the tile (reels.js adds the Sound button).
   ============================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.reels { position: relative; }
.reels__head-link { margin-top: 18px; }

/* ---------- own-video card (future) ---------- */
.reel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--green);
  border: 0;
}
.reel-player__sound {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--green-deep); background: var(--gold);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.reel-player__sound[aria-pressed="true"] { background: var(--white); }
.reel-player__sound:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.reels__foot { text-align: center; margin: 8px 0 0; }
.reels__follow {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: var(--gold); text-decoration: none; border-bottom: 1.5px solid var(--gold);
}
.reels__follow:hover { color: var(--white); border-color: var(--white); }
.reels__follow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Instagram strip ---------- */
.reels__wrap { position: relative; margin-top: 16px; }
.reels__track {
  position: relative; /* keeps absolute children from widening the page */
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 16px;
  scrollbar-width: thin; scrollbar-color: rgba(246,179,9,0.5) transparent;
  list-style: none; margin: 0;
}
.reels__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.reel-card {
  flex: 0 0 min(280px, 72vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 8px;
}
.reel-card__frame {
  position: relative;
  aspect-ratio: 9 / 17; /* same for tile and embed: no layout shift */
  background: var(--green);
  border: 1px solid rgba(246,179,9,0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.reel-embed {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: var(--green);
}
.reel-tile {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 16px; cursor: pointer;
  color: var(--white); background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%);
  border: 0; font-family: var(--font-ui);
}
.reel-tile svg { width: 56px; height: 56px; }
.reel-tile__label { font-size: 13px; font-weight: 600; letter-spacing: 0.3px; text-align: center; }
.reel-tile__hint { font-size: 11px; color: var(--text-muted); }
.reel-tile:hover svg circle { fill: var(--gold); }
.reel-tile:hover svg path { fill: var(--green-deep); }
.reel-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

.reel-card__caption { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.5px; color: var(--text-muted); margin: 0; }
.reel-card__link {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--gold); text-decoration: none; border-bottom: 1.5px solid var(--gold);
}
.reel-card__link:hover { color: var(--white); border-color: var(--white); }
.reel-card__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Desktop arrows (made by reels.js; touch screens swipe) */
.reels__arrow {
  display: none; position: absolute; top: 35%; z-index: 2;
  width: 48px; height: 48px; align-items: center; justify-content: center;
  background: var(--green-deep); color: var(--gold);
  border: 1px solid rgba(246,179,9,0.5); border-radius: var(--radius-sm);
  font-size: 22px; line-height: 1; transition: var(--transition);
}
.reels__arrow:hover:not(:disabled) { background: var(--gold); color: var(--green-deep); }
.reels__arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.reels__arrow:disabled { opacity: 0.3; cursor: default; }
.reels__arrow--prev { left: -24px; }
.reels__arrow--next { right: -24px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) { .reels__arrow { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .reels__track { scroll-behavior: auto; }
  .reels__arrow { transition: none; }
}