/* ============================================================
   css/cards.css — Article card component styles
   ============================================================ */

/* ── Base card ──────────────────────────────────────────────── */
.card {
  cursor    : pointer;
  transition: all var(--ease-out);
  position  : relative;
}
.card:hover {
  transform: translateY(-3px);
}
.card:active {
  transform: translateY(0);
}
.card:hover .card__title {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.card img {
  width        : 100%;
  object-fit   : cover;
  filter       : grayscale(15%);
  border       : 1px solid var(--rule-faint);
  margin-bottom: 8px;
  transition   : all var(--ease-out);
}
.card:hover img {
  filter: grayscale(0%);
  box-shadow: var(--shadow-sm);
}

.card__body { padding: 0; }

.card__cat {
  font-size     : 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color         : var(--accent);
  font-family   : var(--font-body);
  margin-bottom : 6px;
  font-weight   : 600;
}

.card__title {
  font-family: var(--font-head);
  font-weight: 700;
  color      : var(--ink);
  line-height: 1.25;
  margin-bottom: 6px;
}

.card__desc {
  font-size  : 12.5px;
  color      : var(--ink-muted);
  line-height: 1.55;
  font-family: var(--font-body);
  margin-bottom: 6px;
}

.card__foot {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  font-size      : 10.5px;
  color          : var(--muted);
  font-style     : italic;
  font-family    : var(--font-body);
  margin-top     : 6px;
}

.card__tags {
  margin-top : 8px;
  display    : flex;
  flex-wrap  : wrap;
  gap        : 5px;
}

/* ── Tag pill ───────────────────────────────────────────────── */
.tag {
  display      : inline-block;
  background   : var(--tag-bg);
  color        : var(--ink-soft);
  font-size    : 9.5px;
  padding      : 3px 8px;
  font-family  : var(--font-body);
  border       : 1px solid var(--rule-faint);
  letter-spacing: 0.3px;
  transition   : all var(--ease);
}
.tag:hover {
  background: var(--paper-mid);
  border-color: var(--rule-light);
}
.tag--lg {
  font-size: 11px;
  padding  : 4px 12px;
}

/* ── Hero card (large center) ───────────────────────────────── */
.card--hero img {
  height: clamp(200px, 30vw, 320px);
}
.card--hero .card__title {
  font-size : clamp(20px, 3vw, 30px);
}
.card--hero .card__desc { font-size: 14px; }

/* ── Medium card (strips, category pages) ───────────────────── */
.card--medium img  { height: 155px; }
.card--medium .card__title { font-size: 15.5px; }

/* ── Small card (hero right column) ────────────────────────── */
.card--small {
  display              : grid;
  grid-template-columns: 90px 1fr;
  gap                  : 10px;
  margin-bottom        : 14px;
  padding-bottom       : 14px;
  border-bottom        : 1px solid var(--rule-faint);
}
.card--small:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.card--small img {
  width : 90px;
  height: 68px;
  margin: 0;
}
.card--small .card__title { font-size: 13.5px; line-height: 1.3; }
.card--small .card__desc  { display: none; }

/* ── Tiny card (hero left column — headlines only) ───────────── */
.card--tiny {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom : 1px solid var(--rule-faint);
}
.card--tiny:last-child { border-bottom: none; margin-bottom: 0; }
.card--tiny .card__title { font-size: 13px; line-height: 1.3; }
.card--tiny .card__desc  { display: none; }
.card--tiny img          { display: none; }
.card--tiny .card__tags  { display: none; }

/* ── Trending sidebar items (overrides) ────────────────────── */
.trending-item {
  transition: all var(--ease);
}
.trending-item:hover {
  opacity: 0.85;
}
.trending-item:hover .trending-item__title {
  color: var(--accent);
}

/* ── Weather card in grid ──────────────────────────────────── */
.card--weather {
  background : var(--paper-dark);
  border     : 1px solid var(--rule-light);
  padding    : 16px;
  cursor     : default;
}
.card--weather .weather-main {
  display      : flex;
  align-items  : center;
  gap          : 12px;
}
.card--weather .weather-main .weather-temp {
  font-size   : 30px;
  font-weight : 700;
  font-family : var(--font-head);
}
.card--weather .weather-details {
  display    : grid;
  grid-template-columns: 1fr 1fr;
  gap        : 6px 14px;
  margin-top : 12px;
  font-size  : 11px;
  color      : var(--muted);
}