/*
  Card: a teaser that leads to one page, e.g. an article or a zložka. Rules: karty.html.
  Needs tag.css and icon-list.css when the card uses tags or an icon list.

  <ul class="card-grid">
    <li class="card">
      <img class="card__image" src="…" alt="">
      <div class="card__body">
        <ul class="tag-list"><li><span class="tag">Oratko</span></li></ul>   (above or below the title, see tag.css)
        <h3 class="card__title"><a href="…">Nadpis</a></h3>
        <p>Krátky text.</p>
        <ul class="icon-list icon-list--small">…</ul>
        <span class="card__more" aria-hidden="true">Čítať viac<svg class="icon" …>arrow_forward</svg></span>
      </div>
    </li>
  </ul>

  - The whole card is one link: the heading's link stretches over the card. No other link or button inside.
    "Čítať viac" at the bottom is only a visual cue (aria-hidden); screen readers get the heading link.
  - .card-grid: each card spans 4 grid columns, so 3 per row on desktop, 2 on tablet, 1 on mobile.
  - All cards in one grid have the same parts in the same place: all with a photo or none, tags all above the
    title, all below it or none, and the same for the icon list and "Čítať viac".
  - Sand card without a border on a white surface. On a sand surface add .card--white. Never on a strong background.
  - Coloured card: .bg-subtle-{color} or .bg-strong-{color} (base.css) on .card__body; the photo stays on top.
    Colour highlights one card among others, it never marks a zložka.
  - Photo 3:2 (fotografie.html), decorative here (alt=""), because the heading says what the card is about.
  - Instead of a photo a card about a zložka may start with its icon: <svg class="icon card__icon"> (ikony.html).
*/

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-grid > * {
  grid-column: span 4;
}

/* Transparent border keeps the card's edge visible in Windows high contrast */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--fg-neutral);
  background: var(--surface-sand);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-medium);
  background-clip: padding-box;
}

.card--white {
  background: var(--surface-white);
}

/* Focus ring around the whole card instead of around the heading text */
.card:has(.card__title a:focus-visible) {
  outline: var(--border-width-strong) solid var(--border-focus);
  outline-offset: 2px;
}

.card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.card__body > * {
  margin: 0;
}

/* Icon list and "Čítať viac" sit at the bottom of the card, so they line up across a row */
.card__body > :is(.icon-list, .card__more) {
  margin-top: auto;
}

.card__body > .icon-list + .card__more {
  margin-top: 0;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--fg-link);
}

/* On a coloured body "Čítať viac" takes the link colour of that background */
:where(.bg-subtle-green, .bg-subtle-blue, .bg-subtle-yellow, .bg-subtle-red, .bg-subtle-neutral) .card__more {
  color: var(--fg-current);
}

:where(.bg-strong-green, .bg-strong-blue, .bg-strong-yellow, .bg-strong-red, .bg-strong-neutral) .card__more {
  color: inherit;
}

.card__more .icon {
  width: 1.25em;
  height: 1.25em;
}

.card__icon {
  width: var(--icon-size-large);
  height: var(--icon-size-large);
}

.card__title {
  font-size: var(--font-size-h4);
  letter-spacing: normal;
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__title a:focus-visible {
  outline: none;
}

.card:hover :is(.card__title a, .card__more),
.card__title a:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 3px;
}