/* home.css — Portfolio navigation + about teaser section */

@layer components {
  @scope (.portfolio-nav) {
    :scope {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap-sm);
      align-items: stretch;
      block-size: 100%;
      padding-inline: var(--page-padding);

      @media (min-width: 768px) {
        gap: 1.25rem;
      }

      @media (min-width: 1024px) {
        grid-template-columns: 1fr 1fr;
      }

      @media (min-width: 1536px) {
        padding-inline: 0;
      }
    }

    .portfolio-nav__link {
      display: block;
    }

    .portfolio-nav__figure {
      position: relative;
      inline-size: 100%;
      max-block-size: 84vh;
      block-size: 100%;
    }

    .portfolio-nav__media {
      block-size: 100%;
      overflow: hidden;

      @media (min-width: 768px) {
        border-radius: var(--rounded-sm);
      }
    }

    .portfolio-nav__img {
      object-fit: cover;
      inline-size: 100%;
      block-size: 100%;
    }

    .portfolio-nav__caption {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: 10;
      padding-inline: 2.5rem;
      padding-block: 2.5rem;
      color: var(--color-white);
    }
  }

  @scope (.about-section) {
    :scope {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap-sm);
      margin-block-start: 6rem;
      padding-inline: var(--page-padding);
      place-items: center;

      @media (min-width: 768px) {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
      }

      @media (min-width: 1536px) {
        padding-inline: 0;
      }
    }

    .about-section__image {
      inline-size: 100%;

      img {
        object-fit: cover;
        inline-size: 100%;
        block-size: 100%;

        @media (min-width: 768px) {
          border-radius: var(--rounded-sm);
        }
      }
    }

    .about-section__text {
      padding-inline: 2rem;
      inline-size: 100%;

      @media (min-width: 1024px) {
        max-inline-size: 470px;
      }
    }
  }
}

@scope (.home) {
  .layout-row:has(.page-link) {
    max-height: 500px;
  }

  .block-text {
    font-size: var(--text-xl);
    padding-block: 5rem;
    padding-inline: 5rem;
  }
}