/**
 * Recommended Reading Component
 * Extends navigation-card styling with customizations for post cards
 *
 * @package LearningByHart
 * @since 2.0.0
 */

/* ==========================================================================
   Recommended Reading Section
   ========================================================================== */

.recommended-reading-section {
  margin: var(--space-3xl) 0;
  clear: both; /* Prevent content from wrapping alongside cards */
}

.recommended-reading-section h3 {
  text-align: center;
  margin-bottom: var(--space-2xl);
  font-family: var(--font-serif);
  color: var(--color-primary);
}

/* Grid container uses text-align: center (set in navigation-cards.css) */
.recommended-reading-grid {
  /* No float clearing needed - cards are inline-block */
  margin-bottom: var(--space-2xl);
}

/* ==========================================================================
   Recommended Reading Card Customizations
   Extends .card--navigation with post-specific styling
   ========================================================================== */

/* Thumbnail for post images - smaller to accommodate two-line titles */
.recommended-reading-card .card--navigation__thumbnail {
  width: 75%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.recommended-reading-card .card--navigation__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.recommended-reading-card:hover .card--navigation__thumbnail {
  box-shadow: var(--shadow-md);
}

.recommended-reading-card:hover .card--navigation__thumbnail img {
  transform: scale(1.05);
}

/* Center align excerpt and title, hide the arrow button */
.recommended-reading-card .is-style-excerpt {
  text-align: center;
  margin-bottom: 0;
}

.recommended-reading-card .card__arrow-link {
  display: none;
}

.recommended-reading-card .card--navigation__content h5 {
  margin-bottom: var(--space-sm);
  text-align: center;
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .recommended-reading-section {
    display: none;
  }
}