/* ==========================================================
   VARIABLES POR SERVICIO
========================================================== */

.espaiServei-igualtat{
    --servei-primary:#8a5fbf;
    --servei-secondary:#f4effb;
    --servei-banner-start:#8a5fbf;
    --servei-banner-end:#b084dc;
}

.espaiServei-biblioteca{
    width:100%;
    --servei-primary:#8b3a62;
    --servei-secondary:#f8eef3;
    --servei-banner-start:#6f274b;
    --servei-banner-end:#b15d86;
}

.espaiServei-oac{
    --servei-primary:#374151;
    --servei-secondary:#f3f4f6;
    --servei-banner-start:#374151;
    --servei-banner-end:#6b7280;
}

/* ==========================================================
   DESBLOQUEAR GUTENBERG / ASTRA
========================================================== */

.espaiServei{
    width:100%;
}

.espaiServei.is-layout-constrained,
.espaiServei .is-layout-constrained{
    max-width:none !important;
}

/* ==========================================================
   HERO FULL WIDTH
========================================================== */

.espaiServei-biblioteca > .espaiServeisHero{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    position:relative;
}

.espaiServeisHero{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:stretch;
    overflow:hidden;
}

/* inner cover reset */
.espaiServeisHero .wp-block-cover__inner-container{
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
    max-width:none !important;

    display:flex !important;
    justify-content:flex-start !important;
    align-items:stretch !important;

    position:relative;
    z-index:2;
}

/* HERO CONTENT */
.espaiServeisHero-content{
    width:520px;
    margin:0 !important;
    margin-right:auto !important;

    padding:60px 50px;
    min-height:520px;

    display:flex;
    flex-direction:column;
    gap:12px;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);

    color:#fff;
}

/* TITOL */
.espaiServei-biblioteca .espaiServeisHero-title{
    color:#fff;
    font-size:clamp(2rem,4vw,3.5rem);
    line-height:1.1;
    font-weight:700;
    margin:0;
}

/* separador */
.espaiServeisHero .wp-block-separator.espaiServeisHero-line{
    width:70px !important;
    height:3px !important;
    border:0 !important;
    background:var(--servei-primary) !important;
    opacity:1 !important;
}

/* texto hero */
.espaiServeisHero-text{
    color:rgba(255,255,255,.9);
}

/* botones */
.espaiServeisHero-content .wp-block-button__link{
    padding:12px 22px;
    border-radius:10px;
    background:var(--servei-primary);
    color:#fff;
    text-decoration:none;
}

.espaiServeisHero-content .wp-block-button__link:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

.espaiServeisHero-content .wp-block-button:last-child .wp-block-button__link{
    background:transparent;
    border:1px solid rgba(255,255,255,.4);
}

/* ==========================================================
   INFO BLOCK - AJUNTAMENT APPLE PREMIUM
========================================================== */

.espaiServeis-info{
    width:min(1280px,95%);
    margin:0 auto;

    padding:18px;

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(18px);

    border-radius:28px;
}
.espaiServeis-info > .wp-block-column{
    min-width:0;
}

/* TARJETA */

.espaiServeis-horari{
    display:flex;
    align-items:flex-start;
    gap:16px;

    height:100%;

    padding:22px;

    background:rgba(255,255,255,.92);

    border:1px solid rgba(255,255,255,.7);

    border-radius:22px;

    box-shadow:
        0 1px 2px rgba(0,0,0,.04),
        0 8px 30px rgba(0,0,0,.05);

    backdrop-filter:blur(10px);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.espaiServeis-horari:hover{
    transform:translateY(-3px);

    box-shadow:
        0 4px 10px rgba(0,0,0,.05),
        0 18px 40px rgba(0,0,0,.08);
}
/* ICONO */

.espaiServeis-horari-icon{
    flex:0 0 58px;
}

.espaiServeis-horari-icon i{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;

    border-radius:18px;

    color:var(--servei-primary);

    background:
        color-mix(
            in srgb,
            var(--servei-primary) 8%,
            white
        );
}
/* CONTENIDO */
.espaiServeis-info .wp-block-column > .espaiServeis-horari{
    margin-block-start:0 !important;
    margin-top:0 !important;
}
.espaiServeis-horari-content{
    flex:1;
    min-width:0;
}

.espaiServeis-horari-content h2{
    margin:0 0 8px;

    font-size:1rem;
    font-weight:700;

    color:#1d1d1f;

    letter-spacing:-0.02em;
}
.espaiServeis-horari-content p{
    margin:0;

    font-size:.9rem;

    line-height:1.55;

    color:#6e6e73;
}
.espaiServeis-horari-content h3{
    margin:10px 0 3px;

    font-size:.78rem;

    text-transform:uppercase;
    letter-spacing:.08em;

    font-weight:700;

    color:#86868b;
}


/* TODO el contenido textual como bloque */
.espaiServeis-info .wp-block-group > div,
.espaiServeis-info .wp-block-group > p,
.espaiServeis-info .wp-block-group > h2,
.espaiServeis-info .wp-block-group > h3{
    display:block;
}

/* alineación interna del texto */
.espaiServeis-info h2{
    font-size:0.9rem;
    font-weight:600;
    margin:0;
    color:#1d1d1f;
}

.espaiServeis-info p{
    margin:0;
    font-size:0.85rem;
    line-height:1.25;
    color:#555;
}

.espaiServeis-info h3{
    margin:6px 0 0;
    font-size:0.78rem;
    font-weight:600;
    color:#333;
}


/* RESET GUTENBERG */
.espaiServeis-info h2,
.espaiServeis-info p,
.espaiServeis-info h3{
    margin:0;
}


/* ==========================================================
   SECCIONES
========================================================== */
/* CONTENEDOR DE COLUMNAS */

.espaiServeis-section .wp-block-columns{
    align-items:stretch;
}

/* COLUMNAS */

.espaiServeis-section .wp-block-column{
    display:flex;
}

/* TARJETA */

/* ==========================================================
   CARDS APPLE PREMIUM
========================================================== */

.espaiServeis-section .wp-block-columns{
    align-items:stretch;
    display:flex;
}

.espaiServeis-card{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:32px 24px;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(12px);

    border-radius:24px;

    border:1px solid rgba(255,255,255,.6);

    box-shadow:
        0 1px 2px rgba(0,0,0,.04),
        0 8px 24px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.espaiServeis-card:hover{
    transform:translateY(-4px);

    border-color:color-mix(
        in srgb,
        var(--servei-primary) 65%,
        white
    );

    box-shadow:
        0 14px 36px rgba(0,0,0,.10),
        0 0 0 4px color-mix(
            in srgb,
            var(--servei-primary) 10%,
            transparent
        );
}

.espaiServeis-card i{
    width:72px;
    height:72px;

    margin:0 0 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;

    border-radius:20px;

    color:var(--servei-primary);

    background:
        color-mix(in srgb,
        var(--servei-primary) 10%,
        white);
}

.espaiServeis-card h3{
    margin:0 0 12px;

    font-size:1.1rem;
    font-weight:600;
    line-height:1.3;

    color:#1d1d1f;
}

.espaiServeis-card p{
    margin:0;

    font-size:.95rem;
    line-height:1.55;

    color:#6e6e73;
}

/* móvil */

@media (max-width:768px){

    .espaiServeis-section .wp-block-columns{
        gap:16px;
    }

    .espaiServeis-card{
        padding:24px 20px;
    }
}
/*
.espaiServeis-section{
    max-width:1200px;
    margin:0 auto;
    padding:70px 20px;
}


.espaiServeis-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:22px;
    padding:35px 25px;

    text-align:center;
    transition:.3s ease;
}

.espaiServeis-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.12);
    border-color:var(--servei-primary);
}

.espaiServeis-card i{
    width:72px;
    height:72px;
    margin:0 auto 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;

    color:var(--servei-primary);
    background:var(--servei-secondary);
    border-radius:50%;
}
*/
/* ==========================================================
   ABOUT + CARNET
========================================================== */

.espaiServeis-about{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
}

.espaiServeis-carnet{
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--servei-primary) 10%,white),
        white
    );

    border-radius:24px;
    border:1px solid rgba(0,0,0,.05);

    padding:40px;

    display:flex;
    align-items:center;
    gap:35px;
    height:100%;
}

/* ==========================================================
   DOCS
========================================================== */

.espaiServeis-docs{
    background:#fff;
    border:1px solid #eee;
    border-radius:20px;
    overflow:hidden;
}

.espaiServeis-docs a{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 20px;
    text-decoration:none;
    border-bottom:1px solid #eee;
}

.espaiServeis-docs a:hover{
    background:var(--servei-secondary);
}

/* ==========================================================
   NOTICIES
========================================================== */

.espaiServeis-noticies .uagb-post__inner-wrap{
    border-radius:18px;
    overflow:hidden;
    transition:.3s ease;
}

.espaiServeis-noticies .uagb-post__inner-wrap:hover{
    transform:translateY(-5px);
}

/* ==========================================================
   GALLERY
========================================================== */

.espaiServeis-gallery img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:12px;
    transition:.3s ease;
}

.espaiServeis-gallery img:hover{
    transform:scale(1.03);
}

/* ==========================================================
   CONTACTE
========================================================== */

.espaiServeis-contacte{
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--servei-primary) 10%,white),
        white
    );

    border-radius:24px;
    border:1px solid rgba(0,0,0,.05);

    padding:30px 40px;
    margin-top:70px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.espaiServeis-contacte-info{
    display:flex;
    align-items:center;
    gap:20px;
}

.espaiServeis-contacte-icon{
    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--servei-secondary);
    color:var(--servei-primary);

    font-size:34px;
}

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

@media (max-width:768px){

    .espaiServeisHero-content{
        width:auto;
        margin:20px;
        padding:25px;
    }

    .espaiServeis-contacte{
        flex-direction:column;
        text-align:center;
    }
}

/* ==========================================================
   RESPONSIVE TARJETES INFO
========================================================== */

/* Tablet */

@media (max-width:1024px){

    .espaiServeis-info{
        width:min(96%,1200px);
        padding:14px;
    }

    .espaiServeis-horari{
        padding:20px;
    }
}

/* Mòbil */

@media (max-width:781px){

    .espaiServeis-info{
        width:calc(100% - 24px);
        padding:10px;
        border-radius:20px;
    }

    .espaiServeis-horari{
        padding:18px;
        gap:14px;
        border-radius:18px;
    }

    .espaiServeis-horari-icon{
        flex:0 0 50px;
    }

    .espaiServeis-horari-icon i{
        width:50px;
        height:50px;
        font-size:22px;
        border-radius:14px;
    }

    .espaiServeis-horari-content h2{
        font-size:.95rem;
    }

    .espaiServeis-horari-content p{
        font-size:.84rem;
    }
}

/* Mòbils petits */

@media (max-width:480px){

    .espaiServeis-info{
        width:calc(100% - 16px);
        padding:8px;
    }

    .espaiServeis-horari{
        padding:16px;
        gap:12px;
    }

    .espaiServeis-horari-icon{
        flex:0 0 44px;
    }

    .espaiServeis-horari-icon i{
        width:44px;
        height:44px;
        font-size:20px;
        border-radius:12px;
    }

    .espaiServeis-horari-content h2{
        font-size:.9rem;
    }

    .espaiServeis-horari-content p{
        font-size:.8rem;
        line-height:1.45;
    }
}