/* grid layout (keeps current gap/sizing) */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* make each card-link act like a real card container */
.grid-gallery .card-link {
  display: block;            /* important: anchors are inline by default */
  height: 100%;              /* so the link fills the grid track */
  text-decoration: none;
  color: inherit;
}

/* card visuals */
.watch-item {
  display: flex;             /* equal height internals */
  flex-direction: column;
  height: 100%;              /* figure fills the link */
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}

.card-link:hover .watch-item,
.card-link:focus .watch-item {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

/* consistent poster sizing (prevents uneven heights) */
.watch-item > img {
  width: 100%;
  aspect-ratio: 3 / 4;       /* adjust art (2/3 or 3/4) */
  object-fit: cover;
  display: block;
}

/* caption sits below and can grow */
.watch-item figcaption {
  padding: .75rem;
  font-size: .95rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;                   /* lets caption stretch to fill height */
}


/* tables (media log extra credit) */
.watch-table {
    width: 100%;
    border-collapse: collapse;
}

.watch-table th,
.watch-table td {
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    text-align: left;
}

.watch-table thead th {
    background: var(--soft);
    color: #26322f;
    font-weight: 700;
}

.watch-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, .6);
}

.watch-table tr:hover td {
    background: rgba(245, 202, 195, .25);
}