/* ===========================
   Juliana — Cards
   =========================== */

/*
 * Writing cards (H-FEAT, W-GRID tiles, related posts, E-REL).
 * Surface-1 background, hairline border, card radius 6px.
 * Oxblood category tag (j-tag) — never large-area background.
 */

/* ===========================
   Cards
   =========================== */

/*
 * .j-card: used on Home featured writing, Writing index grid,
 * Essay "Keep reading" related tiles.
 */
.j-card {
  /* color */
  background-color: var(--c-surface-1);

  /* border */
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-card);

  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;

  /* transition */
  transition: border-color 0.2s ease;

  /* other */
  overflow: hidden;

}

.j-card:hover {
  /* border */
  border-color: color-mix(in srgb, var(--c-ink) 25%, transparent);

}

.j-card__img {
  /* box model */
  width: 100%;

  /* display */
  display: block;

  /* flexbox */
  flex-shrink: 0;

  /* other */
  aspect-ratio: 3 / 2;
  overflow: hidden;

}

.j-card__img .j-img,
.j-card__img .j-img-placeholder,
.j-card__img img { /* native post-featured-image block */
  /* box model */
  width: 100%;
  height: 100%;

  /* other */
  object-fit: cover;

}

/* Native post-featured-image renders a <figure>; its link wrapper must
 * fill the aspect-ratio box so the img can cover it. */
figure.j-card__img {
  /* box model */
  margin: 0;

}

figure.j-card__img > a {
  /* display */
  display: block;

  /* box model */
  width: 100%;
  height: 100%;

}

.j-card__body {
  /* box model */
  padding: var(--sp-24);

  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  flex: 1;
  gap: var(--sp-16);

}

/* Oxblood category tag — accent discipline: small interactive surface only */
.j-tag {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  /* color */
  color: var(--c-ink);
  background-color: var(--c-accent);

  /* box model */
  padding: 0.3rem 0.75rem;
  min-height: 32px;

  /* border */
  border-radius: var(--r-card);

  /* display */
  display: inline-flex;

  /* flexbox */
  align-items: center;
  justify-content: center;
  align-self: flex-start;

  /* transition */
  transition: background-color 0.2s ease;

}

.j-tag:hover {
  /* color */
  color: var(--c-ink);
  background-color: var(--c-accent-hover);

}

.j-tag:focus-visible {
  /* other */
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;

}

.j-card__title {
  /* text */
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.25;

  /* color */
  color: var(--c-ink);

}

.j-card__title a {
  /* text — title links look like the title, not like body links */
  color: inherit;
  text-decoration: none;

}

/* Linked "drawn to" cards: the title link stretches over the whole card. */
.j-drawn .j-card {
  /* position — containing block for the stretched link */
  position: relative;

}

.j-drawn .j-card__title a::after {
  /* other — stretched link: makes the entire card clickable */
  content: "";

  /* position */
  position: absolute;
  inset: 0;

}

.j-card__excerpt p,
.j-card__meta p {
  /* native block wrappers put the class on a div; let the inner
   * paragraph inherit instead of taking the global p sizing */
  font-size: inherit;
  line-height: inherit;
  color: inherit;

}

.j-card__excerpt {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  line-height: 1.65;

  /* color */
  color: var(--c-ink-dim);

  /* display */
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* flexbox */
  flex: 1;

  /* other */
  -webkit-line-clamp: 4;
  overflow: hidden;

}

.j-card__meta {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-card-meta);
  letter-spacing: 0.05em;
  text-transform: uppercase;

  /* color */
  color: var(--c-ink-muted);

}

.j-card__cta {
  /* box model */
  padding-top: var(--sp-12);
  margin-top: auto;

}


/* ===========================
   "Drawn To" card (About preoccupations — A-DRAWN vertex)
   =========================== */

/*
 * 6 cards on About page. Darker surface, no image.
 * Tokenised — no hardcoded colour values.
 */

.j-pcard {
  /* color */
  background-color: var(--c-surface-1);

  /* box model */
  padding: var(--sp-32) var(--sp-24);

  /* border */
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-card);

}

.j-pcard__title {
  /* text */
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);

  /* color */
  color: var(--c-ink);

  /* box model */
  margin-bottom: var(--sp-8);

}

.j-pcard__desc {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;

  /* color */
  color: var(--c-ink-dim);

}