/* ══════════════════════════════════════════════════════════════
 * Illusia Latest Widgets — Glass Surface Override
 *
 * Override visual CSS-only dos shortcodes "Latest" do Fictioneer.
 * Nenhum template PHP e sobrescrito — todo o markup permanece original.
 * Aplica Glass Surface (§7), tokens de design, tipografia
 * editorial e amber como acento unico (§1 Contencao).
 *
 * Shortcodes cobertos:
 *   [fictioneer_latest_stories]          — default, compact, list
 *   [fictioneer_latest_chapters]         — default, compact, list
 *   [fictioneer_latest_updates]          — default, compact, list
 *   [fictioneer_latest_recommendations]  — default, compact
 *   [fictioneer_latest_posts]            — default
 *
 * Secoes:
 *   1. Section Container
 *   2. Card Grid (default/compact base)
 *   3. Shimmer Line
 *   4. Card Typography
 *   5. Card Taxonomy Strip
 *   6. Card Footer
 *   7. Compact Overlay Infobox
 *   8. Compact Info Toggle
 *   9. Updates — Chapter Link List
 *  10. List Variant (.post-list-item)
 *  11. Latest Posts (article layout)
 *  12. Splide Integration
 *  13. No Results
 *  14. Light Mode
 *  15. Responsive
 *  16. Reduced Motion
 *
 * Tokens: bridge (--bg-* / --fg-*), glass (--glass-*),
 * border (--border-*), space (--space-*), type (--ff-*, --text-*),
 * motion (--t-*, --ease-*), radius (--r-*).
 *
 * @since 1.24.0
 * ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. SECTION CONTAINER
 *
 * Wrapper <section> de todos os shortcodes. Reset de margens
 * e gap uniforme entre cards.
 * ═══════════════════════════════════════════════════════════════ */

.latest-stories,
.latest-chapters,
.latest-updates,
.latest-recommendations,
.latest-posts {
  --_card-gap: var(--space-md);
}

/* Grid columns gap */
.latest-stories .grid-columns,
.latest-chapters .grid-columns,
.latest-updates .grid-columns,
.latest-recommendations .grid-columns {
  gap: var(--_card-gap);
}


/* ═══════════════════════════════════════════════════════════════
 * 2. CARD GRID — Glass Surface (default + compact)
 *
 * .card._small dentro de .small-card-block. Glass background,
 * amber border hover, shimmer line via ::before.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .card._small {
  background: linear-gradient(
    160deg,
    hsl(var(--bg-800-free) / .85) 0%,
    hsl(var(--bg-900-free) / .92) 100%
  );
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition:
    border-color var(--t-mid) var(--ease-std),
    box-shadow var(--t-mid) var(--ease-std),
    transform var(--t-mid) var(--ease-expo);
  animation: illusia-latest-in var(--t-slow) var(--ease-expo) both;
}

/* Staggered entry */
.small-card-block .card._small:nth-child(1) { animation-delay: 0ms; }
.small-card-block .card._small:nth-child(2) { animation-delay: 60ms; }
.small-card-block .card._small:nth-child(3) { animation-delay: 120ms; }
.small-card-block .card._small:nth-child(4) { animation-delay: 180ms; }
.small-card-block .card._small:nth-child(n+5) { animation-delay: 240ms; }

@keyframes illusia-latest-in {
  from { opacity: 0; transform: translateY(clamp(6px, 1vw, 12px)); }
  to   { opacity: 1; transform: none; }
}

/* Hover */
.small-card-block .card._small:hover {
  border-color: var(--border-amber);
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .06),
    0 clamp(6px, 1.5vw, 16px) clamp(16px, 4vw, 40px) hsl(var(--bg-950-free) / .45),
    0 0 clamp(20px, 4vw, 40px) hsl(var(--amber-free) / .03);
  transform: translateY(-1px);
}

/* Reset Fictioneer polygon clip and card frame leaks */
.small-card-block .card._small .card__body.polygon {
  clip-path: none;
}

:root:not(.minimal) .small-card-block .card._small {
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 3. SHIMMER LINE
 *
 * Amber gradient hairline no topo de cada card (Regra #10).
 * Fictioneer card-frame ::before is reset via matching specificity.
 * ═══════════════════════════════════════════════════════════════ */

:root:not(.minimal) .small-card-block .card._small::before,
.small-card-block .card._small::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  width: auto;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .15),
    transparent
  );
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
  transform: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. CARD TYPOGRAPHY
 *
 * Titulo: Playfair Display (--ff-display), link com amber hover.
 * Descricao: Syne (--ff-ui), cor fg-400.
 * Author: Fira Code mono, uppercase, fg-600.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .card__title._small {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: .01em;
}

.small-card-block .card__title._small a {
  color: var(--fg-100);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-std);
}

.small-card-block .card__title._small a:hover {
  color: var(--amber);
}

.small-card-block .card__content._small {
  font-family: var(--ff-ui);
  color: var(--fg-400);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.small-card-block .card__by-author {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-600);
}

/* "in Story" link dentro de chapter cards */
.small-card-block .card__in-story {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-700);
}

.small-card-block .bold-link {
  color: var(--amber);
  transition: color var(--t-fast) var(--ease-std);
}

.small-card-block .bold-link:hover {
  color: var(--fg-200);
}

/* Words on date (compact chapters) */
.small-card-block .card__words-on-date {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-600);
}


/* ═══════════════════════════════════════════════════════════════
 * 5. CARD TAXONOMY STRIP
 *
 * Tag pills horizontais com fade mask. As pills ja sao
 * estilizadas por illusia-badges.css — aqui so o container.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .card__tag-list._small {
  border-top: 1px solid var(--border-0);
  padding-top: var(--space-xs);
}

.small-card-block .card__h-scroll {
  mask-image: linear-gradient(to right, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent);
}

.small-card-block .card__no-taxonomies {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-800);
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ═══════════════════════════════════════════════════════════════
 * 6. CARD FOOTER
 *
 * Metadata mono com icones amber-dim. Rating badge com
 * estilo editorial. Separado do body por border sutil.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .card__footer._small {
  border-top: 1px solid var(--border-0);
  padding-top: var(--space-xs);
}

.small-card-block .card__footer-box._left {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-600);
  letter-spacing: .02em;
}

.small-card-block .card__footer-box._left .card-footer-icon {
  color: var(--amber-dim);
}

/* Status labels */
.small-card-block .card__footer-status._ongoing {
  color: var(--teal);
}

.small-card-block .card__footer-status._completed {
  color: var(--sage);
}

.small-card-block .card__footer-status._hiatus {
  color: var(--amber);
}

.small-card-block .card__footer-status._oneshot {
  color: var(--violet);
}

.small-card-block .card__footer-status._canceled {
  color: var(--crimson);
}

/* Rating letter badge */
.small-card-block .rating-letter-label {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: .06em;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-1);
  padding: var(--space-2xs) var(--space-xs);
}

.small-card-block .rating-letter-label._everyone {
  color: var(--sage);
  border-color: hsl(var(--sage-free) / .2);
}

.small-card-block .rating-letter-label._teen {
  color: var(--amber);
  border-color: hsl(var(--amber-free) / .2);
}

.small-card-block .rating-letter-label._mature {
  color: var(--crimson);
  border-color: hsl(var(--crimson-free) / .2);
}

.small-card-block .rating-letter-label._adult {
  color: var(--crimson);
  border-color: hsl(var(--crimson-free) / .25);
}


/* ═══════════════════════════════════════════════════════════════
 * 7. COMPACT OVERLAY INFOBOX
 *
 * Painel deslizante com taxonomias/excerpt. Glass bg escuro.
 * Ativado pelo Stimulus controller fictioneer-last-click.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .card__overlay-infobox {
  background: hsl(var(--bg-900-free) / .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-1);
}

.small-card-block .card__overlay-infobox .card__tag-list._small {
  border-top: none;
  padding-top: 0;
}

.small-card-block .card__overlay-infobox .card__footer._small {
  border-top: 1px solid var(--border-0);
}

/* Excerpt inside overlay (compact chapters/updates) */
.small-card-block .card__overlay-infobox._excerpt {
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  color: var(--fg-400);
  line-height: 1.5;
}

.small-card-block .card__excerpt strong {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--fg-200);
}

/* Overlay description (compact stories without terms) */
.small-card-block .card__overlay-description {
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  color: var(--fg-400);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
 * 8. COMPACT INFO TOGGLE
 *
 * Botao chevron no canto do card compact. Amber no hover.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .card__info-toggle {
  color: var(--fg-700);
  transition: color var(--t-fast) var(--ease-std);
}

.small-card-block .card__info-toggle:hover {
  color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════
 * 9. UPDATES — CHAPTER LINK LIST
 *
 * Lista numerada de capitulos recentes dentro do card de update.
 * Caret icon amber, metadata mono, dot separator amber-dim.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .card__link-list._small {
  border-top: 1px solid var(--border-0);
  padding-top: var(--space-2xs);
}

.small-card-block .card__link-list-item {
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid hsl(var(--bg-800-free) / .3);
  transition: background var(--t-fast) var(--ease-std);
}

.small-card-block .card__link-list-item:last-child {
  border-bottom: none;
}

.small-card-block .card__link-list-item:hover {
  background: hsl(var(--amber-free) / .04);
}

/* Caret icon */
.small-card-block .card__left .fa-caret-right {
  color: var(--amber-dim);
  transition: color var(--t-fast) var(--ease-std);
}

.small-card-block .card__link-list-item:hover .fa-caret-right {
  color: var(--amber);
}

/* Chapter title link */
.small-card-block .card__link-list-link {
  color: var(--fg-300);
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  transition: color var(--t-fast) var(--ease-std);
}

.small-card-block .card__link-list-link:hover {
  color: var(--amber);
}

/* Word count + date in right side */
.small-card-block .card__right {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-700);
  white-space: nowrap;
}

/* Dot separator */
.small-card-block .card__right .separator-dot {
  color: var(--amber-dim);
}


/* ═══════════════════════════════════════════════════════════════
 * 10. LIST VARIANT (.post-list-item)
 *
 * Variante "list" — items empilhados com thumbnail lateral.
 * Glass row com amber border hover, metadata mono.
 * ═══════════════════════════════════════════════════════════════ */

/* Container */
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Individual row */
.post-list-item {
  background: hsl(var(--bg-900-free) / .5);
  border: 1px solid var(--border-0);
  border-radius: var(--r-md);
  padding: var(--space-xs) var(--space-sm);
  transition:
    border-color var(--t-mid) var(--ease-std),
    background var(--t-mid) var(--ease-std);
  animation: illusia-latest-in var(--t-slow) var(--ease-expo) both;
}

/* Staggered entry for list items */
.post-list-item:nth-child(1) { animation-delay: 0ms; }
.post-list-item:nth-child(2) { animation-delay: 40ms; }
.post-list-item:nth-child(3) { animation-delay: 80ms; }
.post-list-item:nth-child(4) { animation-delay: 120ms; }
.post-list-item:nth-child(5) { animation-delay: 160ms; }
.post-list-item:nth-child(n+6) { animation-delay: 200ms; }

.post-list-item:hover {
  border-color: var(--border-amber);
  background: hsl(var(--bg-800-free) / .6);
}

/* Thumbnail in list */
.post-list-item__image {
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* Title link */
.post-list-item__title._link {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--fg-100);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-std);
}

.post-list-item__title._link:hover {
  color: var(--amber);
}

/* Meta row */
.post-list-item__meta {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-600);
  letter-spacing: .02em;
}

/* "in Story" link in chapter list */
.post-list-item__meta-in-story span {
  font-family: var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-700);
}

.post-list-item__meta-in-story a {
  color: var(--amber);
  transition: color var(--t-fast) var(--ease-std);
}

.post-list-item__meta-in-story a:hover {
  color: var(--fg-200);
}

/* Chapter link in updates list */
.post-list-item__meta-chapter {
  color: var(--fg-300);
  font-family: var(--ff-ui);
  transition: color var(--t-fast) var(--ease-std);
}

.post-list-item__meta-chapter:hover {
  color: var(--amber);
}

.post-list-item__meta-chapter .chapter-link-icon {
  color: var(--amber-dim);
}

/* Status colors */
.post-list-item__meta .post-item-item__meta-status._ongoing,
.post-list-item__meta .post-list-item__meta-status._ongoing {
  color: var(--teal);
}

.post-list-item__meta .post-item-item__meta-status._completed,
.post-list-item__meta .post-list-item__meta-status._completed {
  color: var(--sage);
}

.post-list-item__meta .post-item-item__meta-status._hiatus,
.post-list-item__meta .post-list-item__meta-status._hiatus {
  color: var(--amber);
}

.post-list-item__meta .post-item-item__meta-status._oneshot,
.post-list-item__meta .post-list-item__meta-status._oneshot {
  color: var(--violet);
}

.post-list-item__meta .post-item-item__meta-status._canceled,
.post-list-item__meta .post-list-item__meta-status._canceled {
  color: var(--crimson);
}

/* Rating colors */
.post-list-item__meta .post-item-item__meta-rating._everyone,
.post-list-item__meta .post-list-item__meta-rating._everyone {
  color: var(--sage);
}

.post-list-item__meta .post-item-item__meta-rating._teen,
.post-list-item__meta .post-list-item__meta-rating._teen {
  color: var(--amber);
}

.post-list-item__meta .post-item-item__meta-rating._mature,
.post-list-item__meta .post-list-item__meta-rating._mature {
  color: var(--crimson);
}

.post-list-item__meta .post-item-item__meta-rating._adult,
.post-list-item__meta .post-list-item__meta-rating._adult {
  color: var(--crimson);
}

/* Date floating right */
.post-list-item__meta ._floating-right {
  color: var(--fg-700);
}

/* Taxonomy strip in list */
.post-list-item__tax {
  font-size: var(--text-2xs);
  mask-image: linear-gradient(to right, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
}

/* Author link */
.post-list-item__meta-author,
.post-item-item__meta-author {
  color: var(--fg-500);
}


/* ═══════════════════════════════════════════════════════════════
 * 11. LATEST POSTS (article layout)
 *
 * [fictioneer_latest_posts] renderiza <article class="post">.
 * Glass card com titulo Playfair, metadata mono, excerpt Syne.
 * Estilo parcialmente coberto por illusia-blog.css — aqui
 * tratamos o contexto especifico do shortcode.
 * ═══════════════════════════════════════════════════════════════ */

.latest-posts .post {
  background: linear-gradient(
    160deg,
    hsl(var(--bg-800-free) / .85) 0%,
    hsl(var(--bg-900-free) / .92) 100%
  );
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--t-mid) var(--ease-std),
    box-shadow var(--t-mid) var(--ease-std);
}

/* Shimmer line */
.latest-posts .post::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .15),
    transparent
  );
  pointer-events: none;
}

.latest-posts .post:hover {
  border-color: var(--border-amber);
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .06),
    0 clamp(6px, 1.5vw, 16px) clamp(16px, 4vw, 40px) hsl(var(--bg-950-free) / .45);
}

.latest-posts .post + .post {
  margin-top: var(--space-md);
}

/* Title */
.latest-posts .post__title {
  font-family: var(--ff-display);
  font-weight: 700;
}

.latest-posts .post__title a {
  color: var(--fg-100);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-std);
}

.latest-posts .post__title a:hover {
  color: var(--amber);
}

/* Meta */
.latest-posts .post__meta {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-600);
}

/* Excerpt */
.latest-posts .post__excerpt {
  font-family: var(--ff-ui);
  color: var(--fg-400);
  line-height: 1.6;
}

/* Read more link */
.latest-posts .more-link {
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--amber);
  transition: color var(--t-fast) var(--ease-std);
}

.latest-posts .more-link:hover {
  color: var(--fg-200);
}


/* ═══════════════════════════════════════════════════════════════
 * 12. SPLIDE INTEGRATION
 *
 * Slider wrapper preserva glass treatment. Placeholders
 * com background sutil.
 * ═══════════════════════════════════════════════════════════════ */

.small-card-block .splide__track {
  border-radius: var(--r-xl);
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
 * 13. NO RESULTS
 *
 * Mensagem "Nothing to show" com estilo editorial.
 * ═══════════════════════════════════════════════════════════════ */

.latest-stories .no-results,
.latest-chapters .no-results,
.latest-updates .no-results,
.latest-recommendations .no-results,
.latest-posts .no-results {
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-800);
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border: 1px dashed var(--border-1);
  border-radius: var(--r-md);
}


/* ═══════════════════════════════════════════════════════════════
 * 14. LIGHT MODE
 *
 * Acentos -dim para contraste WCAG. Glass bg ajustado.
 * Border-base invertida. Opacidades aumentadas.
 * ═══════════════════════════════════════════════════════════════ */

[data-mode="light"] .small-card-block .card._small {
  background: linear-gradient(
    160deg,
    hsl(var(--bg-300-free) / .6) 0%,
    hsl(var(--bg-200-free) / .5) 100%
  );
  border-color: var(--border-1);
}

[data-mode="light"] .small-card-block .card._small:hover {
  border-color: var(--border-amber);
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .08),
    0 4px 16px hsl(var(--bg-950-free) / .08);
}

/* Shimmer line — more opaque in light */
[data-mode="light"] .small-card-block .card._small::before {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .25),
    transparent
  );
}

/* Status colors use -dim for WCAG */
[data-mode="light"] .small-card-block .card__footer-status._ongoing {
  color: var(--teal-dim);
}

[data-mode="light"] .small-card-block .card__footer-status._completed {
  color: var(--sage-dim);
}

[data-mode="light"] .small-card-block .card__footer-status._hiatus {
  color: var(--amber-dim);
}

[data-mode="light"] .small-card-block .card__footer-status._oneshot {
  color: var(--violet-dim);
}

[data-mode="light"] .small-card-block .card__footer-status._canceled {
  color: var(--crimson-dim);
}

/* Rating badges — dim variants */
[data-mode="light"] .small-card-block .rating-letter-label._everyone {
  color: var(--sage-dim);
  border-color: hsl(var(--sage-free) / .3);
}

[data-mode="light"] .small-card-block .rating-letter-label._teen {
  color: var(--amber-dim);
  border-color: hsl(var(--amber-free) / .3);
}

[data-mode="light"] .small-card-block .rating-letter-label._mature,
[data-mode="light"] .small-card-block .rating-letter-label._adult {
  color: var(--crimson-dim);
  border-color: hsl(var(--crimson-free) / .3);
}

/* Compact overlay */
[data-mode="light"] .small-card-block .card__overlay-infobox {
  background: hsl(var(--bg-200-free) / .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Link list items */
[data-mode="light"] .small-card-block .card__link-list-item:hover {
  background: hsl(var(--amber-free) / .06);
}

/* List variant */
[data-mode="light"] .post-list-item {
  background: hsl(var(--bg-200-free) / .35);
  border-color: var(--border-1);
}

[data-mode="light"] .post-list-item:hover {
  border-color: var(--border-amber);
  background: hsl(var(--bg-300-free) / .4);
}

/* List status — dim */
[data-mode="light"] .post-list-item__meta .post-item-item__meta-status._ongoing,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-status._ongoing {
  color: var(--teal-dim);
}

[data-mode="light"] .post-list-item__meta .post-item-item__meta-status._completed,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-status._completed {
  color: var(--sage-dim);
}

[data-mode="light"] .post-list-item__meta .post-item-item__meta-status._hiatus,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-status._hiatus {
  color: var(--amber-dim);
}

[data-mode="light"] .post-list-item__meta .post-item-item__meta-status._oneshot,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-status._oneshot {
  color: var(--violet-dim);
}

[data-mode="light"] .post-list-item__meta .post-item-item__meta-status._canceled,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-status._canceled {
  color: var(--crimson-dim);
}

/* List rating — dim */
[data-mode="light"] .post-list-item__meta .post-item-item__meta-rating._everyone,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-rating._everyone {
  color: var(--sage-dim);
}

[data-mode="light"] .post-list-item__meta .post-item-item__meta-rating._teen,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-rating._teen {
  color: var(--amber-dim);
}

[data-mode="light"] .post-list-item__meta .post-item-item__meta-rating._mature,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-rating._mature,
[data-mode="light"] .post-list-item__meta .post-item-item__meta-rating._adult,
[data-mode="light"] .post-list-item__meta .post-list-item__meta-rating._adult {
  color: var(--crimson-dim);
}

/* Latest posts */
[data-mode="light"] .latest-posts .post {
  background: linear-gradient(
    160deg,
    hsl(var(--bg-300-free) / .6) 0%,
    hsl(var(--bg-200-free) / .5) 100%
  );
}

[data-mode="light"] .latest-posts .post:hover {
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .08),
    0 4px 16px hsl(var(--bg-950-free) / .08);
}

[data-mode="light"] .latest-posts .post::before {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .25),
    transparent
  );
}


/* ═══════════════════════════════════════════════════════════════
 * 15. RESPONSIVE
 *
 * Ajustes de spacing e layout para mobile.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .latest-posts .post {
    padding: var(--space-md);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 16. REDUCED MOTION
 *
 * Remove animacoes de entrada e transicoes de transform.
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .small-card-block .card._small,
  .post-list-item {
    animation: none;
  }

  .small-card-block .card._small:hover {
    transform: none;
  }
}