/*
 * Home page (index.qmd) guide cards: two columns filling left to right
 * (so the alphabetical order reads across, then down), one column on phones.
 * Each card is a row - thumbnail on the left, title (+ up to two lines of
 * description) on the right.
 *
 * Sized so every guide, including Other Publications, fits on screen without
 * scrolling: full size on a 1920x1080 screen, and a compact size (smaller
 * thumbnails and text) on shorter windows such as a 1366x768 laptop.
 * All the sizes are the variables below; the compact set is in the
 * max-height media query.
 *
 * Quarto renders each card as:
 *   div.guide-card
 *     p > [a >] img.guide-card-image      (the image line)
 *     section > h3 [> a] + p              (title + description / "Coming soon")
 */
main.content {
  --guide-thumb-w: 120px;     /* photos are cropped to fill this frame (3:2) */
  --guide-thumb-h: 80px;
  --guide-card-pad: 0.4rem;
  --guide-grid-gap: 0.75rem;
  --guide-title-size: 1.15rem;
  --guide-desc-size: 0.9rem;
  --guide-desc-lines: 3;      /* longer descriptions are cut off with "..." */
  --guide-section-gap: 0.75rem;
}

/* Shorter windows (laptops, 1440x900 and below): compact cards. */
@media (max-height: 860px) {
  main.content {
    --guide-thumb-w: 60px;
    --guide-thumb-h: 40px;
    --guide-card-pad: 0.2rem;
    --guide-grid-gap: 0.5rem;
    --guide-title-size: 1rem;
    --guide-desc-size: 0.8rem;
    --guide-desc-lines: 2;
    --guide-section-gap: 0.5rem;
  }
}

/* Tighter spacing above and below the title and intro on this page, to keep
   every card on screen. */
main.content {
  margin-top: 0.25rem;
}

#title-block-header {
  margin-bottom: 0.5rem;
}

#content > p {
  margin-bottom: 0.5rem;
}

#title-block-header .subtitle {
  margin-bottom: 0;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--guide-grid-gap);
  margin: 0.6rem 0 0.75rem;
}

@media (max-width: 575.98px) {
  .guide-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.guide-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: calc(var(--guide-thumb-h) + 2 * var(--guide-card-pad));
  padding: var(--guide-card-pad) 0.75rem var(--guide-card-pad) var(--guide-card-pad);
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.guide-card:hover {
  border-color: #c4ccd4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* Thumbnail: any photo is cropped to fill the frame. */
.guide-card > p:first-child {
  flex: 0 0 var(--guide-thumb-w);
  margin: 0;
  line-height: 0;
}

.guide-card .guide-card-image {
  display: block;
  width: var(--guide-thumb-w);
  height: var(--guide-thumb-h);
  object-fit: cover;
  border-radius: 4px;
  margin: 0;
}

/* Title and description. */
.guide-card > section {
  min-width: 0;
  padding: 0;
}

.guide-card h3 {
  margin: 0;
  font-size: var(--guide-title-size);
  font-weight: 600;
  line-height: 1.2;
}

.guide-card h3 a {
  font-weight: inherit;
  text-decoration: none;
}

.guide-card h3 a:hover {
  text-decoration: underline;
}

/* No "link to this heading" icon on card titles (it reserves space after
   the title, pushing "Coming soon" away from it). */
.guide-card h3 .anchorjs-link {
  display: none;
}

/* Description: limited to a few lines, so long ones don't stretch the row. */
.guide-card section p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--guide-desc-lines);
  line-clamp: var(--guide-desc-lines);
  overflow: hidden;
  margin: 0.15rem 0 0;
  color: #555;
  font-size: var(--guide-desc-size);
  line-height: 1.3;
}

/* Guides that aren't published yet: "Coming soon" sits beside the title
   when there's room, instead of on its own line. */
.guide-card.coming-soon .guide-card-image {
  opacity: 0.6;
}

.guide-card.coming-soon > section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}

.guide-card.coming-soon section p {
  margin: 0;
}

.guide-card.coming-soon h3 {
  color: #6c757d;
}

.guide-card-status {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
}

/* Tighter spacing around the "Other Publications" heading on this page. */
#other-publications {
  margin-top: var(--guide-section-gap);
}

#other-publications > h2 {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0.2rem;
  font-size: 1.25rem;
}

#other-publications .guide-grid {
  margin-top: 0.5rem;
}