/* 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;
}

.films__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

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

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

.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;
  bottom: 12px;
  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;
}

/* 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;
}

.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;
}

/* 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__thumb-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

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

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