/**
 * @file
 * Publication Preview Component
 *
 * Editorial grid of preview images (sample pages, illustrations, etc.).
 * Shadow-based cards. Image sits flush with the card bottom (no gap).
 *
 * USAGE:
 *   <div class="publication-preview">
 *     <figure class="publication-preview__item">
 *       <a href="/images/full.jpg">
 *         <img src="/images/thumb.jpg" alt="…" loading="lazy">
 *       </a>
 *       <figcaption>Short caption.</figcaption>
 *     </figure>
 *     … more figures …
 *   </div>
 */

.publication-preview {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.publication-preview__item { margin: 0; }

.publication-preview__item a {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg, 1rem);
    background: var(--color-surface-base);
    box-shadow: var(--card-shadow-base);
    transition: var(--card-transition);
    /* Kill any inline baseline gap below the image — the anchor's
       intrinsic line-height would otherwise show as a thin sliver
       between the image and the box edge. */
    line-height: 0;
    font-size: 0;
}

.publication-preview__item a:hover {
    transform: translateY(var(--card-lift-y, -4px));
    box-shadow: var(--card-shadow-hover);
}

.publication-preview__item img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.publication-preview__item a:hover img { transform: scale(1.03); }

.publication-preview__item figcaption {
    margin: 1rem 0 0;
    font-family: var(--font-family-base, inherit);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-align: center;
}

@media (max-width: 768px) {
    .publication-preview { grid-template-columns: 1fr; }
}