/**
 * Post individual unificado (Platos del día, Eventos, Momentos).
 * Usa las mismas clases base que social-posts.css (.social-post-card, .social-post-actions, etc.)
 */

.public-dedicated-outer {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    /* Menos hueco antes del footer (el botón Volver lleva su propio espacio) */
    padding: 0 20px 20px;
    box-sizing: border-box;
}

/* Fila del enlace "Ver todos…": compacta respecto al footer */
.public-dedicated-outer .public-dedicated-back-row {
    padding: 8px 0 2px;
    margin: 0;
}

.social-post-card.social-post-card--dedicated {
    max-width: 920px;
    width: 100%;
    margin: 24px auto 20px;
    cursor: default;
    scroll-margin-top: 100px;
}

/* Footer pegado al contenido dedicado en las tres secciones */
main:has(.public-dedicated-outer) ~ footer.footer {
    margin-top: 0.5rem !important;
}

@media (max-width: 480px) {
    main:has(.public-dedicated-outer) ~ footer.footer {
        margin-top: 0.35rem !important;
    }
}

/* Tablet: artículo usa todo el ancho del área de contenido */
@media (max-width: 1024px) {
    .social-post-card.social-post-card--dedicated {
        max-width: 100%;
    }
}

/* Móvil: menos márgenes laterales en el wrapper del artículo */
@media (max-width: 768px) {
    .public-dedicated-outer {
        padding: 0 8px 16px;
        max-width: 100%;
    }

    .social-post-card.social-post-card--dedicated {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .public-dedicated-outer .public-dedicated-back-row {
        padding: 6px 0 0;
    }
}

@media (max-width: 480px) {
    .public-dedicated-outer {
        padding: 0 4px 12px;
    }

    .public-dedicated-outer .social-post-content {
        padding: 16px 12px;
    }

    .social-post-card.social-post-card--dedicated {
        border-radius: 14px;
    }
}

@media (max-width: 360px) {
    .public-dedicated-outer {
        padding: 0 2px 10px;
    }

    .public-dedicated-outer .social-post-content {
        padding: 14px 10px;
    }
}

/**
 * Ampliar ancho útil: menos padding en main y en .platos/.events/.moments-container
 * solo cuando hay vista dedicada (:has). !important supera reglas inline de las páginas.
 */
@media (max-width: 768px) {
    main.container:has(.public-dedicated-outer) {
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    }

    main.container .platos-container:has(> .public-dedicated-outer),
    main.container .events-container:has(> .public-dedicated-outer),
    main.container .moments-container:has(> .public-dedicated-outer) {
        padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    main.container:has(.public-dedicated-outer) {
        padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
    }

    main.container .platos-container:has(> .public-dedicated-outer),
    main.container .events-container:has(> .public-dedicated-outer),
    main.container .moments-container:has(> .public-dedicated-outer) {
        padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
    }

    .public-dedicated-outer .public-dedicated-back-row {
        padding-left: 0;
        padding-right: 0;
        padding-top: 4px;
        padding-bottom: 0;
    }
}

.social-post-card.social-post-card--dedicated:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(44, 90, 160, 0.1) !important;
    background: linear-gradient(135deg, #ffffff 0%, #eef3ff 100%) !important;
}

a.public-dedicated-back-link.social-share-btn {
    text-decoration: none;
    color: #fff;
}

a.public-dedicated-back-link.social-share-btn:hover {
    color: #fff;
}

/* Metadatos extra (fecha evento/momento, badge) */
.public-dedicated-before-title {
    margin-bottom: 10px;
}

.public-dedicated-meta {
    color: #555;
    font-size: 0.95rem;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.public-dedicated-meta i {
    color: #2c5aa0;
}

.public-dedicated-details {
    margin: 0 0 16px;
    padding: 0;
}

.public-dedicated-detail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    color: #555;
    font-size: 0.95rem;
}

.public-dedicated-detail i {
    color: #2c5aa0;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Misma altura de imagen que en listados (220px); anula aspect-ratio de social-posts.css */
.public-dedicated-outer .social-post-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    padding-top: 0 !important;
    background: linear-gradient(135deg, #2c5aa0 0%, #4a7bc8 50%, #68a5e8 100%);
}

.public-dedicated-outer .social-post-image-wrapper .social-post-image {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-dedicated-outer .social-post-card--dedicated .social-post-image-wrapper .event-image-placeholder {
    min-height: 220px;
}

/* =============================================================================
   Listados (Platos / Eventos / Momentos): mismas medidas de ancho que dedicados
   ============================================================================= */
@media (max-width: 768px) {
    main.container:has(#social-posts-container),
    main.container:has(#events-feed-container),
    main.container:has(#moments-feed-container) {
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    }

    main.container .platos-container:has(#social-posts-container),
    main.container .events-container:has(#events-feed-container),
    main.container .moments-container:has(#moments-feed-container) {
        padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
        max-width: 100% !important;
    }

    #social-posts-container.social-posts-container {
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    }

    #events-feed-container,
    #moments-feed-container {
        padding-left: 2px;
        padding-right: 2px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    main.container:has(#social-posts-container),
    main.container:has(#events-feed-container),
    main.container:has(#moments-feed-container) {
        padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
    }

    main.container .platos-container:has(#social-posts-container),
    main.container .events-container:has(#events-feed-container),
    main.container .moments-container:has(#moments-feed-container) {
        padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
    }

    #social-posts-container.social-posts-container {
        padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
        padding-top: 12px !important;
        padding-bottom: 20px !important;
    }

    #events-feed-container .social-posts-load-more,
    #moments-feed-container .social-posts-load-more {
        padding-left: 0;
        padding-right: 0;
    }
}