/* Avery Moments block
   Figma: Life In Our Homes Campaign — node 35:483 */

.avery-moments {
  position: relative;
  overflow: hidden;
  background-color: #607470;
  padding-top: 3.4375rem;
  padding-bottom: 4.5rem;
}

/* Remove the global "section+section { margin-top: 70px }" gap: the design runs
   this sage band flush against whatever precedes it, and the gap also stranded
   the daisy illustration of the block above short of this edge. */
section + .avery-moments {
  margin-top: 0;
}

/* Measured from the design render: the texture lifts the sage by ~3/255, so it
   reads as a grain rather than a pattern. */
.avery-moments__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.avery-moments__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.02;
}

/* The design stacks the header, gallery, closing copy and video in a centred
   column with a 62px rhythm. */
.avery-moments__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.875rem;
  text-align: center;
}

/* Heading and intro sit closer together than the outer rhythm. */
.avery-moments__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.avery-moments__heading {
  margin: 0;
  font-family: 'pp-hatton', Georgia, 'Times New Roman', serif;
  font-weight: 200;
  font-size: clamp(2rem, 4vw, 2.8125rem);
  line-height: 1.1;
  color: #fff;
}

.avery-moments__heading em {
  font-style: italic;
  font-weight: 200;
}

.avery-moments__intro,
.avery-moments__text {
  width: 100%;
  margin: 0 auto;
  font-family: 'gesta', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: normal;
  color: #fff5eb;
}

/* The design separates paragraphs with a blank line; 1.125rem reproduces that
   gap without the editor having to type empty paragraphs. */
.avery-moments__intro p,
.avery-moments__text p {
  margin: 0 0 1.125rem;
}

.avery-moments__intro > :last-child,
.avery-moments__text > :last-child {
  margin-bottom: 0;
}

.avery-moments__intro a,
.avery-moments__text a {
  color: #fff5eb;
  text-decoration: underline;
}

.avery-moments__intro a:hover,
.avery-moments__intro a:focus,
.avery-moments__text a:hover,
.avery-moments__text a:focus {
  text-decoration: none;
}

/* Gallery — three across, 22px apart. The aspect ratio is the design's
   348 x 410 tile, so the images keep their proportions as the container
   narrows instead of being locked to a fixed height. */
.avery-moments__gallery {
  width: 100%;
  margin: 0;
}

.avery-moments__gallery:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.avery-moments__item {
  margin: 0;
}

.avery-moments__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 348 / 410;
  object-fit: cover;
}

/* Video — full width at the design's 1086 x 410 proportion, with the poster
   held until someone presses play. */
.avery-moments__video {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1086 / 455;
  background-color: #4e605c;
  /* height: 455px; */
}

.avery-moments__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* On play the panel takes the video's own 16:9 shape, so the frame fills it
   edge to edge with no black bands AND nothing is cropped. Scaling the iframe
   up to cover the wider poster ratio instead would cut off the bottom 16% —
   which is precisely where the player's controls and unmute button sit. */
/* Switched instantly rather than transitioned: animating aspect-ratio is
   unevenly supported and would only stretch the frame mid-playback. */
.avery-moments__video.is-playing {
  /* --video-aspect is the video's real ratio, set inline per block from
     Vimeo's oEmbed data. Falls back to 16:9 for YouTube and uploads,
     where the true shape is not known server-side. */
  aspect-ratio: var(--video-aspect, 16 / 9);
}

.avery-moments__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A self-hosted file may not be 16:9; contain shows all of it rather than
   cropping a frame the editor chose. */
video.avery-moments__embed {
  object-fit: contain;
  background-color: #000;
}


/* Editor-only warning when a video link cannot be parsed. */
.avery-moments__notice {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  background-color: #fff5eb;
  border-left: 4px solid #b3261e;
  font-family: 'gesta', sans-serif;
  font-size: 0.875rem;
  color: #1c1c1c;
  text-align: left;
}

/* While a video plays the poster and arrow are only hidden, never removed, so
   closing restores them instantly without re-fetching the image. */
.avery-moments__video.is-playing .avery-moments__poster,
.avery-moments__video.is-playing .avery-moments__play {
  display: none;
}

/* Close control — sits above the embed, and only while something is playing. */
.avery-moments__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: #fff5eb;
  border: 0;
  color: #1c1c1c;
  cursor: pointer;
}

.avery-moments__video.is-playing .avery-moments__close {
  display: inline-flex;
}

.avery-moments__close:hover,
.avery-moments__close:focus-visible {
  background-color: #607470;
  color: #fff5eb;
}

.avery-moments__close svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Play arrow: the design's 43.84 x 87.68 cream triangle, centred. */
.avery-moments__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 88px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff5eb;
  cursor: pointer;
}

.avery-moments__play svg {
  display: block;
  width: 44px;
  height: 88px;
}

.avery-moments__play:hover,
.avery-moments__play:focus-visible {
  color: #fff;
}

/* Optional CTA. The section is dark sage, so this uses the design's on-dark
   button (cream fill, teal label). */
.avery-moments__btn.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  background-color: #fff5eb;
  border: 0;
  border-radius: 0;
  font-family: 'gesta', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.266px;
  text-transform: capitalize;
  white-space: nowrap;
  color: #006d8f;
  box-shadow: none;
}

.avery-moments__btn.btn.btn-primary:hover,
.avery-moments__btn.btn.btn-primary:focus {
  background-color: #006d8f;
  color: #fff5eb;
}

.avery-moments__btn.btn.btn-primary .icon {
  display: inline-flex;
  width: 14px;
  height: 11px;
  margin: 0;
  padding: 0;
}

.avery-moments__btn.btn.btn-primary .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tablet keeps the three-across layout from the design. */
@media (max-width: 991px) {
  .avery-moments {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }

  .avery-moments__inner {
    gap: 2.5rem;
  }

  .avery-moments__header {
    gap: 1.5rem;
  }

  .avery-moments__play,
  .avery-moments__play svg {
    width: 32px;
    height: 64px;
  }
}

/* Mobile: one image at a time. Galleries of three or fewer stay as a plain
   stack (no Slick is initialised for them). */
@media (max-width: 767px) {
  .avery-moments__gallery:not(.slick-initialized) {
    grid-template-columns: 1fr;
  }

  /* A 2.65:1 video is a letterbox sliver on a phone; 16:9 keeps it watchable. */
  .avery-moments__video {
    aspect-ratio: 16 / 9;
  }

  .avery-moments__play,
  .avery-moments__play svg {
    width: 24px;
    height: 48px;
  }
}

/* Slick carousel — only ever active below 768px, see avery-moments.php */
.avery-moments__gallery.slick-initialized {
  position: relative;
}

/* Slick has no gap of its own, so pad each slide and pull the track back by the
   same amount to reproduce the grid's 22px spacing. */
.avery-moments__gallery .slick-list {
  margin: 0 -11px;
}

.avery-moments__gallery .slick-slide {
  height: auto;
  padding: 0 11px;
}

/* One image per slide on mobile, so it should run full width. */
@media (max-width: 767px) {
  .avery-moments__gallery .slick-list {
    margin: 0;
  }

  .avery-moments__gallery .slick-slide {
    padding: 0;
  }
}

.avery-moments__gallery .slick-dots {
  position: static;
  margin: 1rem 0 0;
  padding: 0;
  line-height: 0;
}

.avery-moments__gallery .slick-dots li button:before {
  color: #fff5eb;
  opacity: 0.35;
  font-size: 8px;
}

.avery-moments__gallery .slick-dots li.slick-active button:before {
  color: #fff5eb;
  opacity: 1;
}

.avery-moments__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  background-color: #fff5eb;
  border: 0;
  color: #607470;
}

.avery-moments__nav--prev {
  left: 10px;
}

.avery-moments__nav--next {
  right: 10px;
}

.avery-moments__nav:hover,
.avery-moments__nav:focus {
  background-color: #006d8f;
  color: #fff5eb;
}

.avery-moments__nav.slick-disabled {
  opacity: 0.4;
  pointer-events: none;
}