/**
 * Reels — latest Instagram Reels as editorial cards, not an embed.
 *
 * Used on the homepage and dr-wei.html. Cards are filled by js/reels.js
 * from a Behold JSON feed. Desktop is three columns; below 900px the same
 * cards become a snap-scrolling row.
 *
 * Everything reads from variables.css.
 */

.reels {
  --reels-card-width: 77vw;
}

.reels .section-head { margin-bottom: var(--space-xl); }

.reels .section-head .text-muted {
  max-width: 36ch;
  margin-inline: auto;
}

.reels__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.reels__track[hidden],
.reels__track:empty { display: none; }

.reels__item { margin: 0; }

.reels__card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--sand);
  color: var(--color-on-dark);
  text-decoration: none;
}

.reels__card:hover { color: var(--color-on-dark); }

.reels__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.reels__card::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 22%, transparent),
    transparent
  );
  pointer-events: none;
}

.reels__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-overlay);
  color: var(--color-on-dark);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.reels__play::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.38rem 0 0.38rem 0.65rem;
  border-color: transparent transparent transparent currentColor;
  margin-left: 0.14rem;
}

.reels__badge {
  position: absolute;
  z-index: 1;
  left: var(--space-xs);
  bottom: var(--space-xs);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-on-dark);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--ink) 50%, transparent);
}

.reels__follow {
  margin-top: var(--space-lg);
  text-align: center;
}

.reels__follow .link-arrow { letter-spacing: var(--tracking-wide); }

@media (hover: hover) and (pointer: fine) {
  .reels__card:hover .reels__thumb,
  .reels__card:focus-visible .reels__thumb {
    transform: scale(1.04);
  }

  .reels__card:hover .reels__play,
  .reels__card:focus-visible .reels__play {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 899px) {
  .reels__track {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .reels__track::-webkit-scrollbar { display: none; }

  .reels__item {
    flex: 0 0 var(--reels-card-width);
    max-width: 22rem;
    scroll-snap-align: start;
  }

  .reels__track::after {
    content: '';
    flex: 0 0 var(--gutter);
  }
}