/* Load Pico.css (CDN) into its own cascade layer */
@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css") layer(pico);
/* Font Awesome Brands — GitHub icon via ::before (no inline SVG) */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/brands.min.css") layer(pico);

/* Custom layers — declared after "pico" so later layers win */
@layer base, components;

@layer base {
  :root {
    /* default text color (captured at :root, not link-colored) */
    --project-text: var(--pico-color);
  }

  /* Sticky header */
  header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--pico-background-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
  }

  /* GitHub brand icon — rendered via Font Awesome ::before (no inline SVG) */
  nav a[aria-label="GitHub profile"] {
    display: inline-flex;
    align-items: center;
    font-family: "Font Awesome 6 Brands";
    font-size: 1.5rem;
    text-decoration: none;

    &::before {
      content: "\f09b"; /* fa-github */
    }
  }
}

@layer components {
  /* Fluid project grid — override Pico .grid with auto-fit + min-width */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  /* Equal-height, full-bleed cards */
  article {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding-top: 0;
    overflow: hidden;

    & p {
      flex: 1;
    }
  }

  /* Full-width image with overlaid title */
  .thumb {
    position: relative;
    margin: 0 calc(-1 * var(--pico-block-spacing-horizontal));
    height: 10em;
    overflow: hidden;
    border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;

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

    & h3 {
      position: absolute;
      inset: auto 0 0 0;
      margin: 0;
      padding: 1.5rem 1rem 0.5rem;
      color: #fff;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    }
  }

  /* Whole-card link. Keep content as plain text, not link-colored —
     the <a> carries --pico-color: primary in this scope, so reset it
     to the scheme's default text color captured at :root. */
  .project-link {
    text-decoration: none;

    & article {
      --pico-color: var(--project-text);
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    &:hover article {
      transform: scale(1.03);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  }
}