/* portfolio.css */

@layer components {
  @scope (.portfolio-page) {
    :scope {
      padding-block-start: 0.25rem;
    }

    .portfolio-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap-sm);

      figure {
        margin: 0;
        /* flex-grow and width are handled dynamically via PHP inline styles */
      }

      figure img {
        /*max-height: 65vh;*/
        width: 100%;
        height: auto;
        display: block; /* Removes the tiny gap below inline-block elements */
        object-fit: cover; /* Acts as a safety net for any pixel rounding errors */
        border-radius: var(--rounded-sm);
      }

      &::after {
        content: "";
        flex-grow: 999999999;

        @media (max-width: 768px) {
          display: none;
        }
      }
    }
  }

  @scope (.portfolio-filter) {
    :scope {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem 1.5rem;
      max-width: var(--max-width);
      padding-block: 1rem 1.5rem;
      padding-inline: var(--page-padding);
    }

    a {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--color-black);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      opacity: 0.4;

      &:hover,
      &.is-active {
        opacity: 1;
      }

      &.is-active {
        text-decoration: underline;
        text-underline-offset: 3px;
      }
    }
  }
}