/* ==========================================================================
   Card component — two base variants

   1. a.card   — linked image card (background image, tint, hover, span button)
   2. div.card — content card (structural children determine the variant)

   Variant-specific behavior is driven by child elements and utility classes,
   not BEM modifiers. See docs/CARD-REFACTORING.md for the full spec.
   ========================================================================== */

:root {
  --card-tint-opacity: 0.4;
  --card-tint-hover-opacity: 0.68;
  --card-image-hover-scale: 1.07;
  --card-image-pan-x: 0px;
  --card-image-pan-y: 0px;
  --card-icon-size: 4.5rem;
  --card-icon-opacity: 16%;
}

/* Gap default — class-only selector so .gap-* utilities (loaded later,
   same specificity) can override by source order. Also blocks --gap
   inheritance from parent containers like .grid.gap-0. */
.card {
  --gap: var(--s-8);
  --pb: 0;
  --pi: 0;
}

/* --- Image card (a.card) ------------------------------------------------ */

a.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-inline: var(--pi, 0);
  padding-block: var(--pb, 0);
  aspect-ratio: var(--ratio, 4 / 5);
  border-radius: var(--border-radius-media);
  color: inherit;
  text-decoration: none;
}

a.card:is(:hover, :focus-visible) {
  opacity: 1;
}

a.card:not(:has(> img))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg) center / cover no-repeat;
  translate: var(--card-image-pan-x) var(--card-image-pan-y);
  scale: var(--card-image-scale, 1);
  transition: scale 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: translate, scale;
}

/* Linked-image variant — anchor wraps a real <img> instead of using --bg. */
a.card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: var(--card-image-scale, 1);
  transition: scale 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: scale;
}

a.card:has(> img):is(:hover, :focus-visible) > img {
  --card-image-scale: var(--card-image-hover-scale);
}

a.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--wp--preset--color--warm-brown);
  opacity: var(--card-tint-opacity);
  transition: opacity 0.3s ease;
}

a.card:not(:has(> img)):is(:hover, :focus-visible)::after {
  --card-image-scale: var(--card-image-hover-scale);
}

a.card:is(:hover, :focus-visible)::before {
  opacity: var(--card-tint-hover-opacity);
}

a.card:focus-visible {
  outline: 2px solid var(--wp--preset--color--off-white);
  outline-offset: 2px;
}

/* z-index: 2 required — ::before (z:1) and ::after (z:0) are positioned
   layers that sit above normal flow. Without this the span renders
   behind the tint overlay. */
a.card > span {
  position: relative;
  z-index: 2;
}

a.card.hover-label {
  align-items: stretch;
  justify-content: flex-end;
}

a.card.hover-label > span {
  width: 100%;
  padding: var(--s-12) var(--s-16);
  background-color: var(--wp--preset--color--warm-brown);
  color: var(--wp--preset--color--off-white);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--body-font-weight);
  font-style: var(--body-font-style);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  text-transform: none;
  overflow-wrap: anywhere;
}

/* Hover-capable devices (mouse/trackpad): hide the label and slide it up
   on hover/focus. Touch devices (hover: none) keep the base state above —
   label always visible, no animation — since there's no hover to trigger
   the reveal. */
@media (hover: hover) {
  a.card.hover-label > span {
    translate: 0 100%;
    opacity: 0;
    transition:
      translate 0.28s ease,
      opacity 0.2s ease;
  }

  a.card.hover-label:is(:hover, :focus-visible) > span {
    translate: 0;
    opacity: 1;
  }
}

/* Position utilities — control where the span sits inside the card */
a.card.top {
  justify-content: flex-start;
}
a.card.bottom {
  justify-content: flex-end;
}
a.card.stretch {
  align-items: stretch;
}

@media (prefers-reduced-motion: reduce) {
  a.card::after,
  a.card > img,
  a.card.hover-label > span {
    translate: none;
    scale: 1;
    transition: none;
  }
}

/* --- Content card (div.card) -------------------------------------------- */

div.card {
  display: flex;
  flex-direction: column;
  align-items: var(--card-align, flex-start);
  justify-content: flex-start;
  text-align: var(--card-text-align, left);
  gap: var(--gap);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-inline: var(--pi, 0);
  padding-block: var(--pb, 0);
  border-radius: var(--border-radius-media);
  color: inherit;
}

div.card.border {
  border: 1px solid var(--card-border-color, color-mix(in srgb, currentColor 18%, transparent));
}

div.card:is(.mw-text-xs, .mw-text-sm, .mw-text-md, .mw-text-lg) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl) {
  max-width: var(--mw);
}

div.card > * {
  margin: 0;
}

/* Block elements need explicit width in a flex column with align-items: flex-start,
   otherwise they shrink to content width. Excludes <a> so links and buttons
   stay content-width instead of stretching full width. */
div.card > :is(h1, h2, h3, h4, h5, h6, p, img, svg) {
  width: 100%;
}

/* Structural spacing — extra space after visual elements and before actions.
   Skipped when the visual is the only child so the card hugs the image edge
   (lets the rounded bottom corners actually clip the image). */
div.card > :is(a, img, svg):first-child:not(:last-child) {
  margin-bottom: var(--gap);
}

div.card > :not(a) + a {
  margin-top: var(--gap);
}

/* Image as first child (media card pattern) */
div.card > img:first-child {
  aspect-ratio: var(--ratio, auto);
  object-fit: cover;
}

/* Iframe as first child — embedded media (Google Maps etc.) sized
   to the card's --ratio just like an image. */
div.card > iframe:first-child {
  width: 100%;
  aspect-ratio: var(--ratio, auto);
  border: 0;
}

/* Temporary stand-in for media that has not been selected yet. */
div.card > .media-placeholder:first-child {
  width: 100%;
  aspect-ratio: var(--ratio, auto);
  background-color: var(--surface-placeholder);
}

/* SVG as first child (icon card pattern) */
div.card > svg:first-child {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  flex-shrink: 0;
  /*color: color-mix(in srgb, currentColor var(--card-icon-opacity), transparent);*/
}

/* --- Alignment modifiers ------------------------------------------------ */

div.card.center {
  --card-align: center;
  --card-text-align: center;
}

div.card.center-sm {
  --card-align: center;
  --card-text-align: center;
}

@media (min-width: 40rem) {
  div.card.center-sm {
    --card-align: flex-start;
    --card-text-align: left;
  }
}

/* --- Document Card (.document-card) ------------------------------------- */

.document-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}

.document-card a {
  display: block;
}

/* Badge variant (SVG thumbnail) */
.document-card > a > svg:first-child {
  height: 6rem;
  width: auto;
  max-width: 100%;
}

/* Image variant (Image thumbnail) */
.document-card > a > img:first-child {
  display: block;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--warm-brown) 32%, transparent);
  border-radius: var(--border-radius);
  max-height: 18rem;
  max-width: 100%;
  width: auto;
}

.document-card small {
  font-size: var(--text-2xs, 0.75rem);
  opacity: 0.6;
}