/* ==========================================================================
   CTA Button – Custom Override per Bridge Theme
   File: child-theme/assets/css/cta-button.css
   ========================================================================== */

/* Base
   ========================================================================== */

.cta-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 70px;
    position: relative;
    text-decoration: none;
    line-height: 1;
    isolation: isolate; /* Contiene il mix-blend-mode dentro il bottone */
    background-color: #FFFFFF;
    cursor: pointer;
}

.cta-link__background {
    width: 100%;
    height: 100%;
    position: absolute;
    mix-blend-mode: lighten;
    background: linear-gradient(to right, #003A5D 0% 40%, #009BCB 60% 100%);
    background-size: 400% 100%;
    background-position: 50%;
    z-index: 2; /* Sopra label e arrows per il blend */
    pointer-events: none;
    transition: background-position 0.5s cubic-bezier(0.09, 0.955, 0.45, 0.985);
}

/* SVG Arrows
   ========================================================================== */

.cta-link__arrow {
    height: 100%;
    width: auto;
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.cta-link__arrow path {
    fill: #000000; /* Nero, così il lighten blend mostra il gradient */
}

.cta-link__arrow--right {
    transform: scaleX(-1);
}

/* Label
   ========================================================================== */

.cta-link__label {
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Fira Sans", sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 120%;
    letter-spacing: 1.1px;
    padding: 0 40px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: padding 0.5s cubic-bezier(0.09, 0.955, 0.45, 0.985);
}

/* Hover
   ========================================================================== */

.cta-link:hover .cta-link__background {
    background-position: 100%;
}

.cta-link:hover .cta-link__label {
    padding: 0 30px;
}

/* Size Variants
   ========================================================================== */

/* Small */
.cta-link--small {
    height: 50px;
}

.cta-link--small .cta-link__label {
    font-size: 16px;
    padding: 0 25px;
    letter-spacing: 0.8px;
}

.cta-link--small:hover .cta-link__label {
    padding: 0 18px;
}

/* Medium */
.cta-link--medium {
    height: 60px;
}

.cta-link--medium .cta-link__label {
    font-size: 19px;
    padding: 0 32px;
    letter-spacing: 1px;
}

.cta-link--medium:hover .cta-link__label {
    padding: 0 24px;
}

/* Large */
.cta-link--large {
    height: 85px;
}

.cta-link--large .cta-link__label {
    font-size: 26px;
    padding: 0 55px;
    letter-spacing: 1.3px;
}

.cta-link--large:hover .cta-link__label {
    padding: 0 42px;
}

/* Big Large */
.cta-link--big_large {
    height: 95px;
}

.cta-link--big_large .cta-link__label {
    font-size: 28px;
    padding: 0 60px;
    letter-spacing: 1.4px;
}

.cta-link--big_large:hover .cta-link__label {
    padding: 0 48px;
}

/* Big Large Full Width */
.cta-link--big_large_full_width {
    height: 95px;
    width: 100%;
}

.cta-link--big_large_full_width .cta-link__label {
    font-size: 28px;
    padding: 0 60px;
    letter-spacing: 1.4px;
    flex: 1;
}

.cta-link--big_large_full_width:hover .cta-link__label {
    padding: 0 48px;
}

/* Wrapper (alignment)
   ========================================================================== */

.cta-link-wrapper {
    display: block;
}