/* ---------------------------------------------------------------------------
   Index page (home) — design tokens
   --------------------------------------------------------------------------- */
:root {
  /* Hero image */
  --hero-image-background: url("wool.webp");
  --hero-image-background-opacity: 0.85;
  /* Logical tile size for the background image. The source asset is stored
     at a smaller pixel size to keep the file small; the browser upscales it
     to this on-screen size when rendering the tile. */
  --hero-image-background-size: 1536px 1024px;
  --hero-image-min-height: 18rem;
  --hero-image-padding-block: 2.5rem;
  --hero-image-padding-inline: 1.25rem;
  --hero-image-gap: 0.5rem;
  --hero-image-title-font-size: 2.5rem;
  --hero-image-title-font-weight: 600;
  --hero-image-subtitle-font-size: 1rem;
  --hero-image-z-base: 0;
  --hero-image-z-background: -1;

  /* Category cards */
  --category-cards-gap: 1.5rem;
  --category-cards-margin-block-start: 2rem;
  --category-card-min-width: 16rem;
  --category-card-max-width: 20rem;
  --category-card-image-border-radius: 0.5rem;
  --category-card-title-font-size: 1.125rem;
  --category-card-title-font-weight: 600;
  --category-card-title-margin-block-start: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Hero image — full-bleed container with a background image whose opacity is
   controlled independently from the container's own contents.
   --------------------------------------------------------------------------- */
.hero-image {
  position: relative;
  isolation: isolate;
  width: 100vw;
  /* Full-bleed: escape .page-main's max-width and inline padding. */
  margin-inline: calc(var(--fraction-half) - 50vw);
  min-height: var(--hero-image-min-height);
  padding: var(--hero-image-padding-block) var(--hero-image-padding-inline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hero-image-gap);
  text-align: center;
  overflow: hidden;
  z-index: var(--hero-image-z-base);
}

/* Background lives on a pseudo-element so its opacity is independent of the
   container's children. */
.hero-image::before {
  content: "";
  position: absolute;
  inset: var(--space-zero);
  background-image: var(--hero-image-background);
  background-repeat: repeat;
  background-position: center;
  background-size: var(--hero-image-background-size);
  opacity: var(--hero-image-background-opacity);
  z-index: var(--hero-image-z-background);
  pointer-events: none;
}

.hero-image-title,
.hero-image-subtitle {
  color: var(--color-site-header);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-image-title {
  font-size: var(--hero-image-title-font-size);
  font-weight: var(--hero-image-title-font-weight);
  line-height: var(--line-height-body);
}

.hero-image-subtitle {
  font-size: var(--hero-image-subtitle-font-size);
}

.sub-hero-tagline {
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Category cards — fetched from /api/v1/categories
   --------------------------------------------------------------------------- */
#category-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: var(--category-cards-gap);
  margin-block-start: var(--category-cards-margin-block-start);
}

.category-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.category-card {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: var(--category-card-min-width);
  min-width: var(--category-card-min-width);
  max-width: var(--category-card-max-width);
  padding: 1rem;
  text-align: center;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
  background-color: var(--color-bg);
}



.category-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--category-card-image-border-radius);
}

.category-card-title {
  margin: var(--category-card-title-margin-block-start) var(--space-zero) var(--space-zero);
  font-size: var(--category-card-title-font-size);
  font-weight: var(--category-card-title-font-weight);
  line-height: var(--line-height-body);
}