/**
 * @file
 * Latest publications — card grid for the front page.
 *
 * Card anatomy: category pill, title, summary, meta line (format · date ·
 * size), then a download row. Colours come from the theme tokens;
 * per-category tinting is driven by a data attribute set in the row template.
 */

.pubs {
  padding-block: var(--swalim-section-pad);
  background: var(--swalim-color-surface);
}

.pubs__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-md);
  margin-bottom: var(--swalim-section-header-gap);
}
.pubs__eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps, .09em);
  text-transform: uppercase;
  color: var(--swalim-color-blue);
}
.pubs__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--swalim-color-ink);
}
.pubs__intro {
  margin-top: var(--space-2xs);
  max-width: 34rem;
  color: var(--swalim-color-ink-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.pubs__browse {
  white-space: nowrap;
  color: var(--swalim-color-blue);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.pubs__browse:hover { text-decoration: underline; }

/* ---------- grid ---------- */
.pubs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-md);
}

/* ---------- card ---------- */
.pub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--swalim-color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--swalim-color-surface);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.pub-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pub-card__body {
  /* Top padding was previously carried by the icon panel above it. */
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}
.pub-card__pill {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--swalim-color-surface-tint);
  color: var(--swalim-color-ink-muted);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.pub-card__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--swalim-color-ink);
}
.pub-card__title a {
  color: inherit;
  text-decoration: none;
}
/* Whole card clickable via the title's stretched link. */
.pub-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.pub-card__title a:hover { color: var(--swalim-color-blue); }

.pub-card__summary {
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--swalim-color-ink-muted);
  /* keep cards even: clamp to three lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pub-card__meta {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: .01em;
  color: var(--swalim-color-ink-muted);
}
.pub-card__meta .sep { opacity: .5; padding: 0 4px; }
.pub-card__format { font-weight: var(--fw-semibold); text-transform: uppercase; }

/* ---------- download row ----------
   The title's stretched ::after covers the whole card, so anything meant to
   be separately clickable has to sit above it. Hence position + z-index. */
.pub-card__actions {
  position: relative;
  z-index: 1;
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--swalim-color-rule);
}
.pub-card__download,
.pub-card__actions--raw a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--swalim-color-blue);
  text-decoration: none;
}
.pub-card__download:hover,
.pub-card__actions--raw a:hover { text-decoration: underline; }
.pub-card__download:focus-visible,
.pub-card__actions--raw a:focus-visible {
  outline: 2px solid var(--swalim-color-blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.pub-card__actions .icon-download {
  flex: none;
  color: var(--swalim-color-blue);
}
/* Fallback row: icon sits beside whatever markup the field formatter emits. */
.pub-card__actions--raw {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
}
.pub-card__actions--raw .file,
.pub-card__actions--raw .file__size { font-size: inherit; }

/* ---------- per-category tinting ----------
   The row template sets data-cat to a slug of the category name. Add more
   cases here as editors add categories; anything unmatched keeps the
   neutral default above. */
.pub-card[data-cat*="flood"] .pub-card__pill,
.pub-card[data-cat*="advisory"] .pub-card__pill,
.pub-card[data-cat*="alert"] .pub-card__pill { background: #FBEAE8; color: #A3301F; }

.pub-card[data-cat*="rain"] .pub-card__pill,
.pub-card[data-cat*="forecast"] .pub-card__pill { background: #FDF0E4; color: var(--swalim-color-brown, #8A5A2B); }

.pub-card[data-cat*="season"] .pub-card__pill,
.pub-card[data-cat*="outlook"] .pub-card__pill,
.pub-card[data-cat*="vegetation"] .pub-card__pill { background: #E7F2EA; color: var(--swalim-color-green); }

.pub-card[data-cat*="water"] .pub-card__pill,
.pub-card[data-cat*="drought"] .pub-card__pill { background: var(--swalim-color-blue-pale); color: var(--swalim-color-blue); }

@media (max-width: 700px) {
  .pubs__head { grid-template-columns: 1fr; align-items: start; }
  .pubs__browse { justify-self: start; }
}