/*****************************************************
CARDS

The classic image-and-text card, in two shapes: `.v-card` (image above text,
laid out by `.card-grid`) and `.h-card` (image beside text, stacked in a list).

Loads:    every page
Used by:  cards/card-grid.html, cards/card-stack.html, helpers/card-image.html
Needs:    base.css tokens (--card-bg, --card-border, --card-hover-border,
          --card-heading-color, --card-text-color)
Not here: image-first tiles with the caption over the picture (gallery.css);
          the table-of-contents rows that are the text-forward alternative to a
          card (toc.css); the tag filter UI (tags.css). The `.card .tags` rules
          below stay here rather than in tags.css, because they style tags
          *inside* a card rather than the filter component.
*****************************************************/

/*****************************************************
SHARED BASE

Common to both shapes. Anything that is true of a card regardless of whether
its image sits above the text or beside it belongs here, not in a variant.
*****************************************************/

.card {
  /* Display */
  overflow: hidden;

  /* Typography */
  font-family: var(--font-body);

  /* Visual */
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  opacity: 0.9;

  /* Interactivity */
  transition: transform var(--transition-normal), opacity var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover {
  /* Visual */
  opacity: 1;
  box-shadow: var(--shadow-lg);
  border-color: var(--card-hover-border);
  transform: translateY(-4px);
}

.card a {
  /* Typography */
  text-decoration: none;
  color: inherit;

  /* Visual */
  border-bottom: 0;
}

.card a h3 {
  /* Typography */
  color: var(--card-heading-color);
}

.card a p {
  /* Typography */
  color: var(--card-text-color);
}

.card-body {
  /* Box Model */
  padding: var(--spacing-md);

  /* Typography */
  font-family: var(--font-body);
  text-align: left;
}

/* Attribution lines. A collaborative site has to be able to say who made a
   thing — the single field the bespoke gallery sites all added to their own
   card markup. Both are optional and collapse to nothing when unset. */
.card-kicker {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-byline {
  margin: calc(var(--spacing-xs) * -0.5) 0 var(--spacing-xs);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* With a kicker above it the title no longer needs its own top margin */
.card-kicker + h3 {
  margin-top: var(--spacing-xs);
}

.card h3 {
  /* Box Model */
  margin: var(--spacing-xs) 0 var(--spacing-sm) 0;

  /* Typography */
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-body);
}

.card-text {
  /* Typography */
  font-size: 1rem;
  font-weight: normal;
  color: var(--card-text-color);
  text-align: left;
}

/* Vertical cards for grid layouts */
/*****************************************************
VERTICAL CARD

Image above text. Laid out by .card-grid; emitted by cards/card-grid.html.
*****************************************************/

.v-card {
  /* Display */
  display: flex;
  flex-direction: column;
  
  /* Box Model */
  height: 100%;
  min-height: 20rem;
}

.v-card .card-img-top {
  /* Box Model */
  width: 100%;
  height: 15rem;

  /* Visual */
  overflow: hidden;  /* clips thumbnail-zoom transform */
}

.v-card .card-img-top img {
  /* Box Model */
  width: 100%;
  height: 100%;

  /* Visual */
  object-fit: cover;
}

.v-card .card-body {
  /* Display */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
}

.v-card:hover {
  /* Visual */
  transform: scale(1.03);
}

/* Horizontal cards for stacked layouts */
/*****************************************************
HORIZONTAL CARD

Image beside text, stacked in a list. Emitted by cards/card-stack.html.
Collapses to vertical under 768px — see the mobile block at the end.
*****************************************************/

.h-card {
  /* Display */
  display: flex;
  flex-direction: row;
  align-items: stretch;

  /* Box Model */
  min-height: 14rem;
  margin-bottom: var(--spacing-lg);
}

.h-card .card-img-left {
  /* Box Model */
  flex: 0 0 320px;
  width: 320px;
  height: 16rem;

  /* Visual */
  overflow: hidden;  /* clips thumbnail-zoom transform */
}

.h-card .card-img-left img {
  /* Box Model */
  width: 100%;
  height: 100%;

  /* Visual */
  object-fit: cover;
}

.h-card .card-body {
  /* Display */
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
}

.h-card:hover {
  /* Visual */
  transform: translateX(8px);
}

/* Card link wrapper */
.h-card a.card-link {
  /* Display */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
  
  /* Typography */
  text-decoration: none;
  color: inherit;
}

.h-card a.card-link:hover {
  /* Typography */
  text-decoration: none;
}

/* Tags in cards */
/*****************************************************
TAGS INSIDE A CARD

Card-scoped, so it lives here rather than in tags.css, which owns the
standalone tag filter UI.
*****************************************************/

.card .tags {
  /* Display */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  
  /* Box Model */
  margin-top: 0.75rem;
}

.card .tags .badge {
  /* Box Model */
  padding: 0.35rem 0.65rem;
  
  /* Typography */
  font-size: 0.85rem;
  font-weight: normal;
}

/* Card grid layout using CSS Grid */
/*****************************************************
CARD GRID

The container that lays vertical cards out in columns.
*****************************************************/

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .card-grid {
      grid-template-columns: repeat(2, 1fr);
    
  }
}

@media (min-width: 1024px) {
  .card-grid {
      grid-template-columns: repeat(3, 1fr);
    
  }
}

/* Ensure card links work properly */
.v-card a.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}


/* Responsive: horizontal cards become vertical on small screens */
@media (max-width: 768px) {
  .h-card {
      /* Display */
      flex-direction: column;
  
      /* Box Model */
      margin-left: var(--spacing-md);
      margin-right: var(--spacing-md);
    
  }

  .h-card a.card-link {
      /* Display */
      flex-direction: column;
    
  }

  .h-card .card-img-left {
      /* Box Model */
      flex: 0 0 auto;
      width: 100%;
      height: 200px;
    
  }

  .card-body {
      /* Box Model */
      padding: var(--spacing-xs);
    
  }

  .card h3 {
      /* Box Model */
      margin: var(--spacing-xs) 0;
  
      /* Typography */
      font-size: 1.1rem;
    
  }

  .card-text,
  .card p {
      /* Box Model */
      margin-bottom: var(--spacing-xs);
  
      /* Typography */
      font-size: 0.9rem;
    
  }

  /* Remove text padding inside cards on mobile */
  .card p,
  .card h3 {
      /* Box Model */
      padding-left: 0;
      padding-right: 0;
    
  }

  /* Ensure text is visible in h-cards on mobile */
  .h-card .card-body h3,
  .h-card .card-body p {
      /* Typography */
      color: var(--text-body);
    
  }

  .v-card {
      /* Box Model */
      margin-left: var(--spacing-md);
      margin-right: var(--spacing-md);
    
  }
}