/* ==========================================================================
   THEATRUM ANIMI — cards and list rows
   Ported verbatim from mockup/assets/css/components.css (cards, partner
   marks, event rows, search results, partner strip) and the card part of
   the base.css motion section; loaded with core/post-template.
   ========================================================================== */

/* --- cards ---------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
}
.card__media { aspect-ratio: 5 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); flex: 1; }
.card__body .cta { margin-top: auto; padding-top: var(--space-sm); }
.card p { color: var(--color-ink-secondary); font-size: var(--type-body-sm); }

/* article card is borderless — the image is the frame */
.card--article { background: none; border: 0; }
.card--article .card__media { position: relative; aspect-ratio: 3 / 2; }
.card--article .card__body { padding: var(--space-md) 0 0; }
.card--article .tag { position: absolute; left: var(--space-sm); bottom: var(--space-sm); }

.card--partner .card__logo {
  display: grid;
  place-items: center;
  min-height: 5.75rem;
  padding: var(--space-sm);
  background: var(--color-surface-sunken);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.card__body.panel { padding: var(--space-md); }

/* --- partner marks ---------------------------------------------------------
   The organisations are the project, not social proof, so each cell links to
   that partner and carries country and descriptor as text. The mark identifies;
   the text does the work a mark cannot. */
.partner-strip a { gap: var(--space-2xs); padding: var(--space-md) var(--space-sm); }
.partner-strip img { max-height: 3.25rem; width: auto; margin-inline: auto; object-fit: contain; }
.partner-strip__name { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.partner-strip__meta { font-family: var(--font-display); font-size: var(--type-caption); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-ink-secondary); }
.card--partner .card__logo { padding: var(--space-lg) var(--space-md); background: var(--color-surface-sunken); }
.card--partner .card__logo img { max-height: 4.5rem; width: auto; object-fit: contain; }

/* --- event rows ----------------------------------------------------------- */

.event {
  display: grid;
  grid-template-columns: 9rem 9rem 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-default);
}
.event + .event { margin-top: var(--space-sm); }
.event__when { border-bottom: var(--border-default) solid var(--color-rasa); padding-bottom: var(--space-3xs); }
.event__when { font-family: var(--font-display); font-weight: 900; font-size: 0.9375rem; letter-spacing: 0.03em; }
.event__where { display: flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-display); font-size: var(--type-caption); color: var(--color-ink-secondary); }
.event__where svg { width: 1em; height: 1em; }
@media (max-width: 63.99em) { .event { grid-template-columns: 1fr; } }

/* --- search results ------------------------------------------------------- */

.result { padding-block: var(--space-lg); border-bottom: var(--border-hairline) solid var(--color-border-subtle); }
.result h2 { font-family: var(--font-display); font-size: var(--type-h4); font-weight: 700; letter-spacing: 0; text-transform: none; margin-block: var(--space-2xs); }
.result__url { font-family: var(--font-display); font-size: var(--type-caption); color: var(--color-ink-secondary); margin-top: var(--space-2xs); word-break: break-word; }

/* --- partner strip -------------------------------------------------------- */

.partner-strip { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.partner-strip a {
  display: grid;
  place-content: center;
  gap: var(--space-3xs);
  min-height: 5.25rem;
  padding: var(--space-sm);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
.partner-strip span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-ink-secondary); }

/* --- motion (from base.css) ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color var(--motion-fast) var(--ease); }
  .card:hover { border-color: var(--color-border-strong); }
  .card__media img,
  .card--article .card__media img {
    transition: transform var(--motion-base) var(--ease);
  }
  .card:hover .card__media img,
  .card--article:hover .card__media img { transform: scale(1.02); }
}

/* --- WordPress ---------------------------------------------------------------
   core/post-template renders ul > li.wp-block-post; the grid and list classes
   sit on the ul, the card or row pattern inside each li. */

.wp-block-post-template.cards > .wp-block-post { display: flex; flex-direction: column; }
.wp-block-post-template.cards > .wp-block-post > * { flex: 1 1 auto; }

/* Photos: post-featured-image is a figure; it fills the card's media box. */
.card .wp-block-post-featured-image { margin: 0; }
.card__media > .wp-block-post-featured-image { height: 100%; }
/* In the mockup a <picture> wraps each card image, so the photo keeps its
   natural height and the box crops its bottom: cards show the top of the
   photo, which the cover crop here reproduces. */
.card .card__media img,
.card .wp-block-post-featured-image.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.card--partner .wp-block-post-featured-image.card__logo img { width: auto; height: auto; max-height: 4.5rem; object-fit: contain; }

/* The card meta, title and tag are core blocks rather than the mockup's
   p and a elements. */
.card .card__body .wp-block-post-title { font-size: var(--type-h3); }
.card .card__title a { color: var(--color-ink-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.card .card__title a:hover { text-decoration-thickness: 3px; }
.card .card__body .wp-block-post-title.title-md { font-size: var(--type-h4); }
.card p.tag { font-size: var(--type-caption); color: var(--color-ink-primary); }
.card__body .wp-block-post-excerpt__excerpt,
.card__body .wp-block-post-excerpt { margin: 0; }

/* News list rows and the featured article: photos at the mockup's crop. */
.wp-block-post-featured-image.col-4 { margin: 0; }
.wp-block-post-featured-image.col-4 img { width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
.wp-block-post-featured-image.split__media { margin: 0; }
.wp-block-post-featured-image.split__media img { width: 100%; height: auto; }
/* Titles link like the mockup's a.plain, except where it used a.link. */
.wp-block-post-title a:where(:not(.card__title a, .result a)) { text-decoration: none; }

/* Event rows: the li wraps the mockup's .event, so the spacing between rows
   moves to the li. */
.wp-block-post-template.bare-list > .wp-block-post + .wp-block-post { margin-top: var(--space-sm); }
.event .event__where[class*="has-icon-"]::before { width: 1em; height: 1em; }
/* The mockup's tag and button were grid items themselves, so they stretched
   to their cell; core wraps the button in a buttons row. */
.event > .wp-block-buttons > .wp-block-button { flex: 1 1 auto; }
.event > .wp-block-buttons .wp-block-button__link { width: 100%; }

/* Search results. */
.result .wp-block-post-title { font-family: var(--font-display); font-size: var(--type-h4); font-weight: 700; letter-spacing: 0; text-transform: none; margin-block: var(--space-2xs); }
.result .wp-block-post-title a { text-decoration-line: underline; }
.result p.tag { display: inline-flex; }

/* Partner strip: each li holds a cell; the partner name is the link and its
   hit area covers the cell, as the mockup's whole-cell link did. */
.partner-strip > .wp-block-post { display: grid; }
.partner-strip__item {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  min-height: 5.25rem;
  padding: var(--space-md) var(--space-sm);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-subtle);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.partner-strip__item .wp-block-post-featured-image { margin: 0; }
/* The mockup's marks are boxes 3.25rem high (their height attribute capped
   by max-height) that contain the mark, so wide marks keep the names under
   them in line. Core prints each mark at its own ratio, so the figure holds
   that box and centres the mark in it. */
.partner-strip__item .wp-block-post-featured-image { display: grid; place-items: center; height: 3.25rem; }
.partner-strip__item img { max-height: 3.25rem; width: auto; margin-inline: auto; object-fit: contain; }
.partner-strip__item .partner-strip__name { font-size: 0.8125rem; font-weight: 400; color: var(--color-ink-secondary); }
.partner-strip__item .partner-strip__name a {
  display: inline;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
.partner-strip__item .partner-strip__name a::after { content: ""; position: absolute; inset: 0; }
.partner-strip__item .partner-strip__name a:focus-visible { outline: none; box-shadow: none; }
.partner-strip__item:has(a:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-offset) + 1px) var(--focus-separator);
  border-radius: var(--radius-xs);
}
.partner-strip__meta { font-size: var(--type-caption); color: var(--color-ink-secondary); }
.partner-strip__meta > p { display: inline; }
.partner-strip__meta > p:not(:empty) + p:not(:empty)::before { content: " · "; }

/* The partner page's "More from" band: two loops share one card grid. */
.partner-related > .wp-block-query,
.partner-related .wp-block-post-template { display: contents; }
.partner-related .wp-block-post { display: flex; flex-direction: column; }
.partner-related .wp-block-post > * { flex: 1 1 auto; }

/* In the mockup the card's date line is a p, so .card p sized it; the core
   date and meta row are divs and take the same size here. */
.card .card__body > .meta,
.card .card__body > .wp-block-post-date { font-size: var(--type-body-sm); color: var(--color-ink-secondary); }