/* CIZELE, Ring Designs archive (/rings/). Uses the shared home-a hero (.cza-hero) for a consistent
   opener, but its own gallery-style card treatment (.cra-card), distinct from the homepage's
   horizontal teaser rail, since this page's whole job is browsing the full collection at rest.
   Hero photo is a normal moody lifestyle shot (same tonal depth as the other .cza-hero pages), so
   it uses the shared, already-tuned .cza-hero__scrim as-is, no override needed here. */

.cra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2.6rem 1.8rem;
  padding:2.4rem max(var(--gut),calc((100% - var(--wrap))/2)) 6rem}

/* Deep-link filter context bar: only shown when a real ?style=/?shape= filter is applied, so a
   visitor who clicked "Solitaire" on Engagement can see and clear what's filtering the grid, rather
   than silently landing on the same full list every card links to. */
.cra-filterbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:2.6rem max(var(--gut),calc((100% - var(--wrap))/2)) 0}
.cra-filterbar__say{margin:0;font-size:.95rem;color:var(--mut)}
.cra-filterbar__clear{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--champ);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(231,214,182,.35)}
.cra-filterbar__clear:hover,.cra-filterbar__clear:focus-visible{text-decoration-color:var(--champ)}
.cra-filterbar__clear i{font-size:.65rem}

/* Empty state: a filtered style/shape combination with zero matching designs (real, since the
   catalogue only has 5 designs against 6 named styles) gets a considered message and a next step,
   not a bare, silent blank grid. */
.cra-empty{padding:4rem max(var(--gut),calc((100% - var(--wrap))/2)) 1rem;text-align:center;max-width:720px;margin:0 auto}
.cra-empty .cz-eyebrow{justify-content:center}
.cra-empty .cza-h{margin-top:.8rem}
.cra-empty .cza-sub{max-width:56ch;margin:0 auto 1.8rem}
.cra-empty .cza-cta__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.cra-card{display:flex;flex-direction:column;color:inherit}
.cra-card__media{position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:#efe7db;
  box-shadow:0 30px 60px -36px rgba(0,0,0,.7)}
.cra-card__media img{width:100%;height:100%;object-fit:cover;padding:0;transition:transform 1s var(--e)}
.cra-card:hover .cra-card__media img{transform:scale(1.055)}
.cra-card__ph{display:block;width:100%;height:100%;background:linear-gradient(150deg,#241a2b,#160e19)}
.cra-card__num{position:absolute;top:1.1rem;left:1.2rem;z-index:2;font-family:var(--serif);font-style:italic;
  font-size:.95rem;color:rgba(28,22,20,.38)}
.cra-card__veil{position:absolute;inset:auto 0 0 0;z-index:2;padding:2.4rem 1.3rem 1.2rem;
  background:linear-gradient(0deg,rgba(20,14,12,.86) 0%,rgba(20,14,12,.5) 55%,transparent 100%);
  color:#fff;opacity:0;transform:translateY(10px);transition:opacity .45s var(--e),transform .45s var(--e)}
.cra-card:hover .cra-card__veil,.cra-card:focus-visible .cra-card__veil{opacity:1;transform:translateY(0)}
.cra-card__desc{display:block;font-size:.86rem;line-height:1.55;margin:0 0 .5rem}
.cra-card__meta{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cra-card__row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1rem}
.cra-card__t{font-family:var(--serif);font-size:1.3rem}
.cra-card__go{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line);color:inherit;transition:transform .4s var(--e),background-color .4s var(--e),border-color .4s var(--e),color .4s var(--e)}
.cra-card:hover .cra-card__go{background:var(--champ);border-color:var(--champ);color:#1a1216;transform:translateX(4px)}
.cra-card:focus-visible{outline:none}
.cra-card:focus-visible .cra-card__media{outline:2px solid var(--champ);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .cra-card__media img,.cra-card__veil,.cra-card__go{transition:none}
  .cra-card:hover .cra-card__media img{transform:none}
  .cra-card:hover .cra-card__go{transform:none}
}

/* ── Creation path: the direct "how you make a ring" sequence (leads the page) ─────────────── */
.cra-path{padding:5.5rem max(var(--gut),calc((100% - var(--wrap))/2)) 1rem}
.cra-path__head{max-width:60ch}
.cra-path__head .cza-h{margin-top:.7rem}
.cra-path__head .cza-sub{margin-top:.9rem;max-width:56ch}
/* THREE STEPS — rebuilt.
   This was three identical rounded cards with a white-to-transparent gradient, a 2.6rem champagne
   numeral and a lift-on-hover. Two things were wrong with it:

   1. A REAL CONTRAST FAILURE, not a style opinion. `.cra-step__t` was `--plum-deep` (near-black
      plum) while this section sits on the dark archive ground: measured 1.17:1 where WCAG requires
      3.0 at that size. The headings were effectively invisible. `.cra-step__go` had the same bug.
   2. Identical card grid + 01/02/03 markers + gradient fills is the most recognisable generated-
      landing-page pattern there is, and none of it was carrying meaning — the cards held no image,
      so the box was pure decoration around text.

   Now: no box, no gradient, no radius, no lift. Three columns divided by a hairline, the numeral
   demoted to a quiet marker, and the type doing the hierarchy. Same information, and legible. */
.cra-path__steps{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;
	display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem)}
.cra-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;
	padding-top:1.5rem;border-top:1px solid var(--line)}
.cra-step__n{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.16em;
	color:var(--champ);opacity:.85;font-variant-numeric:tabular-nums}
/* Element+class so it beats base.css `.cz h3` (0,1,1) without !important. */
h3.cra-step__t{margin:1rem 0 .6rem;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2;
	letter-spacing:-.01em;color:#F2ECEF}
.cra-step__d{margin:0 0 1.5rem;font-size:.95rem;line-height:1.7;color:#B9AEB8;max-width:34ch}
.cra-step__go{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;
	font-weight:500;letter-spacing:.02em;color:var(--champ);text-decoration:none;
	border-bottom:1px solid rgba(231,214,182,.35);align-self:flex-start;padding-bottom:3px;
	transition:border-color .25s ease,color .25s ease}
.cra-step__go:hover{color:#fff;border-bottom-color:#fff}
.cra-step__go:focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:2px}
.cra-step__go .czi{transition:transform .25s ease}
.cra-step__go:hover .czi{transform:translateX(3px)}

/* Collection intro header, so the grid reads as a deliberate chapter not a dump */
.cra-collection-head{padding:4.5rem max(var(--gut),calc((100% - var(--wrap))/2)) 0;max-width:calc(var(--wrap) + 2*var(--gut))}
.cra-collection-head .cza-h{margin-top:.7rem}
.cra-collection-head .cza-sub{margin-top:.8rem;max-width:52ch}

/* Bespoke band: the "we make anything" promise, made loud */
.cra-bespoke{margin:4.5rem 0 0;padding:5.5rem var(--gut);background:var(--plum-deep);color:var(--ivory);text-align:center}
.cra-bespoke__inner{max-width:64ch;margin:0 auto}
.cra-bespoke .cz-eyebrow{justify-content:center;color:var(--champ)}
.cra-bespoke .cza-h{margin-top:.9rem;color:var(--ivory)}
.cra-bespoke .cza-h em{color:var(--champ);font-style:italic}
.cra-bespoke__say{margin:1.2rem auto 2rem;font-size:1.05rem;line-height:1.7;color:color-mix(in srgb,var(--ivory) 82%,transparent);max-width:56ch}

@media(max-width:860px){
	.cra-path{padding-top:4rem}
	/* Stacked, the three steps read as one continuous list, so the gap closes and each keeps its own
	   hairline. The old side padding belonged to the card treatment and would now indent text against
	   nothing. */
	.cra-path__steps{grid-template-columns:1fr;gap:0}
	.cra-step{padding:1.5rem 0 1.75rem}
	.cra-step__d{max-width:none;margin-bottom:1rem}
	.cra-bespoke{padding:4rem var(--gut)}
}
@media(prefers-reduced-motion:reduce){
	.cra-step__go,.cra-step__go .czi{transition:none}
	.cra-step__go:hover .czi{transform:none}
}

/* Lucide icons (inc/icons.php) used in this archive's step links. */
.cra .czi{display:inline-block;flex:0 0 auto;vertical-align:middle}