/* =========================
   INTERNAL CATALOG PAGES
   Shared tokens and components live in site.css.
   ========================= */

.page-category{
  background:
    radial-gradient(780px 520px at 4% 3%, var(--page-accent-soft), transparent 68%),
    var(--surface-page);
}
.page-category main{ min-height:calc(100svh - 78px); }
.page-category .nav-links a:first-child{
  color:var(--color-plum);
  background:rgba(255,254,251,.62);
}
.page-category .nav-links a:first-child::after{ transform:scaleX(1); }

/* =========================
   COMPACT EDITORIAL HERO
   ========================= */
.category-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(42px, 6vw, 78px) 0 clamp(38px, 5vw, 64px);
  border-bottom:1px solid var(--color-border);
}
.category-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg, rgba(255,254,251,.74), transparent 64%);
}
.category-hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 230px;
  align-items:center;
  gap:clamp(32px, 7vw, 90px);
}
.category-hero-copy{ max-width:760px; }
.category-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  color:var(--color-plum);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  line-height:1.2;
  text-transform:uppercase;
}
.category-eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--page-accent);
}
.category-hero h1{
  max-width:18ch;
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(2.65rem, 2.05rem + 2.4vw, 4.35rem);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-tight);
  line-height:var(--line-height-heading);
  text-wrap:balance;
}
.category-hero .muted{
  max-width:62ch;
  margin:0;
  font-size:var(--font-size-lead);
}
.category-ornament{
  position:relative;
  width:190px;
  aspect-ratio:1;
  justify-self:end;
  border:1px solid color-mix(in srgb, var(--page-accent) 52%, transparent);
  border-radius:50% 50% 8px 8px;
  opacity:.8;
}
.category-ornament::before,
.category-ornament::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.category-ornament::before{
  inset:18px;
  border:1px solid color-mix(in srgb, var(--page-accent) 35%, transparent);
  border-radius:50% 50% 6px 6px;
}
.category-ornament::after{
  right:38px;
  bottom:-12px;
  left:38px;
  height:1px;
  background:var(--page-accent);
}

/* =========================
   COLLECTIONS AND TEMPLATE GRID
   ========================= */
.catalog{
  padding:clamp(44px, 6vw, 76px) 0 clamp(72px, 9vw, 112px);
}
#collections:empty{ min-height:clamp(80px, 10vw, 128px); }
.collection-section + .collection-section{ margin-top:clamp(54px, 7vw, 82px); }
.collection-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--color-border);
}
.collection-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 1.55rem + .8vw, 2.25rem);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-tight);
  line-height:var(--line-height-heading);
}
.collection-count{
  margin:0;
  white-space:nowrap;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2.2vw, 26px);
}

/* =========================
   DYNAMIC TEMPLATE CARDS
   ========================= */
.card{
  position:relative;
  display:flex;
  min-width:0;
  overflow:hidden;
  flex-direction:column;
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  background:rgba(255,254,251,.94);
  box-shadow:var(--shadow-sm);
  transition:
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.card:focus-within{
  border-color:var(--page-accent);
  box-shadow:var(--focus-ring), var(--shadow-md);
}
.cover{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  border-bottom:1px solid var(--color-border);
  background:
    linear-gradient(135deg, var(--page-accent-soft), rgba(255,254,251,.72)),
    var(--color-paper);
}
.cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 260ms var(--ease-standard);
}
.card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:clamp(20px, 2.3vw, 26px);
}
.card-name{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:clamp(1.55rem, 1.4rem + .6vw, 1.9rem);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-tight);
  line-height:var(--line-height-heading);
}
.card-desc{
  margin:0;
  color:var(--color-text-muted);
  line-height:1.62;
}
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}
.badge,
.card-badge{
  border:1px solid color-mix(in srgb, var(--page-accent) 46%, var(--color-border));
  border-radius:999px;
  color:var(--color-ink);
  background:color-mix(in srgb, var(--page-accent-soft) 56%, var(--color-surface));
  font-size:.78rem;
  font-weight:var(--weight-semibold);
  letter-spacing:.02em;
}
.badge{ padding:6px 10px; }
.card-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  padding:7px 11px;
  background:rgba(255,254,251,.94);
  box-shadow:var(--shadow-sm);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:auto;
  padding-top:22px;
}
.actions .btn{
  width:100%;
  padding-inline:13px;
}

@media (hover:hover) and (pointer:fine){
  .card:hover{
    border-color:var(--page-accent);
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
  }
  .card:hover .cover img{ transform:scale(1.03); }
}

/* Category details remain subtle outside the hero. */
.page-category .footer::before{
  background:var(--page-accent);
  opacity:.62;
}
.page-category .footer-name:hover{ color:var(--page-accent); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:980px){
  .category-hero-inner{ grid-template-columns:minmax(0, 1fr) 160px; }
  .category-ornament{ width:150px; }
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .category-hero{ padding-block:38px 42px; }
  .category-hero-inner{
    grid-template-columns:1fr;
    gap:0;
  }
  .category-ornament{
    position:absolute;
    right:-58px;
    bottom:-76px;
    width:176px;
    opacity:.34;
  }
  .category-hero-copy{
    position:relative;
    z-index:1;
    padding-right:6px;
  }
  .catalog{ padding-block:38px 72px; }
  .grid{ grid-template-columns:1fr; }
  .collection-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .cover{ aspect-ratio:16 / 9; }
}

@media (max-width:430px){
  .card-body{ padding:22px; }
  .actions{ grid-template-columns:1fr; }
  .actions .btn{ min-height:48px; }
}

@media (prefers-reduced-motion:reduce){
  .card,
  .cover img{ transform:none !important; }
}