/* Wedding films section: sticky player on the left, scrolling playlist on
   the right. Scoped under .films so the older .vid__ styles in index.css
   stay untouched for the wedgraphia and city pages. */

.films {
  background: #ffffff;
  padding: 9rem 8% 64px;
}

/* The slider above ends on its own full-width rule, so empty space alone
   never reads as a break. A titled rule separates the two blocks instead. */
.films__head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-bottom: 4.5rem;
}

.films__head::before,
.films__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6e6e6;
}

/* Colour comes from .brown-heading, which setTheme() paints per platform. */
.films__heading {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 4.4rem;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
}

.films__inner {
  display: grid;
  grid-template-columns: minmax(0, 61fr) minmax(0, 39fr);
  column-gap: 40px;
  max-width: 1920px;
  margin: 0 auto;
}

/* Player column */

.films__player {
  position: sticky;
  top: 96px;
  align-self: start;
}

/* Held at 16:9 whatever the film is, so the player box and the title under it
   never move. The black belongs to the film's own box below, not to the frame,
   so a film shorter than 16:9 leaves page white above and below rather than
   another black bar. */
.films__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
  overflow: hidden;
}

.films__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  display: block;
}

.films__poster {
  position: absolute;
  font-family: Montserrat, sans-serif;
  inset: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  display: block;
}

/* --film-fit is the film's height as a share of the 16:9 frame, set per film
   by films.js. It is 1 for a 16:9 film, which fills the frame as before.
   Comes after the two rules above so it wins over their inset. */
.films__frame iframe,
.films__poster {
  height: calc(100% * var(--film-fit, 1));
  top: calc((100% - 100% * var(--film-fit, 1)) / 2);
  bottom: auto;
}

.films__poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.19);
}

.films__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.films__play::after {
  content: "";
  margin-left: 5px;
  border-left: 18px solid #1b1a1a;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.films__poster:hover .films__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.films__poster:focus-visible {
  outline: 2px solid #9f7a66;
  outline-offset: -2px;
}

/* Phones have no volume control in the embedded player, so they get this
   instead. Desktop keeps YouTube's own controls and never shows it. */
.films__unmute {
  display: none;
  position: absolute;
  left: 12px;
  /* Lifted by the frame's spare height so it stays on the film, not in the
     white below a film shorter than 16:9. */
  bottom: calc(12px + (100% - 100% * var(--film-fit, 1)) / 2);
  z-index: 3;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(27, 26, 26, 0.75);
  color: #ffffff;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.films__unmute:focus-visible {
  outline: 2px solid #9f7a66;
  outline-offset: 2px;
}

/* Sized in rem, and matched to .films__heading, so the section heading and
   the playing film's name stay the same size on any root font size. */
.films__title {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 4.4rem;
  line-height: 1.2;
  color: #1b1a1a;
  margin: 24px 0 0;
  text-align: center;
}

/* Playlist column */

/* Arrows sit over the strip edges and are the playlist's only chrome on
   mobile; the desktop list scrolls vertically instead. */
.films__strip {
  position: relative;
}

.films__edge-btn {
  display: none;
  font-family: Montserrat, sans-serif;
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 2;
}

.films__edge-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1px solid #1b1a1a;
  border-right: 1px solid #1b1a1a;
}

.films__edge-btn--prev {
  left: 6px;
}

.films__edge-btn--prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.films__edge-btn--next {
  right: 6px;
}

.films__edge-btn--next::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

.films__edge-btn:disabled {
  display: none;
}

.films__list {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dddddd transparent;
}

.films__list::-webkit-scrollbar {
  width: 4px;
}

.films__list::-webkit-scrollbar-track {
  background: transparent;
}

.films__list::-webkit-scrollbar-thumb {
  background: #dddddd;
}

.films__row {
  display: flex;
  font-family: Montserrat, sans-serif;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #e6e6e6;
  border-left: 2px solid transparent;
  padding: 14px 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.films__thumb-wrap {
  display: block;
  position: relative;
  flex: none;
  width: 112px;
  height: 63px;
  overflow: hidden;
}

/* A still with a runtime badge still reads as a photo, so every row carries
   a play glyph over its thumbnail. Built from borders like .films__play, and
   drawn on the wrap rather than the image so the row's brightness filter
   leaves it alone. */
.films__thumb-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  /* .films__thumb is scaled, so it stacks; without this the disc lands
     under the thumbnail and only the glyph shows. */
  z-index: 1;
}

.films__thumb-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Off-centre by design: a triangle's visual centre sits left of its box. */
  transform: translate(-40%, -50%);
  border-left: 9px solid #ffffff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  z-index: 2;
}

/* The row being played says so with a pause glyph: two bars cut from one box
   by its own left and right borders, the 3px content box being the gap. */
.films__row.is-active .films__thumb-wrap::after {
  transform: translate(-50%, -50%);
  /* The page is border-box, which would collapse the gap into the bars. */
  box-sizing: content-box;
  width: 3px;
  height: 11px;
  border: 0;
  border-left: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
}

/* Pausing in the embed hands the row back its play glyph. */
.films__list.is-paused .films__row.is-active .films__thumb-wrap::after {
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border: 0;
  border-left: 9px solid #ffffff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.films__badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
}

.films__badge:empty {
  display: none;
}

/* Now-playing bars, flush into the bottom left corner of the still with no
   plate behind them. Only the playing row shows them, and they hold still
   while the embed is paused, so the row reads as playing rather than merely
   selected. */
.films__eq {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.films__row.is-active .films__eq {
  display: flex;
}

.films__eq i {
  width: 3px;
  background: #ffffff;
  animation: films-eq 900ms ease-in-out infinite alternate;
}

/* One set of keyframes for all three, offset into it so they never move as a
   block. Negative delays start them mid-cycle instead of after a wait. */
.films__eq i:nth-child(2) {
  animation-delay: -300ms;
}

.films__eq i:nth-child(3) {
  animation-delay: -600ms;
}

.films__list.is-paused .films__eq i {
  animation-play-state: paused;
}

@keyframes films-eq {
  from {
    height: 20%;
  }

  to {
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .films__eq i {
    animation: none;
    height: 100%;
  }
}

/* YouTube pads these frames into 16:9 with black pillars (7.8% a side, the
   films are shot 3:2). Scaling past them shows the same crop as the player. */
.films__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.19);
  filter: brightness(0.85);
  transition: filter 0.2s ease;
}

.films__row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.films__row-title {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  color: #1b1a1a;
  transition: color 0.2s ease;
}

.films__row:hover .films__thumb {
  filter: none;
}

.films__row:hover .films__row-title {
  color: #000000;
}

.films__row:focus-visible {
  outline: 2px solid #9f7a66;
  outline-offset: -2px;
}

.films__row.is-active {
  opacity: 1;
  background-color: #f7f1ee;
  border-left-color: #9f7a66;
}

.films__row.is-active .films__thumb {
  filter: none;
}

@media (max-width: 900px) {
  .films {
    padding: 84px 24px 24px;
  }

  .films__head {
    gap: 16px;
    padding-bottom: 32px;
  }

  .films__heading {
    font-size: 2.6rem;
  }

  .films__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  /* Nothing pins on mobile. The player and the strip already fit on screen
     together, so sticking the frame only detached it from its title and
     let the strip slide out of sight underneath it. */
  .films__player {
    position: static;
  }

  .films__frame {
    position: relative;
  }

  .films__title {
    font-size: 2.2rem;
    margin-top: 16px;
  }

  .films__unmute:not([hidden]) {
    display: block;
  }

  .films__edge-btn {
    display: block;
  }

  .films__edge-btn:disabled {
    display: none;
  }

  /* Cards sit side by side and the next one peeks in, so the strip reads as
     swipeable. Snapping keeps a card aligned after a swipe or an arrow. */
  .films__list {
    display: flex;
    gap: 12px;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 16px;
  }

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

  .films__row {
    flex: 0 0 62%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    scroll-snap-align: start;
    border-bottom: 2px solid transparent;
    border-left: 0;
    padding: 0 0 10px;
  }

  .films__row-text {
    text-align: center;
  }

  .films__thumb-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .films__thumb-wrap::before {
    width: 40px;
    height: 40px;
  }

  .films__thumb-wrap::after {
    border-left-width: 13px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  }

  .films__row.is-active .films__thumb-wrap::after {
    width: 5px;
    height: 16px;
    border-left-width: 4px;
    border-right-width: 4px;
  }

  .films__list.is-paused .films__row.is-active .films__thumb-wrap::after {
    border-left-width: 13px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  }

  .films__badge {
    right: 6px;
    bottom: 6px;
    padding: 2px 6px;
    font-size: 12px;
  }

  .films__eq {
    gap: 3px;
    height: 16px;
  }

  .films__eq i {
    width: 4px;
  }

  .films__row.is-active {
    background-color: #f7f1ee;
    border-bottom-color: #9f7a66;
  }
}