/* Responsividad General - Mobile First Approach */

/* Base styles (mobile) */
.fila-eventos {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding-inline: clamp(0.5rem, 2vw, 1rem);
}

.imagen-header {
    display: none;
}

/* 1. El Contenedor de la Tarjeta (el bloque "Grupo") */
.product-card-gutenberg {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #1f1f1f;
}

/* 2. Efecto al pasar el mouse */
.product-card-gutenberg:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 3. La Imagen (sin cambios) */
.product-card-gutenberg .wp-block-image {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 180px; 
  height: 180px;
  z-index: 1;
  opacity: 0.9;
  margin: 0;
}
.product-card-gutenberg .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 4. Contenido de Texto (sin cambios, ya se alinea a la izquierda) */
.product-card-gutenberg > .wp-block-heading,
.product-card-gutenberg > .wp-block-paragraph,
.product-card-gutenberg > .wp-block-buttons {
  position: relative;
  z-index: 2;
  /* El texto dentro de estos bloques ya se alinea a la izquierda por defecto */
}
.product-card-gutenberg .wp-block-heading {
    color: #fff;
}
.product-card-gutenberg .wp-block-paragraph {
    color: #ccc;
}

/* 5. Contenedor de Botones */
.product-card-gutenberg .wp-block-buttons {
  margin-top: auto; /* Empuja al fondo */
  padding-top: 1.5rem;
  
  /* --- NUEVO --- */
  /* Alinea el/los botón(es) a la izquierda dentro del bloque "Botones" */
  justify-content: flex-start;
}

/* 6. Estilo del Botón */
.product-card-gutenberg .wp-block-button__link {
  background-color: transparent !important;
  
  /* --- CAMBIO --- */
  border: 1px solid #ff7233 !important; /* Color de acento */
  color: #ff7233 !important;           /* Color de acento */
  
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: inline-flex;
  align-items: center;

  /* --- NUEVO --- */
  /* Transición suave para el hover */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- NUEVO BLOQUE --- */
/* 6b. Hover del Botón */
.product-card-gutenberg .wp-block-button__link:hover {
    background-color: #ff7233 !important; /* Relleno de acento */
    color: #fff !important;              /* Texto blanco para contraste */
}


/* 7. Flecha del botón (Hereda el color automáticamente) */
.btn-with-arrow.wp-block-button__link::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  background-color: currentColor; /* Hereda el color (#ff7233 o #fff en hover) */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'%3E%3C/path%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  
  /* --- NUEVO --- */
  /* Asegura que la flecha también tenga transición */
  transition: background-color 0.3s ease;
}

/* 8. Ajustes para móvil (sin cambios de color) */
@media (max-width: 781px) {
  .product-card-gutenberg .wp-block-image {
    width: 130px;
    height: 130px;
    bottom: -10px;
    right: -10px;
  }
}

/* Tablet */
@media (min-width: 768px) {
    .fila-eventos {
        flex-direction: row;
        align-items: center;
        gap: clamp(1rem, 3vw, 2rem);
    }
    
    .imagen-header {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .fila-eventos {
        gap: clamp(1.5rem, 4vw, 3rem);
        padding-inline: clamp(1rem, 3vw, 2rem);
    }
}

/* Large screens */
@media (min-width: 1440px) {
    .fila-eventos {
        max-width: 1400px;
        margin-inline: auto;
    }
}