/* cards.css — responsive card grid for Deft.Soccer
   - Auto-resizes cards and media using CSS Grid + aspect-ratio
   - Works with plain <img>, <picture>, or a thumbnail <div>
   - Progressive enhancement via container queries (optional)
*/

/* ---------- Layout container ---------- */
.cards {
  /* Create a responsive grid that fills the row with as many cards as fit */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 38vw, 320px), 1fr));
  gap: clamp(12px, 2.4vw, 24px);
  align-items: stretch;
}

/* Optional: limit max line length and add breathing room */
.cards-wrapper {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(12px, 3vw, 24px);
}

/* ---------- Card ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}

.card:where(a) { text-decoration: none; color: inherit; }

/* Hover / focus */
@media (hover:hover) {
  .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
}
.card:focus-within { outline: 2px solid #2680eb; outline-offset: 2px; }

/* ---------- Media area (keeps 16:9) ---------- */
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;          /* preserves thumb ratio at any width */
  background: #f3f5f7;           /* placeholder color */
}

/* If you use an <img> or <picture> inside .card__media */
.card__media > img,
.card__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* crop elegantly */
  display: block;
}

/* Optional play overlay icon area */
.card__badge {
  position: absolute; inset: auto 8px 8px auto;
  padding: 6px 8px; border-radius: 10px;
  background: rgba(17,17,17,.72); color: #fff; font-size: 12px; font-weight: 600;
}

/* ---------- Text content ---------- */
.card__body {
  padding: clamp(10px, 2.2vw, 16px);
}

.card__title {
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 700;
}

.card__meta,
.card__excerpt {
  color: #667085;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  margin: 0;
}

/* ---------- Links that wrap the media ---------- */
.card__link {
  display: block;                 /* makes the media area fully clickable */
  color: inherit;
}

/* ---------- Dark mode tweak (fits your navy palette) ---------- */
@media (prefers-color-scheme: dark) {
  .card { background: #0f1923; border-color: #1e2a36; }
  .card__media { background: #152433; }
  .card__title { color: #e9eef3; }
  .card__meta, .card__excerpt { color: #a8b3bd; }
  .card:focus-within { outline-color: #3aa0ff; }
}

/* ---------- Motion sensitivity ---------- */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

/* ---------- Progressive enhancement: container queries ----------
   If you wrap the grid in .cards-wrapper and add container-type, 
   the cards can adapt based on the container’s width (not the viewport).
*/
.cards-wrapper {
  container-type: inline-size;
}

@container (max-width: 460px) {
  .card__title { font-size: 1rem; }
  .card__meta, .card__excerpt { font-size: .9rem; }
}

/* ---------- Optional: single-column on very narrow screens ---------- */
@media (max-width: 380px) {
  .cards { grid-template-columns: 1fr; }
}


/* Style for breadcrumbs */
.breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li+li::before {
  content: ">";
  margin: 0 0.5rem;
  color: #666;
}

.breadcrumbs a {
  text-decoration: none;
  color: #0366d6; /* link blue */
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  font-weight: bold;
  color: #111; /* darker to show current */
}