/**
 * @info Home template — WCF26 recap
 */

main[data-home] {

  /* Full-bleed shell; sections manage their own gutters */
  display: block;
  max-width: none;
  padding-inline: 0;
  margin-block: 0;

  .kicker {
    font-family: var(--font-display);
    font-size: var(--size-xs-s);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width: none;
  }


  /*----------  Hero  ----------*/

  .hero__text {

    padding-inline: var(--gutter);
    padding-block-start: var(--size-xl-2xl);
    padding-block-end: var(--size-xl-2xl);
    max-width: var(--content-max);
    margin-inline: auto;

    .kicker {
      margin-block-end: var(--size-s);
      color: var(--color-accent);
    }

    h1 {
      font-size: clamp(2.4rem, 1.2rem + 3vw, 4.6rem);
      font-weight: 600;
      line-height: 102%;
      max-width: 14ch;
      margin-block-end: var(--size-m-l);
    }

    .lede {
      font-family: var(--font-secondary);
      font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
      font-weight: 420;
      line-height: 140%;
      max-width: 42ch;
    }

  }

  .hero__image {

    border-block: 3px solid var(--color-text);

    img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 88vh;
      object-fit: cover;
    }

  }


  /*----------  Intro statement  ----------*/

  .intro {

    padding-inline: var(--gutter);
    padding-block: var(--size-2xl-3xl);
    max-width: var(--content-max);
    margin-inline: auto;

    p {
      font-family: var(--font-secondary);
      font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
      font-weight: 380;
      line-height: 135%;
      max-width: 32ch;
    }

  }


  /*----------  Gallery strip  ----------*/

  .gallery ul {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;

    li {
      display: block;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 3 / 4;
    }

  }

  @media (min-width: 720px) {
    .gallery ul {
      grid-template-columns: repeat(4, 1fr);
    }
  }


  /*----------  Story sections  ----------*/

  .story {

    padding-inline: var(--gutter);
    padding-block: var(--size-2xl-3xl);

    &[data-background="sand"]   { background: var(--color-beige); }
    &[data-background="sky"]    { background: var(--color-sky); }
    &[data-background="yellow"] { background: var(--color-yellow); }
    &[data-background="leaf"]   { background: var(--color-leaf); }
    &[data-background="pink"]   { background: var(--color-neon); }

    > * {
      max-width: var(--content-max);
      margin-inline: auto;
    }

    .story__text {

      .kicker {
        margin-block-end: var(--size-s);
      }

      h2 {
        font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
        line-height: 102%;
        max-width: 16ch;
        margin-block-end: var(--size-m);
      }

      p:not(.kicker) {
        font-family: var(--font-secondary);
        font-size: var(--size-s);
        font-weight: var(--body-weight);
        line-height: var(--body-line-height);
        max-width: 58ch;
      }

    }

    .story__links {

      margin-block-start: var(--size-m);

      display: flex;
      flex-wrap: wrap;
      gap: var(--size-2xs);

    }

    .story__stat {

      margin-block-start: var(--size-l);

      background: var(--color-background);
      color: var(--color-text);
      border: 3px solid var(--color-text);

      padding: var(--size-l);

      .story__stat-number {
        font-family: var(--font-display);
        font-size: clamp(2.75rem, 2rem + 2.6vw, 3.75rem);
        font-weight: 600;
        line-height: 100%;
        max-width: none;
      }

      .story__stat-label {
        margin-block-start: var(--size-2xs);
        font-family: var(--font-secondary);
        font-size: var(--size-s);
        font-weight: var(--body-weight);
        line-height: 130%;
        max-width: none;
      }

      .story__stat-note {
        margin-block-start: var(--size-s);
        font-family: var(--font-display);
        font-size: var(--size-xs);
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        max-width: none;
      }

    }

    .story__images {

      margin-block-start: var(--size-l);

      display: grid;
      gap: var(--size-s);

      figure img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    /* Side-by-side layout on wide screens */
    @media (min-width: 900px) {

      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      column-gap: var(--size-2xl);
      align-items: start;

      > .story__text,
      > .story__images,
      > .story__stat {
        max-width: none;
        margin-inline: 0;
      }

      /* Center the two-column composition within the content width */
      padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));

      .story__images {
        margin-block-start: 0;

        &[data-count="2"] {
          grid-template-columns: 1fr 1fr;

          figure[data-orientation="portrait"] img {
            aspect-ratio: 3 / 4;
          }
        }

        figure[data-orientation="landscape"] {
          grid-column: 1 / -1;
        }

      }

      .story__stat {
        margin-block-start: 0;
        align-self: center;
      }

      /* Alternate image side */
      &:nth-of-type(even) {

        .story__text {
          order: 2;
        }

        .story__images,
        .story__stat {
          order: 1;
        }

      }

    }

  }


  /*----------  Closing band  ----------*/

  .closing {

    background: var(--color-blue);
    color: var(--color-true-white);

    padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
    padding-block: var(--size-2xl-3xl);

    h2 {
      font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
      line-height: 108%;
      max-width: 18ch;
      margin-block-end: var(--size-l);
    }

    .button {
      display: block;
      width: fit-content;
      font-size: var(--size-s);
    }

    .closing__contact {

      font-style: normal;
      margin-block-start: var(--size-xl);

      .kicker {
        margin-block-end: var(--size-2xs);
        opacity: 0.75;
      }

      p {
        max-width: none;
        line-height: 160%;
      }

      a {
        color: currentColor;

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

    }

  }

}