/* Our Stories / Avery Updates block
   Figma: Life In Our Homes Campaign — node 35:555 */

.our-stories {
  position: relative;
  background-color: #fff5eb;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

/* Remove the global "section+section { margin-top: 70px }" gap — the design
   runs these bands flush. */
section + .our-stories {
  margin-top: 0;
}

.our-stories__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

/* Optional heading and intro — both are off by default, as the design has
   neither above the cards. */
.our-stories__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: #006d8f;
}

.our-stories__intro {
  width: 100%;
  margin: 0 auto;
  font-family: 'gesta', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: normal;
  color: #1c1c1c;
}

.our-stories__intro p {
  margin: 0 0 1.125rem;
}

.our-stories__intro > :last-child {
  margin-bottom: 0;
}

/* Cards — two across, 30px apart, equal height so the sage panels line up. */
.our-stories__cards {
  width: 100%;
  margin: 0;
}

.our-stories__cards:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.our-stories__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  text-align: center;
}

/* The design's 534 x 300 media area is exactly 16:9, so a video fills it
   natively — nothing to crop and no need to resize the card on play. */
.our-stories__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #4e605c;
}

.our-stories__poster,
.our-stories__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.our-stories__poster {
  object-fit: cover;
}

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

/* Play arrow: the design's 43.84 x 87.68 cream triangle, centred. */
.our-stories__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;
}

.our-stories__play svg {
  display: block;
  width: 44px;
  height: 88px;
}

.our-stories__play:hover,
.our-stories__play:focus-visible {
  color: #fff;
}

/* Sage panel beneath each video, 30px padding with a 15px rhythm. */
.our-stories__body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 30px;
  background-color: #607470;
}

.our-stories__title {
  margin: 0;
  font-family: 'pp-hatton', Georgia, 'Times New Roman', serif;
  font-weight: 200;
  font-size: 2.25rem;
  line-height: normal;
  color: #fff5eb;
}

.our-stories__text {
  margin: 0;
  font-family: 'gesta', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 20px;
  color: #fff5eb;
}

.our-stories__text p {
  margin: 0 0 1.125rem;
}

.our-stories__text > :last-child {
  margin-bottom: 0;
}

.our-stories__text a {
  color: #fff5eb;
  text-decoration: underline;
}

.our-stories__text a:hover,
.our-stories__text a:focus {
  text-decoration: none;
}

/* Editor-only warning when a video link cannot be parsed. */
.our-stories__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;
}

/* The card panel is sage, so the CTA uses the design's on-dark button
   (cream fill, teal label). margin-top pushes it to the foot of the panel so
   buttons line up across cards of differing text length. */
.our-stories__btn.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  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;
}

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

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

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

/* Video modal
   A full-screen overlay with the video centred in it. Moved to <body> by the
   block script, since a transform anywhere up the tree would otherwise stop
   position:fixed resolving against the viewport.

   The frame sizes itself to each video's own ratio, so it is filled whatever
   shape the editor uploaded — including vertical footage, which could never fit
   the card without huge bars. */
.our-stories__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The modal is flex, which would otherwise defeat the hidden attribute. */
.our-stories__modal[hidden] {
  display: none;
}

.our-stories__modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(28, 28, 28, 0.92);
}

.our-stories__modal-inner {
  position: relative;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

/* 800px wide, but never wider than the screen and never taller than it either:
   min() against all three keeps the exact ratio, where capping height alone
   would stretch the frame. A tall video therefore comes out narrower than
   800px, because its height is what runs out of room first. */
.our-stories__modal-frame {
  position: relative;
  width: min(800px, 94vw, calc(92vh * var(--modal-aspect, 1.7778)));
  aspect-ratio: var(--modal-aspect, 1.7778);
  background-color: #000;
}

.our-stories__modal-frame .our-stories__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.our-stories__modal-frame video.our-stories__embed {
  object-fit: contain;
}

/* Sits in the video's own top-right corner, overlapping the picture. Absolute
   against .modal-inner, which is sized by the frame. It comes before the frame
   in the DOM, so it needs the z-index to paint over the embed. */
.our-stories__modal-close {
  position: absolute;
  top: -20px;
  right: -10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: #fff5eb;
  border: 0;
  color: #1c1c1c;
  cursor: pointer;
}

.our-stories__modal-close:hover,
.our-stories__modal-close:focus-visible {
  background-color: #607470;
  color: #fff5eb;
}

.our-stories__modal-close svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Stop the page scrolling behind the dialog. */
body.our-stories-modal-open {
  overflow: hidden;
}

@media (max-width: 575px) {
  .our-stories__modal-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }

  .our-stories__modal-close svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 991px) {
  .our-stories {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .our-stories__title {
    font-size: 1.75rem;
  }

  .our-stories__body {
    padding: 24px;
  }

  .our-stories__play,
  .our-stories__play svg {
    width: 32px;
    height: 64px;
  }
}

@media (max-width: 767px) {
  .our-stories__cards:not(.slick-initialized) {
    grid-template-columns: 1fr;
  }

  .our-stories__play,
  .our-stories__play svg {
    width: 28px;
    height: 56px;
  }
}

/* Slick carousel — see our-stories.php for when it is initialised */
.our-stories__cards.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 30px spacing. */
.our-stories__cards .slick-list {
  margin: 0 -15px;
}

/* Equal-height cards inside the carousel. A flex track stretches the slides,
   but a stretched slide has no definite height for `height: 100%` to resolve
   against — so the slide and its Slick-inserted wrapper have to be flex
   containers too, or the sage panels end up ragged. */
.our-stories__cards .slick-track {
  display: flex;
  align-items: stretch;
}

.our-stories__cards .slick-slide {
  display: flex;
  height: auto;
  padding: 0 15px;
}

.our-stories__cards .slick-slide > div {
  display: flex;
  width: 100%;
}

/* Slick writes `display: inline-block` as an INLINE style straight onto each
   slide's child — this card — which no stylesheet rule can outrank. Left alone
   the card stops being a flex column, so the sage panel never grows to fill the
   equalised height and the panels come out ragged. !important is the only way
   to beat a JS-injected inline style here. */
.our-stories__cards .slick-slide > div > .our-stories__card {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

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

  .our-stories__cards .slick-slide {
    padding: 0;
  }
}

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

.our-stories__cards .slick-dots li button:before {
  color: #006d8f;
  opacity: 0.35;
  font-size: 8px;
}

.our-stories__cards .slick-dots li.slick-active button:before {
  color: #006d8f;
  opacity: 1;
}

.our-stories__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: #006d8f;
}

.our-stories__nav--prev {
  left: 10px;
}

.our-stories__nav--next {
  right: 10px;
}

.our-stories__nav:hover,
.our-stories__nav:focus {
  background-color: #006d8f;
  color: #fff5eb;
}

.our-stories__nav.slick-disabled {
  opacity: 0.4;
  pointer-events: none;
}