/* Story pages built from segments. Anything sized in vh has an aspect-ratio
   override under .story-minimap, whose iframe is very tall. */
.story {
  --story-column: min(648px, 100% - 2 * var(--space-5));
  --story-serif: "Source Serif 4", Georgia, serif;
  --story-display: "Cormorant Garamond", Georgia, serif;

  padding-bottom: var(--space-9);
  font-family: var(--font-stack);
  color: var(--color-black);

  .story-column,
  .text,
  .pull-quote,
  .image.column {
    width: var(--story-column);
    margin-inline: auto;
  }

  .story-guest-editor {
    padding-top: var(--space-8);
    color: var(--color-gray-20);
    font-size: 17px;
    line-height: 1.65;
    text-wrap: pretty;
  }

  .story-header {
    padding-block: var(--space-8) 72px;
  }

  /* The hero's caption box, or a legacy carousel's captions, already space
     the title from the image. */
  .story-hero + .story-column > :first-child,
  .legacy-media + .story-column > :first-child {
    padding-top: 0;
  }

  /* The story's tags, closing the text column. */
  .story-tags {
    padding-top: 12px;
    font-family: var(--font-stack);
    font-size: 16px;

    .tags-title {
      margin-bottom: 24px;
      font-weight: 700;
      line-height: 24px;
    }

    .tags-list {
      line-height: 1.8;
      text-wrap: pretty;

      a {
        padding-right: 8px;
        text-decoration: none;

        &:hover {
          color: var(--color-primary);
        }
      }
    }
  }

  .story-title {
    margin: 0;
    font-family: var(--story-display);
    font-size: 38px;
    font-weight: 400;
    line-height: 1.25;
    text-wrap: balance;
  }

  .story-byline {
    margin: var(--space-2) 0 0;
    font-size: 17px;
  }

  .story-segment {
    margin-block: 0 var(--space-7);
  }

  figcaption {
    max-width: 450px;
    padding-top: var(--space-4);
    color: var(--color-gray-20);
    font-size: 12px;
    line-height: 1.45;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }

  .story-text p {
    margin: 0 0 1.7em;
    font-family: var(--story-serif);
    font-size: 18px;
    line-height: 1.7;
    text-wrap: pretty;
    hyphens: auto;
  }

  .pull-quote blockquote {
    margin: 0;
    padding: 0 var(--space-6);
    border-left: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-family: var(--story-display);
    font-size: 36px;
    font-style: italic;
    line-height: 1.25;
  }

  /* Full-bleed and full-height, then pinned and shrunk to the content width
     by story_hero_controller. The caption box is that content width (the
     wireframe's 1440px max less its side padding) and is what the script
     measures. */
  .story-hero {
    margin: 0;

    .hero-frame {
      height: 100vh;
      overflow: hidden;

      img {
        height: 100%;
        object-fit: cover;
      }
    }

    .hero-caption {
      width: calc(min(1440px, 100vw) - 2 * clamp(16px, 8vw, 60px));
      min-height: 80px;
      margin-inline: auto;
      text-align: right;
      opacity: 0;
      transition: opacity 1s ease;

      figcaption {
        display: inline-block;
        max-width: 300px;
        text-align: left;
      }
    }

    &.is-static .hero-caption,
    .hero-caption.is-visible {
      opacity: 1;
    }
  }

  .image.wide,
  .video {
    width: 66%;
    margin-inline: auto;
  }

  .image-carousel {
    width: calc(100% - 2 * var(--layout-inline-padding));
    margin-inline: auto;

    > figcaption,
    .story-carousel-captions {
      margin-top: 12px;
    }
  }

  /* Stories from the old site: their video at the old 1160px width, or their
     slides in the same carousel as carousel segments, above the text column. */
  &.legacy .legacy-media {
    margin: var(--space-8) auto 0;

    &.video {
      width: min(1160px, 100% - 2 * var(--layout-inline-padding));
    }

    &.video iframe {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
    }

    &.video,
    .story-carousel:last-child {
      margin-bottom: 80px;
    }

    .story-carousel-captions {
      margin-bottom: 45px;
    }
  }

  .video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
  }

  /* In Conversation stories follow the Grcic wireframe: a centered 1256px
     column split in two with a 2rem gutter. The outer grid columns take the
     rest of the page, so an image spanning one bleeds to the page edge. */
  &.conversation {
    --spread-half: calc((min(1256px, 100% - 3rem) - 2rem) / 2);
    --spread-columns: 1fr var(--spread-half) 2rem var(--spread-half) 1fr;

    .story-column {
      display: grid;
      grid-template-columns: var(--spread-columns);
      width: auto;

      > * {
        grid-column: 2;
      }
    }

    .story-title {
      font-family: var(--font-stack);
      font-size: 1.875rem;
      font-weight: 300;
      line-height: 0.95;
    }

    .story-byline {
      margin-top: 0.75rem;
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.3;
    }

    .story-text p {
      margin-bottom: 1.125rem;
      font-family: var(--font-stack);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.625;
      hyphens: manual;
    }

    /* Text in one half of the page, on the side its display names. Images,
       if any, take the other half out to the page edge: the first fills it,
       and a second floats in the text's half with the text below it. */
    .spread {
      display: grid;
      grid-template-columns: var(--spread-columns);
      row-gap: 9rem;

      &.left {
        grid-template-areas: ". text . . .";
      }

      &.right {
        grid-template-areas: ". . . text .";
      }

      &.single,
      &.paired {
        margin-top: 9rem;
      }

      &.single.left {
        grid-template-areas: ". text . images images";
      }

      &.single.right {
        grid-template-areas: "images images . text .";
      }

      &.paired.left {
        grid-template-areas: ". float . images images" ". text . . .";
      }

      &.paired.right {
        grid-template-areas: "images images . float ." ". . . text .";
      }

      .spread-background {
        grid-area: images;
        align-self: start;

        img {
          height: 125vh;
          object-fit: cover;
        }
      }

      .spread-foreground {
        grid-area: float;
        align-self: center;

        &.square img {
          aspect-ratio: 1;
          object-fit: cover;
        }
      }

      .story-text {
        grid-area: text;
      }
    }

    @media (max-width: 768px) {
      .story-column {
        display: block;
        width: var(--story-column);
        margin-inline: auto;
      }

      .spread {
        &.left,
        &.right {
          grid-template-columns: 1fr;
          grid-template-areas: "text";
          row-gap: var(--space-6);
        }

        &.single,
        &.paired {
          margin-top: var(--space-7);
        }

        &.single.left,
        &.single.right {
          grid-template-areas: "images" "text";
        }

        &.paired.left,
        &.paired.right {
          grid-template-areas: "images" "float" "text";
        }

        .story-text,
        .spread-foreground {
          width: var(--story-column);
          justify-self: center;
        }

        .spread-background img {
          height: auto;
          aspect-ratio: 4 / 5;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .image.wide,
    .video {
      width: 100%;
    }
  }
}

/* The staff layout editor's minimap: segments are clickable and the one being
   edited is outlined. Outlines are thick because the minimap is scaled down.
   Its iframe is very tall, so the hero takes a fixed shape instead of 100vh. */
/* The stories wireframe's carousel, used on the Featured page and by carousel
   segments. story_carousel_controller sizes and places the slides. */
.story-carousel {
  position: relative;
  overflow: hidden;
  user-select: none;

  .slide {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: var(--color-gray-3);
    cursor: pointer;
    will-change: transform;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-user-drag: none;
    }
  }

  div.slide.is-active {
    cursor: auto;
  }
}

[data-controller~="story-carousel"]:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

/* The centred slide's caption; the others are stacked under it, hidden. */
.story-carousel-captions {
  display: grid;

  .caption {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;

    &.is-active {
      opacity: 1;
      visibility: visible;
    }
  }
}

.story-minimap {
  margin: 0;

  .story.conversation .spread .spread-background img {
    height: auto;
    aspect-ratio: 5 / 8;
  }

  .story .story-hero {
    .hero-frame {
      height: auto;
      aspect-ratio: 16 / 9;
    }

    .hero-caption {
      opacity: 1;
    }
  }

  [data-segment-id] {
    cursor: pointer;
  }

  .is-current {
    outline: 8px solid var(--color-primary);
    outline-offset: 8px;
  }
}