/* ── TWO-COL-SERVICES LAYOUT ───────────────────────────────────────────────── */

.bcnlip-inst-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 700;
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    line-height: 1.1;
    margin-bottom: 2rem;
}

.bcnlip-inst-heading em {
    font-style: italic;
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary-dark, #F2A900));
}

.bcnlip-inst-layout {
    display: grid;
    gap: 3rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .bcnlip-inst-layout {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }
}

.bcnlip-inst-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Sede cards grow to absorb the column's surplus height so the left column
   never ends in dead space when the right column (services list) is
   taller. Cards split the available height equally. */
.bcnlip-inst-left > .bcnlip-sede-card { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bcnlip-inst-right {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.bcnlip-inst-right .bcnlip-servicios-grid { flex: 1; }

/* Sede cards */
.bcnlip-sede-card {
    border-left: 3px solid var(--wp--preset--color--bcnlip-yellow, var(--color-secondary-dark, #F2A900));
    padding: 0.7rem 1rem;
    background: rgba(27, 42, 74, 0.05);
}

.bcnlip-sede-name {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--bcnlip-teal, var(--color-primary, #1B2A4A));
    margin-bottom: 0.3rem;
}

.bcnlip-sede-desc {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--wp--preset--color--bcnlip-navy-dark, var(--color-dark, #0F1C35));
    opacity: 0.7;
}

/* Tour embed */
.bcnlip-tour-embed {
    margin-top: 0.5rem;
    overflow: hidden;
    border-radius: 4px;
}

/* Services label */
.bcnlip-servicios-label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--bcnlip-red, var(--color-red, #C1262C));
    margin-bottom: 0.6rem;
    font-family: 'Courier Prime', 'Courier New', monospace;
}

/* Services — vertical card stack that stretches to fill the column.
   Each service becomes a button-like card so the right column visually
   matches the weight of the left step cards instead of leaving dead space. */
.bcnlip-servicios-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bcnlip-servicio {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(27, 42, 74, 0.12);
    background: rgba(27, 42, 74, 0.03);
    border-radius: 4px;
    flex: 1;
    transition: border-color .2s, background .2s;
}
.bcnlip-servicio:hover {
    border-color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary-dark, #F2A900));
    background: rgba(242, 169, 0, 0.06);
}

.bcnlip-servicio-ic {
    color: var(--wp--preset--color--bcnlip-yellow, var(--color-secondary-dark, #F2A900));
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.bcnlip-servicio-txt {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--wp--preset--color--bcnlip-navy-dark, var(--color-dark, #0F1C35));
    opacity: 0.85;
    font-family: 'Courier Prime', 'Courier New', monospace;
}

@media (max-width: 480px) {
    .bcnlip-servicios-grid {
        grid-template-columns: 1fr;
    }
}

/* ── END TWO-COL-SERVICES ───────────────────────────────────────────────────── */

/* Contenedor principal - asegurar consistencia con expandable-sections */
.wp-block-gutenberg-test-facilities-content {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    /* El padding top y bottom ahora se controla mediante atributos */
}

/* Eliminar paddings laterales para alineaciones wide y full */
.wp-block-gutenberg-test-facilities-content.alignwide,
.wp-block-gutenberg-test-facilities-content.alignfull {
    padding-left: 0;
    padding-right: 0;
}

/* Contenedor interno — alineado al sistema editorial del tema (80rem,
   mismo que methodology-levels / hours-breakdown / cross-program-nav).
   La var --container-max-width se mantiene como fallback para usos custom. */
.wp-block-gutenberg-test-facilities-content .container {
    max-width: 80rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 1023px) {
    .wp-block-gutenberg-test-facilities-content .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 639px) {
    .wp-block-gutenberg-test-facilities-content .container { padding-left: 1rem; padding-right: 1rem; }
}

/* Ajustes para alineaciones wide y full */
.wp-block-gutenberg-test-facilities-content.alignwide .container,
.wp-block-gutenberg-test-facilities-content.alignfull .container {
    max-width: none;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Sección de contenido - mismo ancho que el contenedor, sin padding adicional */
.wp-block-gutenberg-test-facilities-content .content-section {
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border-light, var(--color-stone-200, #e7e5e4));
    animation: fadeInUp 0.5s ease-out forwards;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
}

/* Estilos para encabezados */
.wp-block-gutenberg-test-facilities-content h2 {
    color: var(--color-primary);
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-block-gutenberg-test-facilities-content h2 i {
    color: var(--color-primary);
}

/* Estilos para párrafos */
.wp-block-gutenberg-test-facilities-content p {
    line-height: 1.6;
    margin: 1rem 0;
    color: var(--color-text, #1B2A4A);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Clases de alineación de texto */
.wp-block-gutenberg-test-facilities-content .text-left {
    text-align: left;
}

.wp-block-gutenberg-test-facilities-content .text-center {
    text-align: center;
}

.wp-block-gutenberg-test-facilities-content .text-right {
    text-align: right;
}

.wp-block-gutenberg-test-facilities-content .text-justify {
    text-align: justify;
}

/* Animación */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Media queries */
@media (max-width: 768px) {
    .wp-block-gutenberg-test-facilities-content .content-section {
        padding: clamp(1.25rem, 4vw, 1.5rem);
    }
}

/* Estilos para diferentes tamaños de fuente */
.wp-block-gutenberg-test-facilities-content.font-size-small {
    font-size: 0.9rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-small h2,
.wp-block-gutenberg-test-facilities-content.font-size-small h3,
.wp-block-gutenberg-test-facilities-content.font-size-small h4 {
    font-size: 1.4rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-small h2 i {
    font-size: 1.2rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-medium {
    font-size: 1rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-medium h2,
.wp-block-gutenberg-test-facilities-content.font-size-medium h3,
.wp-block-gutenberg-test-facilities-content.font-size-medium h4 {
    font-size: 1.6rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-medium h2 i {
    font-size: 1.4rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-large {
    font-size: 1.2rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-large h2,
.wp-block-gutenberg-test-facilities-content.font-size-large h3,
.wp-block-gutenberg-test-facilities-content.font-size-large h4 {
    font-size: 1.8rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-large h2 i {
    font-size: 1.6rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-xlarge {
    font-size: 1.4rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-xlarge h2,
.wp-block-gutenberg-test-facilities-content.font-size-xlarge h3,
.wp-block-gutenberg-test-facilities-content.font-size-xlarge h4 {
    font-size: 2.2rem !important;
}

.wp-block-gutenberg-test-facilities-content.font-size-xlarge h2 i {
    font-size: 1.8rem !important;
}

/* Ajustes responsive para tamaños de fuente */
@media (max-width: 768px) {
    .wp-block-gutenberg-test-facilities-content.font-size-large {
        font-size: 1.1rem !important;
    }
    
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge {
        font-size: 1.2rem !important;
    }
    
    .wp-block-gutenberg-test-facilities-content.font-size-large h2,
    .wp-block-gutenberg-test-facilities-content.font-size-large h3,
    .wp-block-gutenberg-test-facilities-content.font-size-large h4 {
        font-size: 1.6rem !important;
    }
    
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge h2,
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge h3,
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge h4 {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 576px) {
    .wp-block-gutenberg-test-facilities-content.font-size-large {
        font-size: 1rem !important;
    }
    
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge {
        font-size: 1.1rem !important;
    }
    
    .wp-block-gutenberg-test-facilities-content.font-size-large h2,
    .wp-block-gutenberg-test-facilities-content.font-size-large h3,
    .wp-block-gutenberg-test-facilities-content.font-size-large h4,
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge h2,
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge h3,
    .wp-block-gutenberg-test-facilities-content.font-size-xlarge h4 {
        font-size: 1.5rem !important;
    }
}