/**
 * MARQ Components - Componentes Reutilizables para MARQ Alicante
 *
 * Estilos compartidos entre todos los CPTs (monedas, publicaciones, artículos)
 * para maximizar la reutilización y mantener coherencia visual.
 *
 * @package Betheme Child
 * @since 1.0.0
 */

/* ============================================================================
   INFO BOX - Caja de Información Básica
   ============================================================================ */

.marq-info-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--mfn-button-border-radius, 4px);
    padding: 22px;
    margin: 20px 0;
}

.marq-info-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    color: #333;
}

/* ============================================================================
   INFO FIELD - Campo de Información (row/fila)
   ============================================================================ */

.marq-info-field {
    padding: 9px 0;
    border-bottom: 1px solid #e9ecef;
}

.marq-info-field:last-child {
    border-bottom: none;
}

.marq-info-field strong {
    font-weight: 600;
    color: #333;
}

/* ============================================================================
   LINKS - Enlaces compartidos
   ============================================================================ */

/* Link a tienda */
.marq-link-tienda {
    color: var(--mfn-button-theme-bg, #0073aa);
    text-decoration: none;
    font-weight: 500;
    transition: var(--mfn-button-transition, all 0.3s ease);
}

.marq-link-tienda:hover {
    color: var(--mfn-button-theme-bg-hover, #005177);
    text-decoration: underline;
}

/* Link genérico (para publicaciones/artículos) */
.marq-link {
    color: var(--mfn-button-theme-bg, #0073aa);
    text-decoration: none;
    font-weight: 500;
    transition: var(--mfn-button-transition, all 0.3s ease);
}

.marq-link:hover {
    color: var(--mfn-button-theme-bg-hover, #005177);
    text-decoration: underline;
}

/* ============================================================================
   DOCUMENTO - Contenedores y elementos de documento
   ============================================================================ */

/* Container base para documentos */
.marq-doc-container {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--mfn-button-border-radius, 4px);
    overflow: hidden;
    transition: var(--mfn-button-transition, all 0.3s ease);
}

.marq-doc-container:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--mfn-button-theme-bg, #0073aa);
}

/* Modificador: Documento destacado (más prominente) */
.marq-doc-container-destacado {
    border-width: 2px;
}

.marq-doc-container-destacado:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Link de documento */
.marq-doc-link {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: inherit;
    transition: var(--mfn-button-transition, all 0.3s ease);
}

.marq-doc-link:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}

/* Modificador: Link de documento destacado */
.marq-doc-link-destacado {
    padding: 25px;
}

/* Icono de documento */
.marq-doc-icon {
    font-size: 24px;
    margin-right: 15px;
    color: var(--mfn-button-theme-bg, #0073aa);
    transition: all 0.3s ease;
}

/* Modificador: Icono grande */
.marq-doc-icon-large {
    font-size: 48px;
    margin-right: 20px;
}

.marq-doc-link:hover .marq-doc-icon-large {
    transform: scale(1.1);
}

/* Información del documento */
.marq-doc-info {
    flex: 1;
}

/* Título del documento */
.marq-doc-title {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.3;
}

/* Modificador: Título grande */
.marq-doc-title-large {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #222;
}

/* Acción del documento (texto "Ver documento", etc.) */
.marq-doc-action {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modificador: Acción grande */
.marq-doc-action-large {
    font-size: 0.95em;
    color: var(--mfn-button-theme-bg, #0073aa);
    font-weight: 500;
}

/* ============================================================================
   CARD - Tarjetas genéricas para listados
   ============================================================================ */

.marq-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--mfn-button-border-radius, 4px);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 260px; /* Altura mínima para evitar apilamiento desigual */
}

.marq-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #dee2e6;
    transform: translateY(-2px);
}

/* Card Action - Footer de card con botón */
.marq-card-action {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .marq-info-box {
        padding: 20px;
    }

    .marq-doc-link-destacado {
        padding: 20px;
    }

    .marq-doc-icon-large {
        font-size: 36px;
        margin-right: 15px;
    }

    .marq-card {
        padding: 15px;
        min-height: auto; /* En móvil no forzar altura mínima */
    }
}

@media (max-width: 480px) {
    .marq-info-box {
        padding: 15px;
    }

    .marq-doc-link,
    .marq-doc-link-destacado {
        padding: 15px;
        flex-direction: column;
        text-align: center;
    }

    .marq-doc-icon,
    .marq-doc-icon-large {
        margin-right: 0;
        margin-bottom: 10px;
        font-size: 32px;
    }
}