/* Publications page. Loaded AFTER homepage.css, so the header, fonts, colors,
   and footer all come from your main stylesheet. This file only adds the cards. */

.body {
  padding-bottom: 60px;
}

/* Grid of cards. auto-fill keeps every card the same width, even on a short last row. */
.cardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 24px;
  max-width: 1250px;
  margin: 50px auto 0;
  padding: 0 30px;
  box-sizing: border-box;
}

/* Cards cycle through your three main colors: green, navy, purple */
.card {
  position: relative;            /* anchors the full-card click area */
  display: flex;
  flex-direction: column;
  background-color: #1d4c4a;
  color: #F0EDEA;
  border-radius: 18px;
  padding: 24px 24px 26px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.card:nth-child(3n+2) { background-color: #171a3c; }
.card:nth-child(3n+3) { background-color: #4b3ee4; }

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(23, 26, 60, .25);
  filter: brightness(1.12);
}

/* Title sizes: set automatically by a small script based on title length */
.cardTitle {
  margin: 0;
  font-family: promptRegular, Tahoma, sans-serif;
  font-weight: bold;
  font-size: 21px;
  line-height: 1.25;
  color: #F0EDEA;
}
.cardTitle[data-size="lg"] { font-size: 24px; }
.cardTitle[data-size="sm"] { font-size: 18px; }

.cardMeta {
  font-family: latoItalic, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #d7dfe4;
  margin-top: 8px;
}
.cardDesc {
  font-family: nunitoSans, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 237, 234, .28);
}

/* ----- Clickable cards -----
   The title link stretches over the whole card (the ::after layer).
   Other links inside the card sit above that layer, so they work on their own. */
.cardLink {
  display: inline;
  color: inherit;
  text-decoration: none;
}
.cardLink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 18px;
}
.card:hover .cardLink {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cardLink:focus-visible {
  outline: none;
}
.cardLink:focus-visible::after {
  outline: 3px solid #171a3c;
  outline-offset: 4px;
}

.inlineLink {
  display: inline;
  position: relative;
  z-index: 2;                    /* above the full-card click area */
  color: #F0EDEA;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.inlineLink:hover {
  color: #d7dfe4;
}
.inlineLink:focus-visible {
  outline: 3px solid #F0EDEA;
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .cardGrid { padding: 0 18px; }
}
@media (min-width: 1700px) {
  .cardGrid { max-width: 1500px; gap: 30px; }
}