/* ==========================================================================
   POST LAYOUTS - SISTEMA MODULAR CON CLASES BASE
   ========================================================================== */

/* ---------------------------------------------------------------------------
   CONFIGURACIÓN: Bootstrap Container Queries
   --------------------------------------------------------------------------- */

/* IMPORTANTE: Añadir esto después de importar Bootstrap */
.col, 
[class*="col-"] {
  container-type: inline-size;
  container-name: post-container;
}

/* ---------------------------------------------------------------------------
   VARIABLES: Sistema de diseño unificado (BOOTSTRAP BREAKPOINTS)
   
   Bootstrap 5 Breakpoints:
   - XS: <576px (móviles pequeños)
   - SM: ≥576px (móviles grandes)
   - MD: ≥768px (tablets)
   - LG: ≥992px (laptops)
   - XL: ≥1200px (desktops)
   - XXL: ≥1400px (pantallas grandes)
   --------------------------------------------------------------------------- */

:root {
  /* Espaciado modular */
  --post-spacing-xs: var(--space-xs);
  --post-spacing-sm: 0.75rem;
  --post-spacing-md: var(--space-sm);
  --post-spacing-lg: 1.5rem;
  --post-spacing-xl: var(--space-md);
  --post-spacing-2xl: 2.5rem;
  --post-spacing-3xl: var(--space-lg);
  
  /* =========================================================================
     TAMAÑOS DE FUENTE: SISTEMA FLUIDO CON BREAKPOINTS
     ========================================================================= */
  
  /* --- NIVEL 1: HERO (Títulos principales) --- */
  /* XS (<576px): Base 1.5rem, crece fluido */
  --fs-hero: calc(1.5rem + 1.2vw);
  
  /* --- NIVEL 2: FEATURED (Títulos destacados) --- */
  /* XS (<576px): Base 1.3rem, crece fluido */
  --fs-featured: calc(1.3rem + 1vw);
  
  /* --- NIVEL 3: LARGE (Títulos grandes) --- */
  /* XS (<576px): Base 1.15rem, crece fluido */
  --fs-large: calc(1.15rem + 0.7vw);
  
  /* --- NIVEL 4: MEDIUM (Títulos medianos) --- */
  /* XS (<576px): Base 1.05rem, crece fluido */
  --fs-medium: calc(1.05rem + 0.5vw);
  
  /* --- NIVEL 5: SMALL (Títulos pequeños) --- */
  /* XS (<576px): Base 0.95rem, crece fluido */
  --fs-small: calc(0.95rem + 0.3vw);
  
  /* --- NIVEL 6: TINY (Títulos muy pequeños) --- */
  /* XS (<576px): Base 0.85rem, crece fluido */
  --fs-tiny: calc(0.85rem + 0.2vw);
  
  /* --- CATEGORÍAS --- */
  --fs-category-large: 0.75rem;
  --fs-category-medium: 0.7rem;
  --fs-category-small: 0.65rem;
  
  /* --- EXTRACTOS --- */
  --fs-excerpt-large: 0.9rem;
  --fs-excerpt-medium: 0.85rem;
  --fs-excerpt-small: 0.75rem;
  
  /* --- METADATA --- */
  --fs-meta-large: 0.7rem;
  --fs-meta-medium: 0.65rem;
  --fs-meta-small: 0.6rem;
  
  /* Tamaños de imagen lateral */
  --image-side-width: 70px;
  --image-grid-width: 80px;
  
  /* Efectos hover */
  --hover-elevation: -4px;
  --hover-lateral: 4px;
}

/* ---------------------------------------------------------------------------
   SM: ≥576px (Móviles grandes / Móvil horizontal)
   --------------------------------------------------------------------------- */
@media (min-width: 576px) {
  :root {
    /* Títulos principales */
    --fs-hero: calc(1.6rem + 1.3vw);
    --fs-featured: calc(1.4rem + 1.1vw);
    --fs-large: calc(1.2rem + 0.75vw);
    --fs-medium: calc(1.1rem + 0.5vw);
    --fs-small: calc(1rem + 0.35vw);
    --fs-tiny: calc(0.9rem + 0.25vw);
    
    /* Elementos pequeños */
    --fs-category-large: 0.8rem;
    --fs-category-medium: 0.75rem;
    --fs-excerpt-large: 0.95rem;
    --fs-excerpt-medium: 0.9rem;
    --fs-meta-large: 0.7rem;
    
    /* Imágenes */
    --image-side-width: 80px;
    --image-grid-width: 90px;
  }
}

/* ---------------------------------------------------------------------------
   MD: ≥768px (Tablets)
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    /* Títulos principales */
    --fs-hero: calc(1.75rem + 1.4vw);
    --fs-featured: calc(1.5rem + 1.15vw);
    --fs-large: calc(1.3rem + 0.8vw);
    --fs-medium: calc(1.15rem + 0.55vw);
    --fs-small: calc(1.05rem + 0.4vw);
    --fs-tiny: calc(0.95rem + 0.3vw);
    
    /* Elementos pequeños */
    --fs-category-large: 0.85rem;
    --fs-category-medium: 0.75rem;
    --fs-excerpt-large: 1rem;
    --fs-excerpt-medium: 0.9rem;
    --fs-meta-large: 0.75rem;
    --fs-meta-medium: 0.7rem;
    
    /* Imágenes */
    --image-side-width: 100px;
    --image-grid-width: 110px;
  }
}

/* ---------------------------------------------------------------------------
   LG: ≥992px (Laptops)
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
  :root {
    /* Títulos principales */
    --fs-hero: calc(1.9rem + 1.5vw);
    --fs-featured: calc(1.65rem + 1.2vw);
    --fs-large: calc(1.4rem + 0.85vw);
    --fs-medium: calc(1.25rem + 0.6vw);
    --fs-small: calc(1.1rem + 0.45vw);
    --fs-tiny: calc(1rem + 0.35vw);
    
    /* Elementos pequeños */
    --fs-category-large: 0.9rem;
    --fs-category-medium: 0.8rem;
    --fs-excerpt-large: 1.05rem;
    --fs-excerpt-medium: 0.95rem;
    --fs-meta-large: 0.75rem;
    
    /* Imágenes */
    --image-side-width: 120px;
    --image-grid-width: 130px;
  }
}

/* ---------------------------------------------------------------------------
   XL: ≥1200px (Desktops) - TAMAÑOS FIJOS
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  :root {
    /* Títulos principales - FIJOS */
    --fs-hero: 2.75rem;
    --fs-featured: 2.25rem;
    --fs-large: 1.85rem;
    --fs-medium: 1.5rem;
    --fs-small: 1.25rem;
    --fs-tiny: 1.1rem;
    
    /* Elementos pequeños */
    --fs-category-large: 0.95rem;
    --fs-category-medium: 0.85rem;
    --fs-category-small: 0.75rem;
    --fs-excerpt-large: 1.1rem;
    --fs-excerpt-medium: 1rem;
    --fs-excerpt-small: 0.85rem;
    --fs-meta-large: 0.8rem;
    --fs-meta-medium: 0.75rem;
    --fs-meta-small: 0.7rem;
    
    /* Imágenes */
    --image-side-width: 140px;
    --image-grid-width: 150px;
  }
}

/* ---------------------------------------------------------------------------
   XXL: ≥1400px (Pantallas grandes) - TAMAÑOS AUMENTADOS
   --------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  :root {
    /* Títulos principales - AUMENTADOS */
    --fs-hero: 3.25rem;
    --fs-featured: 2.5rem;
    --fs-large: 2rem;
    --fs-medium: 1.65rem;
    --fs-small: 1.35rem;
    --fs-tiny: 1.15rem;
    
    /* Elementos pequeños */
    --fs-category-large: 1rem;
    --fs-excerpt-large: 1.15rem;
    --fs-excerpt-medium: 1.05rem;
    --fs-meta-large: 0.85rem;
    
    /* Imágenes */
    --image-side-width: 160px;
    --image-grid-width: 170px;
  }
}

/* ---------------------------------------------------------------------------
   CLASES BASE: Componentes reutilizables
   --------------------------------------------------------------------------- */

/* Contenedores de layout */
.posts-layout-container,
.posts-layout-cards,
.posts-layout-main-side,
.posts-layout-featured-list,
.posts-layout-events-list,
.posts-layout-index,
.posts-layout-hero-grid,
.posts-layout-duo-grid,
.posts-layout-hero-stack {
  margin-bottom: var(--post-spacing-3xl);
  container-type: inline-size;
}

/* Contenedor base de post */
.post-card,
.post-list-item,
.post-grid-item,
.post-grid-small,
.post-duo-item,
.post-hero-stack {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Link que cubre toda la card */
.post-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   IMÁGENES: Componentes base
   --------------------------------------------------------------------------- */

.post-image {
  position: relative;
  overflow: hidden;
  z-index: 10;
}

/* Imágenes con margen inferior */
.post-card-image,
.post-list-image,
.post-duo-item-image,
.post-grid-small-image,
.post-hero-stack-image {
  margin-bottom: var(--post-spacing-md);
}

.post-main-image,
.post-duo-item-image,
.post-hero-stack-image {
  margin-bottom: var(--post-spacing-lg);
}

/* Imágenes laterales con ancho fijo */
.post-side-image,
.post-stack-horizontal .post-stack-item-image {
  flex-shrink: 0;
  width: var(--image-side-width);
}

/* Imágenes de altura completa */
.post-index-image {
  height: 100%;
}

/* ---------------------------------------------------------------------------
   ÁREAS DE CONTENIDO: Clases base
   --------------------------------------------------------------------------- */

.post-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Contenido con crecimiento */
.post-card-content,
.post-list-content,
.post-side-content,
.post-stack-horizontal .post-stack-item-content,
.post-duo-item-content,
.post-grid-small-content,
.post-hero-stack-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Padding específico por tipo */
.post-card-content {
  padding: 0 var(--post-spacing-xs);
}

.post-content--up {
  margin: -11.5rem 1rem 0;
  padding: 2rem 3rem 0 !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: var(--color-white);
}

.post-list-content,
.post-featured-content {
  padding: var(--post-spacing-md);
}

.post-duo-item-content,
.post-hero-stack-content {
  padding: 0 var(--post-spacing-md) var(--post-spacing-md);
}

.post-grid-small-content {
  padding: 0 var(--post-spacing-sm) var(--post-spacing-sm);
}

.post-hero-grid-content {
  position: relative;
  z-index: 1;
  padding: var(--post-spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.post-stack-vertical .post-stack-item-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--post-spacing-xs);
}

/* ---------------------------------------------------------------------------
   CATEGORÍAS: Sistema base con modificadores
   --------------------------------------------------------------------------- */

.post-category {
  text-transform: uppercase;
  font-weight: 700;
  z-index: 10;
  position: relative;
  margin-bottom: var(--post-spacing-xs);
}

/* Tamaños de categorías */
.post-category--small,
.post-grid-small-category,
.post-stack-item-category {
  font-size: var(--fs-category-small);
}

.post-category--medium,
.post-card-category,
.post-list-category,
.post-side-category,
.post-grid-item-category {
  font-size: var(--fs-category-medium);
}

.post-category--large,
.post-main-category,
.post-index-category,
.post-featured-category,
.post-hero-grid-category,
.post-duo-item-category,
.post-hero-stack-category {
  font-size: var(--fs-category-large);
}

/* Links de categorías */
.post-category a,
.post-card-category a,
.post-list-category a,
.post-side-category a,
.post-main-category a,
.post-index-category a,
.post-featured-category a,
.post-hero-grid-category a,
.post-grid-item-category a,
.post-duo-item-category a,
.post-grid-small-category a,
.post-hero-stack-category a,
.post-stack-item-category a {
  color: var(--color-secondary) !important;
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   TÍTULOS: Sistema base con modificadores de tamaño
   --------------------------------------------------------------------------- */

.post-title {
  font-weight: 400;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

/* Jerarquía de tamaños (Bootstrap breakpoints responsive) */

/* Nivel 1: Hero */
.post-title--hero {
  font-size: var(--fs-hero);
  line-height: 1.2;
  margin-bottom: var(--post-spacing-md);
}

/* Nivel 2: Featured */
.post-title--featured {
  font-size: var(--fs-featured);
  line-height: 1.2;
  margin-bottom: var(--post-spacing-md);
}

/* Nivel 3: Large */
.post-title--large {
  font-size: var(--fs-large);
  margin-bottom: var(--post-spacing-sm);
}

/* Nivel 4: Medium */
.post-title--medium {
  font-size: var(--fs-medium);
  margin-bottom: var(--post-spacing-sm);
}

/* Nivel 5: Small */
.post-title--small {
  font-size: var(--fs-small);
  margin-bottom: var(--post-spacing-xs);
  flex-grow: 1;
}

/* Links de títulos */
.post-title a {
  color: var(--color-black) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
}

.post-title a:hover {
  color: var(--color-accent) !important;
}

/* ---------------------------------------------------------------------------
   EXTRACTOS: Sistema base
   --------------------------------------------------------------------------- */

.post-excerpt {
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin-bottom: var(--post-spacing-xs);
}

/* Tamaños de extractos */
.post-excerpt--small,
.post-grid-small-excerpt {
  font-size: var(--fs-excerpt-small);
}

.post-excerpt--medium,
.post-card-excerpt,
.post-grid-item-excerpt,
.post-stack-item-excerpt {
  font-size: var(--fs-excerpt-medium);
}

.post-excerpt--large,
.post-main-excerpt,
.post-index-excerpt,
.post-featured-excerpt,
.post-hero-grid-excerpt,
.post-duo-item-excerpt,
.post-hero-stack-excerpt {
  font-size: var(--fs-excerpt-large);
  line-height: 1.6;
  margin-bottom: var(--post-spacing-md);
}

/* ---------------------------------------------------------------------------
   METADATA: Sistema base
   --------------------------------------------------------------------------- */

.post-meta {
  color: var(--color-gray);
}

/* Tamaños de metadata */
.post-meta--small,
.post-grid-small-meta {
  font-size: var(--fs-meta-small);
}

.post-meta--medium,
.post-list-meta,
.post-side-meta,
.post-grid-item-meta,
.post-stack-item-meta {
  font-size: var(--fs-meta-medium);
}

.post-meta--large,
.post-main-meta,
.post-index-meta,
.post-featured-meta,
.post-hero-grid-meta,
.post-duo-item-meta,
.post-hero-stack-meta {
  font-size: var(--fs-meta-large);
}

/* Comportamiento específico */
.post-list-meta,
.post-grid-item-meta,
.post-grid-small-meta {
  margin-top: auto;
}

.post-index-date {
  font-size: var(--font-sm);
  margin-top: var(--post-spacing-xs);
}

.post-index-author {
  float: left;
  margin-right: var(--post-spacing-md);
  margin-bottom: var(--post-spacing-xs);
}

.post-index-location {
  color: var(--color-black);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   EFECTOS HOVER: Elevación
   --------------------------------------------------------------------------- */

/* Elevación vertical */
.post-card:hover,
.post-list-item:hover,
.post-grid-item:hover,
.post-grid-small:hover,
.post-duo-item:hover,
.post-hero-stack:hover,
.post-stack-vertical:hover {
  transform: translateY(var(--hover-elevation));
}

/* Elevación lateral */
.post-side:hover,
.post-stack-horizontal:hover {
  transform: translateX(var(--hover-lateral));
}

/* ---------------------------------------------------------------------------
   EFECTOS HOVER: Zoom en imágenes
   --------------------------------------------------------------------------- */

.post-hero-grid:hover .img-container img,
.post-grid-item:hover .img-container img,
.post-duo-item:hover .img-container img,
.post-grid-small:hover .img-container img,
.post-hero-stack:hover .img-container img,
.post-stack-item:hover .img-container img {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Ajuste para landscape */
.post-hero-grid:hover .img-container-landscape img,
.post-grid-item:hover .img-container-landscape img {
  transform: translate(-50%, -45%) scale(1.08);
}

/* ---------------------------------------------------------------------------
   LAYOUT 2: MAIN-SIDE (Principal + Laterales)
   --------------------------------------------------------------------------- */

.post-main {
  position: relative;
  height: 100%;
  background-color: var(--color-white);
}

.posts-side-container {
  height: 100%;
}

.post-side {
  position: relative;
  background-color: var(--color-white);
  transition: transform var(--transition-base);
  border-bottom: var(--border-width) solid var(--border-color);
  padding-bottom: var(--post-spacing-md);
  margin-bottom: var(--post-spacing-md);
}

.post-side:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.post-side-inner {
  display: flex;
  gap: var(--post-spacing-md);
  align-items: flex-start;
}

/* ---------------------------------------------------------------------------
   LAYOUT 3: FEATURED-LIST (Destacado + Grid)
   --------------------------------------------------------------------------- */

.featured-post-wrapper {
  margin-bottom: var(--post-spacing-xl);
}

.post-featured {
  position: relative;
  background-color: var(--color-white);
  transition: box-shadow var(--transition-base);
}

.posts-list-grid {
  margin-top: var(--post-spacing-xl);
}

/* ---------------------------------------------------------------------------
   LAYOUT 4: INDEX (Listado con imagen lateral)
   --------------------------------------------------------------------------- */

.post-index-row {
  margin-bottom: var(--post-spacing-2xl);
  padding-bottom: var(--post-spacing-2xl);
  border-bottom: var(--border-width) solid var(--border-color);
}

.post-index-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   LAYOUT 5: HERO-GRID (Hero + Grid 2x2)
   --------------------------------------------------------------------------- */

.hero-grid-featured {
  margin-bottom: var(--post-spacing-xl);
}

.post-hero-grid {
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
}

.post-hero-grid-image {
  position: relative;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   LAYOUT 6: DUO-GRID (2 Heroes + Grid 4)
   --------------------------------------------------------------------------- */

.duo-grid-featured {
  margin-bottom: var(--post-spacing-xl);
}

/* ---------------------------------------------------------------------------
   LAYOUT 7: HERO-STACK (Hero Left + Stack Right)
   --------------------------------------------------------------------------- */

.posts-stack-container {
  height: 100%;
}

.post-stack-item {
  position: relative;
  background-color: var(--color-white);
  transition: transform var(--transition-base);
  padding-bottom: var(--post-spacing-md);
  border-bottom: var(--border-width) solid var(--border-color);
}

.post-stack-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Stack Horizontal Layout */
.post-stack-horizontal .post-stack-inner {
  display: flex;
  gap: var(--post-spacing-md);
  align-items: flex-start;
}

.post-stack-horizontal .post-stack-item-content {
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

/* Stack Vertical Layout */
.post-stack-vertical {
  display: flex;
  flex-direction: column;
}

.post-stack-vertical .post-stack-item-image {
  position: relative;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   LAYOUT 8: EVENTS LIST
   --------------------------------------------------------------------------- */

.event-past {
  position: relative;
}

.event-past .img-container {
  filter: grayscale(100%);
  opacity: 0.6;
}

.event-past .img-container:hover {
  filter: grayscale(5%);
  opacity: 0.7;
}

.event-past .post-content {
  opacity: 0.7;
}

.event-past .post-content:hover {
  opacity: 1;
}

.event-past .event-list-title,
.event-past .event-featured-title {
  color: var(--color-gray-dark);
}

/* Separador de eventos */
.events-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
}

.separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bg-solitude), transparent);
}

.separator-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gray-dark);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

/* Badges de estado */
.event-status-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--color-gray-dark);
  background: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.event-status-badge.event-concluded-small {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* Fechas de eventos */
.event-dates-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--color-form-text);
  font-weight: 500;
}

.event-dates--large {
  font-size: 1.125rem;
}

.event-dates--medium {
  font-size: 0.9375rem;
}

.event-date-icon,
.event-date-icon-small {
  color: var(--bs-primary);
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.event-date-icon-small {
  font-size: 1rem;
}

.event-date-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-separator {
  color: var(--color-gray);
}

.event-time {
  color: var(--color-gray-dark);
  font-size: 0.875em;
  margin-top: 0.25rem;
}

/* Tiempo relativo */
.event-relative {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
}

.event-today {
  background: #d1e7dd;
  color: #0f5132;
}

.event-tomorrow {
  background: #cfe2ff;
  color: #084298;
}

.event-this-week {
  background: #fff3cd;
  color: #664d03;
}

.event-this-month,
.event-future {
  background: var(--bs-light);
  color: var(--color-gray-dark);
}

/* Ubicación */
.event-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gray-dark);
  font-size: 0.9375rem;
}

.event-location i {
  color: var(--bs-primary);
}

.event-location--small {
  font-size: 0.875rem;
}

/* CTA Button */
.event-cta .btn {
  white-space: nowrap;
}

.event-cta .btn-lg {
  padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
}

/* Responsive */
@media (max-width: 991.98px) {
  .event-dates--large {
    font-size: 1rem;
  }
  
  .events-separator {
    padding: 1.5rem 0;
  }
}

/* ---------------------------------------------------------------------------
   CONTAINER QUERIES: Ajustes por tamaño de contenedor
   --------------------------------------------------------------------------- */

/* Contenedores muy pequeños (< 280px) - Ejemplo: 6 columnas en móvil */
@container post-container (max-width: 280px) {
  .post-title {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
  
  .post-excerpt {
    display: none; /* Ocultar extracto en espacios muy pequeños */
  }
  
  .post-side-image,
  .post-stack-horizontal .post-stack-item-image {
    width: 60px;
  }
}

/* Contenedores pequeños (280px - 400px) - Ejemplo: 4-5 columnas */
@container post-container (min-width: 280px) and (max-width: 400px) {
  .post-title--hero,
  .post-title--featured {
    font-size: 1.1rem;
    margin-bottom: var(--post-spacing-xs);
  }
  
  .post-excerpt--large {
    font-size: var(--font-sm);
  }
  
  .post-side-image,
  .post-stack-horizontal .post-stack-item-image {
    width: 70px;
  }
}

/* Contenedores medianos (400px - 600px) - Ejemplo: 2-3 columnas */
@container post-container (min-width: 400px) and (max-width: 600px) {
  .post-title--medium {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
  
  .post-hero-grid-content,
  .post-duo-item-content {
    padding: var(--post-spacing-md);
  }
  
  .post-side-image {
    width: 100px;
  }
  
  .post-grid-horizontal .post-grid-item-image {
    width: 120px;
  }
}

/* Contenedores grandes (> 600px) - Ejemplo: 1-2 columnas */
@container post-container (min-width: 600px) {
  .post-hero-grid-content {
    padding: var(--post-spacing-xl);
  }
  
  .post-excerpt {
    display: block; /* Asegurar que se muestre */
  }
}

/* ---------------------------------------------------------------------------
   UTILIDADES: Clases helper opcionales
   --------------------------------------------------------------------------- */

/* Modificadores de tamaño de título (usar si necesitas override) */
.post-title--xs { font-size: var(--fs-tiny) !important; }
.post-title--sm { font-size: var(--fs-small) !important; }
.post-title--md { font-size: var(--fs-medium) !important; }
.post-title--lg { font-size: var(--fs-large) !important; }
.post-title--xl { font-size: var(--fs-featured) !important; }
.post-title--2xl { font-size: var(--fs-hero) !important; }

/* Modificadores de extracto */
.post-excerpt--hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .post-excerpt--hide-mobile {
    display: block;
  }
}