/*
 * Loaded only on pages that actually contain a story block set to
 * `mediaLayout: background` (see inc/enqueue.php).
 *
 * It used to live in blocks/story/style.css, which WordPress inlines into
 * every page holding a story block — so the home page carried 2KB for a
 * treatment used once, in the gallery, and the home HTML reached its
 * 130KB ceiling. A page should not pay for a feature it does not use.
 */

/* ==========================================================================
   Story — photograph across the whole section, copy on top

   The inline layout gives the picture a column, and at this size that reads
   as a product shot pinned to an empty page. Filling the section makes the
   photograph the section, and the words sit in it.
   ========================================================================== */

.fl-story--bg {
  position: relative;
  isolation: isolate;         /* keeps the scrim under the copy, nothing else */
  display: flex;
  align-items: stretch;

  /*
   * The section's own padding is off here on purpose.
   *
   * .fl-story carries up to 176px top and bottom, and the container inside
   * added its own again. Together that was 544px of nothing but air — more
   * than the min-height was ever going to cap — so the band came out around
   * 844px and would not fit a browser at 100%. Padding belongs to one box.
   */
  padding-block: 0;

  /* 32rem, not 46: a band you have to scroll to finish is not a band. */
  min-height: min(62vh, 32rem);
  overflow: hidden;
}

.fl-story__bg,
.fl-story__bg > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

/*
 * Absolutely positioned, exactly like the hero frames.
 *
 * .fl-story__img — written for a picture that sits in a column — carries
 * `height: auto` and `aspect-ratio: 4 / 5`. Inherited by a backdrop, those
 * made the height come from the ratio instead of from the section, so the
 * image grew past 2000px tall and what showed was a piece of a stretched
 * bottle. Pinning all four sides means the parent decides the size and no
 * inherited declaration can get a word in.
 */
.fl-story--bg .fl-story__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: var(--fl-img-x, 50%) var(--fl-img-y, 50%);
  transform: none;
  transition: none;
}

/*
 * Darkened on the side the words are on, left clear on the other. A scrim
 * across the whole frame would undo the reason for filling it in the first
 * place — you would be looking at a dimmed photograph instead of a photograph.
 */
.fl-story__scrim {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6, 6, 8, 0.72) 0%, rgba(6, 6, 8, 0.5) 34%, rgba(6, 6, 8, 0.12) 62%, rgba(6, 6, 8, 0) 82%),
    linear-gradient(180deg, rgba(6, 6, 8, 0.55) 0%, rgba(6, 6, 8, 0) 42%);
}

.fl-story--bg > .l-container {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  padding-block: clamp(2.5rem, 5vh, 3.5rem);
}

/* The copy runs from the container's left edge. Nothing else is in the row. */
.fl-story__inner {
  width: 100%;
}

.fl-story--bg .fl-story__copy {
  max-width: min(34rem, 58%);
}

/* The band is shorter now, so the title cannot keep the full-page scale or it
   fills the whole thing on its own. */
.fl-story--bg .fl-story__title {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 1.1;
}

.fl-story--bg .fl-story__description {
  margin-block-start: 1rem;
}

/* A rule under the copy, then the button — the reference's own order, and it
   gives the eye somewhere to stop before the call to action. */
.fl-story--bg .fl-story__actions {
  position: relative;
  margin-block-start: clamp(1.5rem, 3.5vh, 2.5rem);
  padding-block-start: clamp(1.25rem, 3vh, 2rem);
}

.fl-story--bg .fl-story__actions::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 3.5rem;
  height: 1px;
  background: var(--fl-line, rgba(201, 161, 74, 0.55));
}

.fl-story--bg .fl-story__actions .fl-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 13rem;
  justify-content: space-between;
}

.fl-story--bg .fl-story__actions .fl-btn::after {
  content: "\2192";                 /* → : the reference puts one here */
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.35s var(--fl-ease);
}

.fl-story--bg .fl-story__actions .fl-btn:hover::after,
.fl-story--bg .fl-story__actions .fl-btn:focus-visible::after {
  transform: translateX(0.3rem);
}

@media (prefers-reduced-motion: reduce) {

  .fl-story--bg .fl-story__actions .fl-btn::after {
    transition: none;
  }
}

/* Upper left. align-items on the container decides the vertical end. */
.fl-story--copy-start > .l-container { align-items: flex-start; }
.fl-story--copy-center > .l-container { align-items: center; }
.fl-story--copy-end > .l-container { align-items: flex-end; }

/* The open hairline that the inline layout draws beside the media has no
   media to sit beside here. */
.fl-story--bg .fl-story__media::after {
  content: none;
}

@media (max-width: 767px) {

  .fl-story--bg {
    min-height: min(56vh, 24rem);
  }

  .fl-story--bg .fl-story__copy {
    max-width: 100%;
  }

  /* Sideways is the wrong axis on a phone — the copy runs the full width, so
     the darkening has to come from the top instead. */
  .fl-story__scrim {
    background: linear-gradient(180deg, rgba(6, 6, 8, 0.84) 0%, rgba(6, 6, 8, 0.55) 45%, rgba(6, 6, 8, 0.2) 100%);
  }
}