/* Collection detail page — CSS-only decorative backgrounds (see docs/collections.md) */

.collection-detail-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 8%, rgba(100, 81, 144, 0.07), transparent 24rem),
    radial-gradient(circle at 94% 12%, rgba(195, 91, 40, 0.055), transparent 22rem),
    radial-gradient(circle at 92% 58%, rgba(48, 111, 141, 0.045), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #fbfaf8 45%, #ffffff 100%);
}

.collection-detail-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(100, 81, 144, 0.22) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(48, 111, 141, 0.18) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(195, 91, 40, 0.2) 2px, transparent 2.5px);
  background-size: 120px 120px, 160px 160px, 220px 220px;
  background-position: 5% 12%, 96% 35%, 3% 70%;
  opacity: 0.35;
}

.collection-detail-page > *:not(.collection-bg-arcs) {
  position: relative;
  z-index: 1;
}

.collection-bg-arcs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* Confine the arcs to the upper region instead of stretching the full page,
     and fade them out before the content gets dense (see docs/collections.md). */
  height: 60rem;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
}

.collection-bg-arcs path {
  fill: none;
  stroke: var(--brand-teal);
  stroke-width: 1.25;
  opacity: 0.1;
}

.collection-bg-arcs path:first-child {
  stroke: var(--brand-orange);
  opacity: 0.08;
}

.collection-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(167, 169, 172, 0.22);
}

.collection-hero .collection-detail-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.collection-hero .collection-detail-hero-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  opacity: 1;
}

@media (min-width: 1024px) {
  .collection-hero .collection-detail-hero-bg__img {
    object-position: center;
  }
}

.collection-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 42%, rgba(48, 111, 141, 0.06), transparent 18rem),
    radial-gradient(circle at 70% 22%, rgba(195, 91, 40, 0.04), transparent 16rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.18) 100%);
}

.collection-hero__inner {
  position: relative;
  z-index: 3;
}

.collection-featured-resource {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(195, 91, 40, 0.07), transparent 18rem);
  border: 1px solid rgba(167, 169, 172, 0.28);
  box-shadow: 0 18px 45px rgba(35, 31, 32, 0.06);
}

/* Uniform inter-section rhythm. Each section used to carry its own margin, so
   the gap between two sections depended on which ones were adjacent (collapsing
   margins → 3–6rem, order-dependent). A single flex gap makes every adjacent
   pair identical regardless of order; per-section margins are removed to match. */
.collection-sections {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.more-resources-section {
  padding: 2rem;
  border-radius: 28px;
  border: 1px solid rgba(167, 169, 172, 0.22);
  background:
    radial-gradient(circle at 96% 8%, rgba(48, 111, 141, 0.055), transparent 16rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 250, 248, 0.88));
  box-shadow: 0 16px 40px rgba(35, 31, 32, 0.045);
}

.resource-row {
  background: rgba(255, 255, 255, 0.92);
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.resource-row:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(35, 31, 32, 0.055);
}

.collection-detail-page.collection-vapa {
  --collection-primary: var(--brand-orange);
  --collection-secondary: var(--brand-teal);
  --collection-tertiary: var(--brand-purple);
}

@media (prefers-reduced-motion: reduce) {
  .resource-row {
    transition: none;
  }

  .resource-row:hover {
    transform: none;
  }
}