/* Archivo: announcement-detail.css
   Funcion: Estilo especifico del detalle de un anuncio (anuncio.php), misma direccion
   "natural/organico" que el resto de paginas ya migradas, aplicada con cuidado: esta
   pagina es basicamente un articulo para leer, asi que solo se retoca el banner de
   cabecera, dejando el cuerpo del articulo limpio y centrado en la lectura. Se carga
   UNICAMENTE en anuncio.php (ver includes/header.php) y todas las reglas van
   prefijadas con body.page-announcement-detail. */

@keyframes organic-drift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(4deg); }
}

body.page-announcement-detail .page-hero::before {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    animation: organic-drift 15s ease-in-out infinite;
}

body.page-announcement-detail .page-hero::after {
    border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
    animation: organic-drift 19s ease-in-out infinite reverse;
}

body.page-announcement-detail .announcement-date {
    color: var(--color-earth-clay-dark);
}

/* ---------- Fecha + boton "Compartir" en la misma fila ---------- */
body.page-announcement-detail .announcement-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- Galeria de imagenes (solo aparece con 2 o mas imagenes en total; ver
   initAnnouncementGallery() en app.js). Reutiliza .history-arrow/.history-dots/.history-dot
   (mismos estilos que el carrusel de "Nuestra historia"), solo el track/slides son propios
   porque aqui la imagen ocupa todo el ancho de la ficha, no una tarjeta de texto. ---------- */
body.page-announcement-detail .announcement-gallery {
    margin-bottom: 28px;
}

body.page-announcement-detail .announcement-gallery-stage {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-announcement-detail .announcement-gallery-track {
    flex: 1;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: var(--radius-lg);
    background: var(--color-gray-soft);
}

body.page-announcement-detail .announcement-gallery-track::-webkit-scrollbar {
    display: none;
}

body.page-announcement-detail .announcement-gallery-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

body.page-announcement-detail .announcement-gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

/* Sin aspect-ratio ni object-fit: la imagen ocupa todo el ancho disponible y su alto se
   calcula solo, respetando su proporcion real (igual que la ficha de un anuncio con una
   unica imagen, antes de existir esta galeria) -- nunca se recorta ni se encoge para
   encajar en un marco fijo. Como todas las diapositivas se colocan en fila (flexbox), el
   carrusel adopta de forma automatica el alto de la mas alta de todas; el resto queda
   centrada verticalmente dentro de ese mismo alto. */
body.page-announcement-detail .announcement-gallery-slide img {
    width: 100%;
    height: auto;
    display: block;
}

body.page-announcement-detail .announcement-gallery-dots {
    margin-top: 14px;
}