/* Rhythm families.
 *
 * Replaces a list of thirty pills nobody read with five 9:16 cards. Each
 * card is a button that opens a panel of the styles inside that family.
 *
 * Desktop lays the five in a row and lets the pointer pick one out: the
 * hovered card lifts and the rest fall back, so the row has a focus
 * instead of five equal claims. A phone scrolls them with snap points,
 * one card at a time, and plays whichever one is in view.
 */

.styles { margin-top: var(--s4); }

/* ---------------------------------------------------------------- rail */
.styles__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78vw;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* bleed to the screen edges so a card can sit centred on a phone */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  padding-block: 4px 10px;
}
.styles__rail::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- card */
.sfam {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hair-oro);
  border-radius: 16px;
  overflow: hidden;
  background: var(--plum-900);
  color: var(--on-dark);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              opacity .25s var(--ease);
}
.sfam__media {
  display: block;
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--plum-800);
}
.sfam__media picture,
.sfam__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sfam__p,
.sfam__v {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sfam__v { opacity: 0; transition: opacity .35s var(--ease); z-index: 1; }
.sfam.is-playing .sfam__v { opacity: 1; }

/* the name has to stay readable over whatever frame is underneath it */
.sfam__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(6, 1, 9, .92) 0%, rgba(6, 1, 9, .72) 26%, rgba(6, 1, 9, 0) 62%);
  pointer-events: none;
}

.sfam__cap {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: block;
}
.sfam__yrs {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(6, 1, 9, .6);
  box-shadow: inset 0 0 0 1px var(--hair-oro-2);
  color: var(--oro);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sfam__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  /* "Ritmos colombianos" is the longest name and sets the ceiling: at the
     desktop card width it has to come down or it runs past the edge. */
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.1;
  color: var(--on-dark);
  /* no auto-hyphens: Spanish breaks "estilo" as "es-tilo", which reads
     worse than letting the word move to the next line */
  overflow-wrap: break-word;
}
.sfam__feel {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--on-dark-muted);
}

/* ---------------------------------------------------------------- dots */
.styles__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.sfam-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 181, 87, .28);
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.sfam-dot[aria-current="true"] { background: var(--oro); transform: scale(1.35); }
/* the tap target is bigger than the dot */
.sfam-dot::before { content: ""; position: absolute; width: 36px; height: 36px;
  transform: translate(-14px, -14px); }
.styles__dots { position: relative; }
.sfam-dot { position: relative; }

/* ---------------------------------------------------------------- detail */
.styles__detail { margin-top: 18px; }
.sfam-d {
  border: 1px solid var(--hair-oro);
  border-radius: 16px;
  background: var(--plum-900);
  padding: clamp(20px, 2.6vw, 28px);
}
.sfam-d[hidden] { display: none; }
.sfam-d__h {
  margin: 0 0 14px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--on-dark);
}
.sfam-d__h span { color: var(--on-dark-muted); font-family: var(--f-body); font-size: 15px; }
.sfam-d__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sfam-chip {
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair-oro-2);
  background: var(--plum-800);
  color: var(--oro);
  font-size: 14px;
  font-weight: 600;
}
.sfam-d__note {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.sfam-d__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1024px) {
  .styles__rail {
    grid-auto-columns: 1fr;
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .styles__dots { display: none; }

  /* one card at a time holds the row; the others step back */
  .styles__rail:hover .sfam,
  .styles__rail:focus-within .sfam { opacity: .6; }
  .styles__rail .sfam:hover,
  .styles__rail .sfam:focus-visible,
  .styles__rail .sfam[aria-expanded="true"] {
    opacity: 1;
    transform: scale(1.04);
    border-color: var(--oro);
    z-index: 2;
  }
}

/* ---------------------------------------------------------------- motion */
/* With no clip to play, the poster drifts instead, so the card is not a
   still frame sitting next to four other still frames. */
@media (prefers-reduced-motion: no-preference) {
  .sfam__p { transition: transform 1.2s var(--ease); }
  .sfam.is-playing .sfam__p { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sfam, .sfam__p, .sfam__v, .sfam-dot { transition: none; }
  .sfam.is-playing .sfam__p { transform: none; }
  .styles__rail { scroll-behavior: auto; }
}