@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 9.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   9. RESOURCE CARDS — downloadable PDFs
   ============================================================ */

.resource-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* The first row absorbs the slack so the specs row is pinned to
     the bottom edge and download rows align across the grid. */
  grid-template-rows: 1fr auto;
  gap: var(--space-sm) var(--space-md);
  align-items: start;
  padding: var(--space-md);
  background-color: var(--colour-bg-card);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  height: 100%;
  transition: var(--transition-colour), box-shadow var(--duration-base) var(--ease-out);
}

.resource-card:hover {
  border-color: var(--colour-rule-accent);
  box-shadow: var(--shadow-card);
}

.band .resource-card {
  background-color: var(--paper);
  border-color: var(--cream-400);
}

/* -- 9a. The first-page thumbnail -----------------------------
   A portrait crop of page one, framed in the same thin warm
   outline as the logo tiles, with the file type and extent
   overlaid across its foot. It is a link in its own right and
   opens the PDF in a new tab.

   The PDF is never embedded. An <iframe> or <embed> of a PDF
   is unreliable on iOS Safari and Android Chrome, both of which
   hand the file to a native viewer rather than rendering it in
   the frame, and most readers here are on a phone. A thumbnail
   plus target="_blank" is the behaviour those browsers already
   do well.
   ------------------------------------------------------------ */
.pdf-thumb {
  position: relative;
  /* Above the card-wide title overlay, so the thumbnail keeps
     its own click target. */
  z-index: var(--z-raised);
  display: block;
  flex-shrink: 0;
  width: var(--thumb-width);
  aspect-ratio: var(--thumb-ratio);
  background-color: var(--paper);
  border: var(--rule-hairline) solid var(--cream-400);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  transition: var(--transition-colour), box-shadow var(--duration-base) var(--ease-out);
}

.resource-card:hover .pdf-thumb {
  border-color: var(--colour-rule-accent);
  box-shadow: var(--shadow-card);
}

.pdf-thumb img {
  width: 100%;
  height: 100%;
  /* The interesting part of a first page is its head. */
  object-fit: cover;
  object-position: top center;
}

/* File type and page count, laid across the foot of the page. */
.pdf-thumb__badge {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  background-color: var(--colour-overlay);
  color: var(--cream-050);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal);
  text-align: center;
}

.pdf-thumb__badge span + span::before {
  content: '\00B7';
  margin-right: var(--space-2xs);
  color: var(--burgundy-200);
}

/* Placeholder — an item with no cover image yet. WordPress can
   only generate one where Imagick has Ghostscript behind it, so
   this state is the norm on shared hosting, not an edge case.
   It keeps the frame, the ratio and the badge, so a listing
   does not go ragged when a cover is missing.                  */
.pdf-thumb--placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  background-color: var(--cream-100);
  background-image: repeating-linear-gradient(
    var(--cream-100) 0 calc(var(--space-2xs) - var(--rule-hairline)),
    var(--cream-300) calc(var(--space-2xs) - var(--rule-hairline)) var(--space-2xs)
  );
}

.pdf-thumb__mark {
  display: grid;
  place-items: center;
  width: var(--space-lg);
  height: var(--space-lg);
  background-color: var(--paper);
  border: var(--rule-hairline) solid var(--cream-400);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-heading);
}

.pdf-thumb__caption {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal);
  color: var(--colour-text-meta);
  text-align: center;
  /* Clear of the badge across the foot. */
  margin-bottom: var(--space-md);
}

@media (min-width: 40em) {
  .pdf-thumb {
    width: var(--thumb-width-lg);
  }
}

.resource-card__body {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}

.resource-card__title {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin: 0;
}

.resource-card__title a {
  color: inherit;
}

.resource-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.resource-card:hover .resource-card__title a {
  color: var(--colour-link-hover);
}

.resource-card__desc {
  margin: 0;
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* File size, page count, format — the download's small print. */
.resource-card__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  grid-column: 1 / -1;
  padding-top: var(--space-xs);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

.resource-card__size {
  font-weight: var(--weight-semibold);
  color: var(--colour-text-muted);
}

/* The filename is a filename, so it is set in the mono stack —
   and it is allowed to break anywhere, because a long hyphenated
   slug is wider than a 375px card and must not push the card.

   It also takes a full line of its own rather than flowing with
   the rest of the specs. Left to wrap naturally, a long filename
   pushes the button onto a second line while a short one does
   not, so the specs rule lands at a different height on each
   card and the row goes ragged. Forcing the break makes the
   block two lines on every card, and the rules line up across
   the grid — which is the whole point of pinning them. */
.resource-card__filename {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-normal);
  overflow-wrap: anywhere;
  color: var(--colour-text-muted);
}

/* Above the card-wide title overlay, as the thumbnail is. */
.resource-card__action {
  position: relative;
  z-index: var(--z-raised);
  margin-left: auto;
}

@media (min-width: 40em) {
  .resource-card {
    padding: var(--space-lg);
  }
}