/* ============================================================
   Cards — one frame, everywhere
   ------------------------------------------------------------
   The site grew six card families in five stylesheets, each with
   its own corner radius, shadow weight, image height and price
   size. Side by side they read as six components rather than one
   site. This file settles the frame for all of them.

   IT SETTLES THE FRAME, NOT THE PALETTE. The catalogue's cards are
   white on daylight; the activity pages' cards are cream on navy,
   deliberately, and the instructor and rate cards belong to their
   own dark sections. Painting them all white would not make the
   site consistent, it would make three pages wrong. What is shared
   is geometry and rhythm: the corner, the border, the weight of
   the shadow, the proportion of the photograph, the space inside,
   and how a title, a price and a button relate to each other.

   Loaded last, after every page stylesheet, so these rules win
   without any of the five having to be rewritten. Nothing here
   changes markup, content or behaviour.
   ============================================================ */

.svc, .ls, .kc, .kws, .kl, .bkwrap, body{
  /* Near square. The single biggest thing making the old cards
     read as app tiles was an 16–19px radius. */
  --card-r:3px;

  /* A hairline and almost no shadow at rest; the lift happens on
     hover. Heavy shadow is what cheap cards use to look expensive. */
  --card-line:rgba(13,34,51,.10);
  --card-shadow:0 1px 2px rgba(11,42,51,.04);
  --card-shadow-hover:0 14px 30px rgba(11,42,51,.09);

  /* Cards on dark grounds need the opposite: the ground is doing
     the separating, so the line lightens instead. */
  --card-line-dark:rgba(255,255,255,.10);
  --card-shadow-dark:0 1px 2px rgba(4,16,22,.30);
  --card-shadow-dark-hover:0 16px 34px -10px rgba(4,16,22,.55);

  --card-pad:clamp(20px,1.7vw,26px);
  --card-lift:-3px;
  --card-ease:.3s ease;
}

/* ---- The frame ------------------------------------------------
   Applied by family rather than by one shared class, because the
   markup is not being changed and each family already has a
   selector that means "the card". */

.ls__card,
.kc__card,
.kws__card,
.kl__card,
.zcard{
  border-radius:var(--card-r);
  transition:transform var(--card-ease),box-shadow var(--card-ease),border-color var(--card-ease);
}

/* Light ground */
.ls__card{
  border:1px solid var(--card-line);
  box-shadow:var(--card-shadow);
}
.ls__card:hover{
  transform:translateY(var(--card-lift));
  box-shadow:var(--card-shadow-hover);
  border-color:rgba(14,148,136,.28);
}

/* Dark ground — the cream and the navy stay exactly as they were,
   only the corner and the weight of the shadow change. */
.kc__card,
.kws__card,
.kl__card,
.zcard{
  box-shadow:var(--card-shadow-dark);
}
.kc__card:hover,
.kws__card:hover,
.kl__card:hover,
.zcard:hover{
  transform:translateY(var(--card-lift));
  box-shadow:var(--card-shadow-dark-hover);
}

/* The featured variant kept a heavier ring than everything else.
   It stays marked, at the new weight. */
.kc__card--pop,
.kws__card--best{
  box-shadow:var(--card-shadow-dark-hover);
}

/* ---- Photographs ----------------------------------------------
   One proportion across the site. These were a fixed pixel height
   in one family, a 4/3 box in another and unconstrained in a
   third, so a row of cards had three different image depths.

   3:2 is the catalogue's, and it is what most of the photography
   actually is — a taller crop was throwing away the sides of
   pictures shot landscape. */
.ls__ph,
.kc__ph,
.zcard__ph,
.kl__card > .kc__ph{
  position:relative;
  aspect-ratio:3/2;
  height:auto;
  overflow:hidden;
}
.ls__ph img,
.kc__ph img,
.zcard__ph img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.ls__card:hover .ls__ph img,
.kc__card:hover .kc__ph img,
.zcard:hover .zcard__ph img{transform:scale(1.055)}

/* ---- Inside ---------------------------------------------------
   The same breathing room in every family. */
.ls__body,
.kws__card{padding:var(--card-pad)}

/* ---- Prices ---------------------------------------------------
   Prominent, not oversized. Several of these were set at the
   large number token, which put the money above the name of the
   thing being sold — the reverse of how a listing should read.
   One step down, and the name carries the card. */
.kc__price,
.ls__price,
.kws__card .krate__row b{
  font-size:var(--num-sm);
  font-weight:var(--num-weight);
  letter-spacing:var(--num-track);
  line-height:var(--num-lh);
  font-variant-numeric:tabular-nums;
}

/* ---- Buttons --------------------------------------------------
   The pill CTAs inside cards square off to match the frame they
   sit in. Pills elsewhere on the site — heroes, section CTAs —
   are untouched: they are not part of a card. */
.ls__card .r-pill,
.kc__card .r-pill,
.kws__card .r-pill,
.kl__card .r-pill{
  border-radius:2px;
}

@media(prefers-reduced-motion:reduce){
  .ls__card,.kc__card,.kws__card,.kl__card,.zcard,
  .ls__ph img,.kc__ph img,.zcard__ph img{transition:none}
  .ls__card:hover,.kc__card:hover,.kws__card:hover,
  .kl__card:hover,.zcard:hover{transform:none}
  .ls__card:hover .ls__ph img,
  .kc__card:hover .kc__ph img,
  .zcard:hover .zcard__ph img{transform:none}
}