/* ============================================
   CARD COMPONENTS
   ============================================ */

/* Base Card Styles */
.card.post-card,
article.card.post-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slower), transform var(--transition-slower);
  display: flex;
  flex-direction: column;
  background: var(--white);
  position: relative;
  margin-bottom: 30px;
}

.card.post-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Card Link Overlay */
.card-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-decoration: none;
}

.card.post-card a:not(.card-link-overlay) {
  position: relative;
  z-index: 2;
}

/* Image Wrappers */
.card.post-card .featured-card-image-wrapper,
.card.post-card .grid-card-image-wrapper {
  position: relative;
  width: calc(100% - 32px);
  margin: 16px 16px 0 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  display: block;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Mobile: Keep margins and rounded corners for card images */
@media (max-width: 768px) {
  /* Images maintain 16px margins and rounded corners on mobile */
  /* Default styles from lines 40-57 apply - no override needed */
}

/* List card image link - different margins for flex layout */
.card.post-card .list-card-image-link {
  position: relative;
  width: 100%;
  margin: 16px 0 16px 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  display: block;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Card Body - Default padding for all cards */
.card.post-card .card-body {
  padding: 28px !important;
}

/* Ensure card has proper spacing and visual separation */
.card.post-card .row {
  margin: 0;
}

.card.post-card .row > [class*="col-"] {
  padding: 0;
}

/* Ensure proper spacing between card elements */
.card.post-card .card-body > *:last-child {
  margin-bottom: 0;
}

/* Featured Card */
.featured-card .card-body {
  padding: 24px !important;
}

.card.post-card .featured-card-image-wrapper {
  padding-bottom: 48%;
  height: 0;
}

/* Grid Card */
.grid-card .card-body {
  padding: 20px !important;
}

.card.post-card .grid-card-image-wrapper {
  padding-bottom: 48%;
  height: 0;
}

/* List Card */

.list-card-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.list-card-image-section {
  flex: 0 0 auto;
}

.list-card-image-link {
  display: block;
  text-decoration: none;
}

.list-card-text-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.list-card .card-body {
  padding: 16px 20px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

/* List card title spacing */
.list-card .card-body h3 {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* List card meta spacing */
.list-card .card-body .card-meta {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

/* List card paragraph - flex to fill space */
.list-card .card-body p {
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-bottom: 0.75rem;
  min-height: 0;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* List card read article link - always at bottom */
.list-card .card-body > a[aria-label="Read Article"] {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: 0;
}

/* Add padding to list layout card body */
.card.post-card .card-body.pt-lg-0 {
  padding-top: 24px !important;
}

/* Card Typography */
.post-title,
.card.post-card .card-body h3,
.card.post-card .card-body h3 a,
.card.post-card h3,
.card.post-card h3 a,
.card.post-card .card-body .post-title,
.card.post-card .card-body .post-title a {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  color: #333;
  text-decoration: none;
  max-height: none !important;
}

.post-title:hover,
.card.post-card .card-body h3 a:hover,
.card.post-card h3 a:hover,
.card.post-card .card-body .post-title a:hover {
  color: var(--buzz-red);
}

.card.post-card .card-body h3 {
  margin-bottom: 12px;
}

.card-meta,
.card.post-card .card-meta {
  font-size: 16px !important;
  color: #666;
  margin-top: 12px;
  margin-bottom: 16px;
}

.card.post-card .card-meta *,
.card.post-card .card-meta li,
.card.post-card .card-meta span,
.card-meta *,
.card-meta li,
.card-meta span {
  font-size: 16px !important;
}

.card.post-card .card-body .card-meta {
  margin-top: 0;
  margin-bottom: 16px;
}

.card-meta-author,
.card.post-card .card-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #666;
  font-size: 16px !important;
}

.card.post-card .card-meta-author span,
.card.post-card .card-meta-author a,
.card-meta-author span,
.card-meta-author a {
  font-size: 16px !important;
}

.card-meta-author:hover {
  color: var(--buzz-red);
}

.card-meta-author img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.card.post-card .card-body p,
.card.post-card .card-body p *,
.card.post-card p,
.card.post-card p *,
.card-body p {
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #555 !important;
  margin-bottom: 16px !important;
  font-weight: 400 !important;
}

/* Ensure all text in cards is at least 16px */
.card.post-card .card-body * {
  font-size: inherit;
}

.card.post-card .card-body small,
.card.post-card .card-body .small {
  font-size: 16px !important;
}

.card.post-card a[aria-label="Read Article"],
.card-body > a[aria-label="Read Article"] {
  font-size: 18px;
  font-weight: 600;
  color: var(--buzz-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card.post-card a[aria-label="Read Article"]:hover,
.card-body > a[aria-label="Read Article"]:hover {
  color: var(--buzz-red-dark);
  gap: 12px;
  transform: translateX(2px);
  text-decoration: none;
}

.card.post-card a[aria-label="Read Article"]:active,
.card-body > a[aria-label="Read Article"]:active {
  color: var(--buzz-red-darker);
  transform: translateX(1px);
  gap: 10px;
}

.card.post-card a[aria-label="Read Article"] i,
.card-body > a[aria-label="Read Article"] i {
  font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card.post-card a[aria-label="Read Article"]:hover i,
.card-body > a[aria-label="Read Article"]:hover i {
  transform: translateX(4px);
}

/* Blog Post Cover Image */
.blog-post-cover-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  object-fit: cover;
}