/**
 * CARD-STYLES.CSS
 * Variants for preview + related cards.
 */

/* ============================
   Global - Altura máxima de preview
   ============================ */

.article-card__thumbnail img {
  max-height: var(--preview-image-max-height, none);
  width: 100%;
  object-fit: cover;
}

.article-card--feature .article-card__thumbnail img,
.article-card--feature .feature__image img {
  max-height: var(--feature-image-max-height, var(--preview-image-max-height, none));
}

/* ============================
   Pulp (spacing refinements)
   ============================ */

[data-card-style="pulp"] .article-card--story > :not(.article-card__thumbnail) {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

[data-card-style="pulp"] .article-card--story > .article-card__section {
  padding-top: var(--space-sm);
}

[data-card-style="pulp"] .article-card__section {
  margin-left: var(--space-sm);
}

[data-card-style="pulp"] .article-card__section--pulp.article-card__section--pill {
  padding: 0.1rem 0.45rem 0.1rem 0.9em;
  margin-left: var(--space-sm);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

[data-card-style="pulp"] .article-card__section--pulp.article-card__section--pill::before {
  top: 2px;
  bottom: 2px;
}

[data-card-style="pulp"] .article-card--feature .article-card__section--pulp.article-card__section--pill {
  padding: 0.15rem 0.55rem 0.15rem 0.95em;
  margin-left: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

[data-card-style="pulp"] .article-card--feature .article-card__section--pulp.article-card__section--pill::before {
  top: 2px;
  bottom: 2px;
}

[data-card-style="pulp"] .article-card--story > .article-card__meta,
[data-card-style="pulp"] .article-card--story > .separator--pulp {
  padding-bottom: var(--space-sm);
}

[data-card-style="pulp"] .article-card--feature .article-card__content {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* ============================
   Modern (soft, clean)
   ============================ */

[data-card-style="modern"] .article-card--story,
[data-card-style="modern"] .article-card--feature {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-md);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
}

[data-card-style="modern"] .article-card--feature {
  background: var(--card-feature-bg, var(--card-bg));
}

[data-card-style="modern"] .article-card--story .article-card__thumbnail,
[data-card-style="modern"] .article-card--feature .article-card__thumbnail,
[data-card-style="modern"] .feature__image {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}

[data-card-style="modern"] .article-card--story .article-card__thumbnail img,
[data-card-style="modern"] .article-card--feature .article-card__thumbnail img,
[data-card-style="modern"] .feature__image img {
  border: none;
  box-shadow: none;
  filter: none;
  transform: none;
  border-radius: 12px;
  transition: transform 0.3s ease, opacity var(--transition-base);
}

[data-card-style="modern"] .article-card--story:hover .article-card__thumbnail img,
[data-card-style="modern"] .article-card--feature:hover .article-card__thumbnail img {
  transform: scale(1.02);
}

[data-card-style="modern"] .carousel-item__link {
  background: var(--related-card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

[data-card-style="modern"] .carousel-item__image {
  background: transparent;
}

[data-card-style="modern"] .carousel-item__image img {
  border-bottom: none;
  border-radius: 14px 14px 0 0;
}

/* ============================
   Elegant (refined)
   ============================ */

[data-card-style="elegant"] .article-card--story,
[data-card-style="elegant"] .article-card--feature {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--card-bg) 92%, var(--surface)) 0%,
    var(--card-bg) 100%
  );
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 20px;
  padding: var(--space-lg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

[data-card-style="elegant"] .article-card--feature {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--card-feature-bg, var(--card-bg)) 92%, var(--surface)) 0%,
    var(--card-feature-bg, var(--card-bg)) 100%
  );
}

[data-card-style="elegant"] .article-card--story .article-card__thumbnail,
[data-card-style="elegant"] .article-card--feature .article-card__thumbnail,
[data-card-style="elegant"] .feature__image {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}

[data-card-style="elegant"] .article-card--story .article-card__thumbnail img,
[data-card-style="elegant"] .article-card--feature .article-card__thumbnail img,
[data-card-style="elegant"] .feature__image img {
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
  filter: none;
  transform: none;
  border-radius: 16px;
}

[data-card-style="elegant"] .carousel-item__link {
  background: var(--related-card-bg);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 20px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
}

[data-card-style="elegant"] .carousel-item__image {
  background: transparent;
}

[data-card-style="elegant"] .carousel-item__image img {
  border-bottom: none;
  border-radius: 18px 18px 0 0;
}

/* ============================
   Poster (image attached)
   ============================ */

[data-card-style="poster"] .article-card--story,
[data-card-style="poster"] .article-card--feature {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

[data-card-style="poster"] .article-card--feature {
  background: var(--card-feature-bg, var(--card-bg));
}

[data-card-style="poster"] .article-card--story .article-card__thumbnail,
[data-card-style="poster"] .article-card--feature .article-card__thumbnail,
[data-card-style="poster"] .feature__image {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-2);
}

[data-card-style="poster"] .article-card--story .article-card__thumbnail img,
[data-card-style="poster"] .article-card--feature .article-card__thumbnail img,
[data-card-style="poster"] .feature__image img {
  border: none;
  box-shadow: none;
  filter: none;
  transform: none;
  border-radius: 0;
}

[data-card-style="poster"] .article-card--story > :not(.article-card__thumbnail) {
  padding: var(--space-md);
}

[data-card-style="poster"] .article-card--feature .article-card__content {
  padding: var(--space-md);
}

[data-card-style="poster"] .article-card__section {
  margin-left: var(--space-sm);
}

[data-card-style="poster"] .article-card--story .article-card__section {
  margin-top: var(--space-sm);
  margin-bottom: 0.2rem;
}

[data-card-style="poster"] .article-card--story .article-card__title {
  margin-top: 0;
  margin-bottom: 0.1rem !important;
}

[data-card-style="poster"] .article-card--story .article-card__excerpt {
  margin-top: 0;
  padding-top: 0;
}

[data-card-style="poster"] .article-card--story .article-card__excerpt p,
[data-card-style="poster"] .article-card--story .article-card__excerpt div,
[data-card-style="poster"] .article-card--story .article-card__excerpt span {
  margin-top: 0;
  margin-bottom: 0;
}

[data-card-style="poster"] .article-card__section--pulp.article-card__section--pill {
  padding: 0.1rem 0.5rem 0.1rem 1rem;
  margin-left: var(--space-sm);
}

[data-card-style="poster"] .article-card__section--pulp.article-card__section--pill::before {
  top: 2px;
  bottom: 2px;
}

[data-card-style="poster"] .article-card--feature .article-card__section--pulp.article-card__section--pill {
  padding: 0.15rem 0.55rem 0.15rem 0.95em;
  margin-left: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

[data-card-style="poster"] .article-card--feature .article-card__section--pulp.article-card__section--pill::before {
  top: 2px;
  bottom: 2px;
}

[data-card-style="poster"] .carousel-item__link {
  background: var(--related-card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

[data-card-style="poster"] .carousel-item__image {
  background: transparent;
}

[data-card-style="poster"] .carousel-item__image img {
  border-bottom: none;
  border-radius: 0;
}

/* ============================
   Blend (no background/border)
   ============================ */

[data-card-style="blend"] .article-card--story,
[data-card-style="blend"] .article-card--feature {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-card-style="blend"] .article-card--story {
  padding: 0 0 var(--space-md);
}

[data-card-style="blend"] .article-card--feature {
  padding: 0;
}

[data-card-style="blend"] .article-card--story .article-card__thumbnail,
[data-card-style="blend"] .article-card--feature .article-card__thumbnail,
[data-card-style="blend"] .feature__image {
  margin: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

[data-card-style="blend"] .article-card--story .article-card__thumbnail img,
[data-card-style="blend"] .article-card--feature .article-card__thumbnail img,
[data-card-style="blend"] .feature__image img {
  border: none;
  box-shadow: none;
  filter: none;
  transform: none;
  border-radius: 8px;
}

[data-card-style="blend"] .carousel-item__link {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-card-style="blend"] .carousel-item__image {
  background: transparent;
}

[data-card-style="blend"] .carousel-item__image img {
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

/* Hide pulp separators for non-pulp styles */
[data-card-style="modern"] .article-card--story .separator--pulp,
[data-card-style="elegant"] .article-card--story .separator--pulp,
[data-card-style="poster"] .article-card--story .separator--pulp,
[data-card-style="blend"] .article-card--story .separator--pulp {
  display: none;
}