/**
 * @file
 * The shared card treatment: what an event card and a hub card have in common.
 *
 * Mostly the hover — that is what it was written for, and the notes below are
 * about that. It also now states the two colours a card takes from its own
 * artwork, at the foot of the file, for the same reason: they are used by both
 * cards and must not be defined twice.
 *
 * WHAT THIS REPLACED, AND WHY
 * ---------------------------
 * This used to draw two L-shaped corner brackets that grew on hover, plus a
 * band of light sweeping across the artwork. Together with the lift, the
 * magenta-tinted shadow, the image zoom, the title underline and the "View
 * event" cue riding in from the right, a single hover ran SIX simultaneous
 * animations. Each was defensible on its own; the sum was noisy, and the two
 * quietest signals were the ones that cost the most:
 *
 *  - the brackets sat 10px inside a 16px radius, so they read as a second,
 *    squarer frame fighting the card's own rounded corner, and at phone width
 *    a 2px mark 14px long is close to invisible
 *  - the top-left bracket ran straight into the date medallion
 *  - the sweep animated a skewed gradient across the image on every hover,
 *    which is a repaint of the largest element on the card for an effect most
 *    people never consciously register
 *
 * So both are gone. What is left is one idea stated clearly: the whole card
 * becomes the target. It gains a magenta rim, lifts, and glows faintly from
 * beneath, while the artwork eases in and the title takes the accent.
 *
 * WHY THE RIM LIVES HERE AND NOT IN THE CARD FILES
 * ------------------------------------------------
 * `.event-card` and `.hub-card` each used to set their own `border-color` and
 * `box-shadow` on hover, with slightly different colour mixes — 60% magenta on
 * one, 55% on the other, and different shadow geometry. Nobody could see the
 * difference, but keeping two nearly-identical definitions in step is how they
 * drift apart. Both now declare only the lift; everything about the rim is
 * stated once, here.
 *
 * Adding a third card type means adding its selector to the two lists below.
 * There is no shared class in the markup to key off, and inventing one would
 * mean touching every template that renders a card.
 *
 * MARKUP
 * ------
 * Nothing. The decoration is drawn on the card's own box, so there are no
 * helper spans to place, and none to keep `aria-hidden`.
 */

/* ---------------------------------------------------------------------------
 * The rim.
 *
 * Three layers, in order: a crisp 1px ring that reads as the edge itself, a
 * magenta glow spread beneath the card, and the neutral depth shadow that lifts
 * it off the page. The ring is a shadow rather than a border so it does not
 * take part in layout — a border changing width on hover would shift every
 * child by a pixel.
 *
 * `--me-magenta` at full strength, not a colour-mix. The resting border is
 * already a faint white; going straight to the brand colour is what makes the
 * change read at a glance, which was the whole complaint about the brackets.
 * ------------------------------------------------------------------------ */
.event-card:hover,
.event-card:focus-within,
.hub-card:hover,
.hub-card:focus-within {
  border-color: var(--me-magenta);
  box-shadow:
    0 0 0 1px var(--me-magenta),
    0 22px 40px -26px var(--card-glow, color-mix(in srgb, var(--me-magenta) 85%, transparent)),
    var(--lift-hover-shadow);
}

/* ---------------------------------------------------------------------------
 * THE RING IS THE BRAND; THE LIGHT IS THE PROGRAMME.
 *
 * A card that carries `--card-c1` — the two colours read out of its own
 * artwork — keeps the magenta ring exactly, and takes the diffuse glow beneath
 * it from the picture instead. The ring is the signal that this card is the
 * target, and it must mean the same thing on every card on the site; the glow
 * is light spilling out from under an object, and light has the colour of
 * whatever made it.
 *
 * Half artwork, half magenta rather than the artwork alone: a wholly
 * independent colour under a magenta ring reads as two unrelated decisions, and
 * a picture whose leading colour happens to be green would put a green halo on
 * a pink site. Mixed, the glow shifts recognisably from card to card while
 * staying inside the theme.
 *
 * A CARD WITH NO PALETTE IS UNCHANGED, AND THAT IS LOAD-BEARING.
 *
 * The default below is the exact glow this rule had before any of this
 * existed. Only a card whose template found a palette carries `--tinted`, so an
 * event with no artwork, a file GD cannot read and a card beyond the
 * per-request palette budget all keep today's treatment rather than a
 * washed-out version of it.
 * ------------------------------------------------------------------------ */
.event-card,
.hub-card {
  --card-glow: color-mix(in srgb, var(--me-magenta) 85%, transparent);
}

.event-card--tinted,
.hub-card--tinted {
  --card-glow: color-mix(
    in srgb,
    color-mix(in oklab, var(--card-c1) 50%, var(--me-magenta)) 85%,
    transparent
  );
}

/* ---------------------------------------------------------------------------
 * THE RESTING TINT, STATED ONCE FOR BOTH CARDS.
 *
 * `--card-tint` is what each card washes up from its foot; the gradient itself
 * lives in event-card.css and hub-card.css, because the two cards stack it
 * differently. Only the colour is shared — and it is shared for the same reason
 * the rim above is: two copies of a formula like this drift.
 *
 * WHY IT IS MIXED INTO BLACK FIRST.
 *
 * Not decoration: it is what keeps the card accessible. The palette can return
 * any hue at up to 62% saturation and 34% lightness, and some of those — an
 * olive or a mustard out of a poster — are LIGHTER than --surface-1. Washing
 * one of those over the card raises the background's luminance and drags the
 * muted metadata down with it: at 16% the worst case measured 4.33:1 against
 * --text-muted, under the 4.5 this theme promises everywhere.
 *
 * Half the tint, half black, keeps the hue and takes the lightness out, so the
 * wash can only ever darken the card. Measured across the whole gamut the
 * palette can produce — every hue, every clamped saturation and lightness — the
 * worst case at --card-wash: 36% is 5.14:1 for muted text and 14.3:1 for white,
 * against 5.34 and 14.9 on an untinted card. Nothing moves more than a tenth.
 *
 * `--card-tint` defaults to transparent, and a transparent colour-mixed with
 * transparent is still transparent, so an untinted card paints no gradient at
 * all rather than a grey one.
 * ------------------------------------------------------------------------ */
.event-card,
.hub-card {
  --card-tint: transparent;
}

.event-card--tinted,
.hub-card--tinted {
  --card-tint: color-mix(in oklab, var(--card-c1) 50%, var(--me-black));
}

/* ---------------------------------------------------------------------------
 * The artwork eases in.
 *
 * The event card already scaled its image; the hub card only restored its
 * saturation. They now do both, so a visitor moving between the landing page
 * and a hub sees one behaviour rather than two.
 * ------------------------------------------------------------------------ */
.hub-card__media img {
  transition:
    filter var(--duration-base) var(--ease-out),
    scale var(--duration-slow) var(--ease-out);
}

.hub-card:hover .hub-card__media img,
.hub-card:focus-within .hub-card__media img {
  scale: 1.04;
}

/* ---------------------------------------------------------------------------
 * Legacy decoration.
 *
 * `card-frame` and `card-sweep` are removed from this theme's templates, but a
 * site may carry an overridden copy of a card template in another theme or in a
 * module, and a stray bracket appearing over the new treatment would be a
 * puzzle worth minutes. Hiding them is one line and ends the question.
 * ------------------------------------------------------------------------ */
.card-frame,
.card-sweep {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Reduced motion.
 *
 * The rim is a colour change and stays — it is the signal, not the flourish.
 * The lift and the zoom are movement, so they go.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .event-card:hover,
  .event-card:focus-within,
  .hub-card:hover,
  .hub-card:focus-within {
    transform: none;
  }

  .hub-card:hover .hub-card__media img,
  .hub-card:focus-within .hub-card__media img,
  .event-card:hover .event-card__media img,
  .event-card:focus-within .event-card__media img {
    scale: 1;
  }
}