/* ============================================================
   Kubi Service Card - Style Frontend
   (reproduction de ref.css adaptee aux classes du bloc)
   ============================================================ */

/* ---- Item ------------------------------------------------- */
.kubi-sc.item {
    position: relative;
}

.kubi-sc .inner {
    position: relative;
}

/* ---- Figure SVG ------------------------------------------- */
.kubi-sc .wp-fig,
.kubi-sc .wp-fig .back-svg {
    position: absolute;
    inset    : 0;
}

.kubi-sc .wp-fig > svg {
    width     : 100%;
    height    : 100%;
    transition: all 400ms ease, z-index 400ms ease;
}

.kubi-sc:hover .wp-fig > svg.back-svg {
    z-index        : 1;
    transform      : rotate(-5deg);
    mix-blend-mode : multiply;
}

.kubi-sc .wp-fig > svg:not(.back-svg) {
    filter: brightness(0.8);
}

.kubi-sc .wp-fig > svg image {
    width     : 110%;
    height    : 110%;
    transition: all 400ms ease;
}

.kubi-sc:hover .wp-fig > svg image {
    transform: scale(.98);
}

/* ---- Zone texte (clip-txt) -------------------------------- */
.kubi-sc .clip-txt {
    position: relative;
    overflow: hidden;
    /* height et padding definis en inline par PHP */
}

/* ---- Lien transparent couvrant toute la carte ------------- */
.kubi-sc .lrn-more {
    position  : absolute;
    z-index   : 2;
    inset     : 0;
    display   : block;
    background: transparent;
}

.kubi-sc .clip-txt > * {
    position: relative;
    z-index  : 1;
}

.kubi-sc .clip-txt * {
    color: #ffffff;
}

/* ---- Blocs de texte --------------------------------------- */
.kubi-sc .wp-txt {
    position      : relative;
    height        : 100%;
    display       : flex;
    cursor        : pointer;
    flex-direction: column;
    transition    : all 400ms ease;
}

/* .wp-txt sans .description : titre + lien -> colle en bas */
.kubi-sc .wp-txt:not(.description) {
    justify-content: flex-end;
}

/* .wp-txt.description : centre verticalement */
.kubi-sc .wp-txt.description {
    justify-content: center;
}

/* Au hover : le .wp-txt (titre) monte de 100% */
.kubi-sc:hover .wp-txt {
    transform: translateY(-100%);
}

/* Au repos : .description invisible */
.kubi-sc:not(:hover) .wp-txt.description {
    opacity   : 0;
    visibility: hidden;
}

/* Au hover : .wp-txt:not(.description) invisible */
.kubi-sc:hover .wp-txt:not(.description) {
    opacity   : 0;
    visibility: hidden;
}

/* ---- Texte dans .clip-txt --------------------------------- */
.kubi-sc .clip-txt ul {
    position      : relative;
    display       : flex;
    row-gap       : .5rem;
    padding-left  : 0;
    list-style    : none;
    flex-direction: column;
}

/* ---- Heading --------------------------------------------- */
.kubi-sc .kubi-sc__heading {
    margin    : 0 0 0.75rem;
    font-size : 1.25rem;
    line-height: 1.3;
    color     : #ffffff;
}

/* ---- Lien "En savoir plus" -------------------------------- */
.kubi-sc .kubi-sc__lrn-link {
    display    : inline-block;
    color      : #ffffff;
    font-weight: 600;
    font-size  : 0.875rem;
    text-decoration: underline;
    transition : opacity .2s ease;
}

.kubi-sc .kubi-sc__lrn-link:hover {
    opacity: 0.8;
}

/* ---- Description InnerBlocks ------------------------------ */
.kubi-sc .wp-txt.description p,
.kubi-sc .wp-txt.description li,
.kubi-sc .wp-txt.description a {
    color      : #ffffff;
    font-size  : 0.9rem;
    line-height: 1.6;
    margin     : 0 0 0.5rem;
}

.kubi-sc .wp-txt.description a {
    text-decoration: underline;
}

/* Boutons dans la description */
.kubi-sc .wp-txt.description .wp-block-button__link {
    color           : #ffffff;
    border          : 2px solid #ffffff;
    background      : transparent;
    padding         : 0.4rem 1rem;
    border-radius   : 4px;
    text-decoration : none;
    font-weight     : 600;
    transition      : background .2s ease;
    display         : inline-block;
}

.kubi-sc .wp-txt.description .wp-block-button__link:hover {
    background: rgba(255,255,255,0.15);
}