/**
 * Photo Cards
 * -----------
 * Responsive grid of image + title + one-line description cards, authored
 * directly in a CKEditor body:
 *
 *   <div class="photo-cards">
 *     <div class="photo-card">
 *       <p><a href="..."><img src="..." alt="..."></a></p>
 *       <h3><a href="...">Title</a></h3>
 *       <p>Short description</p>
 *     </div>
 *     ...
 *   </div>
 *
 * First used on /learning/projects (node 34491), which previously laid its
 * boxes out with inline float/width styles. CKEditor 5 owns <img> sizing and
 * rewrites inline width/height styles into the file's natural dimensions on
 * every save, so mixed-size photos (300x300 next to 300x200) snagged the
 * floats. All layout lives here instead, keyed only on the two wrapper
 * classes; images are cropped to a fixed 3:2 frame regardless of whatever
 * width/height attributes the editor writes. Mirrored for the WYSIWYG in
 * ckeditor5.css — keep the two in sync.
 *
 * TO REVERT: remove the `css/photo-cards.css: {}` line from the `components`
 * library in gmu_libraries.libraries.yml and run `vendor/bin/drush cr`.
 */

.photo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem 1.5rem;
  margin: 1.5rem 0;
  clear: both;
}

.photo-cards > .photo-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  text-align: center;
}

.photo-cards > .photo-card p {
  margin: 0;
  line-height: 1.5;
}

.photo-cards > .photo-card img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0 0 0.75rem !important;
  border-radius: var(--radius-md, 6px);
}

.photo-cards > .photo-card h3 {
  font-size: var(--font-size-18, 1.125rem);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.photo-cards > .photo-card h3 a {
  font-weight: var(--font-weight-bold, 700);
}

/* The image links duplicate the title link, so drop basic-page.css's
   new-tab "↗" glyph from them — it otherwise renders as a stray arrow on
   its own line under the photo. Title links keep it. */
.photo-cards > .photo-card a:has(img)::after {
  content: none !important;
}