:root {
    --unid-primary: #1377D9;
    --unid-primary-dark: #0B5FB5;
    --unid-text: #4F5663;
    --unid-title: #1377D9;
    --unid-muted: #7B8493;
    --unid-border: #DFE7F0;
    --unid-surface: #FFFFFF;
    --unid-discount: #F04438;
    --unid-discount-bg: #FFF0EE;
}

.unid-course-card,
.unid-course-card * {
    box-sizing: border-box;
}

.unid-course-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "image header"
        "image commercial"
        "image actions";
    column-gap: 22px;
    row-gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 16px;
    background: var(--unid-surface);
    border: 1px solid #F4F7FB;
    border-radius: 18px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.10);
}

.unid-course-card__image {
    grid-area: image;
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
    aspect-ratio: 1 / 1;
    align-self: center;
    overflow: hidden;
    border-radius: 10px;
    background: #F3F6F9;
}

.unid-course-card__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.unid-course-card__header {
    grid-area: header;
    min-width: 0;
    align-self: start;
}

.unid-course-card__title {
    display: block;
    color: var(--unid-title);
    font-size: clamp(20px, 1.45vw, 23px);
    font-weight: 700;
    line-height: 1.22;
    text-decoration: none;
    /* Left-align explicitly: this card is inserted into arbitrary theme/plugin
       contexts (e.g. Anywhere Elementor Pro), some of which apply their own
       centered text-align to product-loop-like markup. !important protects
       against that regardless of the host rule's specificity. */
    text-align: left !important;
}

.unid-course-card__title:hover,
.unid-course-card__title:focus-visible {
    color: var(--unid-primary-dark);
}

.unid-course-card__subtitle {
    margin: 7px 0 0;
    color: var(--unid-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left !important;
}

.unid-course-card__commercial {
    grid-area: commercial;
    min-width: 0;
    align-self: center;
}

.unid-course-card__price-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 16px;
}

.unid-course-card__sale-price {
    color: var(--unid-primary);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.unid-course-card__regular-price {
    color: var(--unid-muted);
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
}

.unid-course-card__discount {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--unid-discount-bg);
    color: var(--unid-discount);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left !important;
}

.unid-course-card__availability-banner {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--unid-discount-bg);
    color: var(--unid-discount);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center !important;
}

.unid-course-card__availability-banner::before {
    content: '🔥';
    margin-right: 8px;
    font-size: 14px;
}

.unid-services {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.unid-service {
    /* Badge widths vary per icon (78-139px). The row must never wrap, so
       instead of a fixed/uniform width, each badge keeps its natural size
       (flex-basis: auto) when there's room and shrinks proportionally
       (flex-shrink) when the row doesn't fit — never grows past its design
       size. */
    flex: 0 1 auto;
    min-width: 0;
}

.unid-service__desktop {
    display: block;
    width: 100%;
    height: auto;
}

.unid-service__mobile {
    display: none;
}

.unid-course-card__actions {
    grid-area: actions;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: end;
    gap: 12px;
}

.unid-course-card__button {
    display: flex;
    flex: 0 0 150px;
    width: 150px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1.5px solid var(--unid-primary);
    border-radius: 7px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Colors inverted from the original design: Dettagli now solid blue/white text,
   Iscriviti now white/blue text. Each button's hover state is the inverse of its
   own base state (i.e. matches the OTHER button's base look), per explicit request. */
.unid-course-card__button--details {
    background: var(--unid-primary);
    color: #FFFFFF;
}

.unid-course-card__button--details:hover,
.unid-course-card__button--details:focus-visible {
    border-color: var(--unid-primary-dark);
    background: #FFFFFF;
    color: var(--unid-primary-dark);
}

.unid-course-card__button--enrol {
    background: #FFFFFF;
    color: var(--unid-primary);
}

.unid-course-card__button--enrol:hover,
.unid-course-card__button--enrol:focus-visible {
    border-color: var(--unid-primary);
    background: var(--unid-primary);
    color: #FFFFFF;
}

/* Matches Elementor core's "elementor-animation-pulse-grow" (assets/lib/animations/styles/e-animation-pulse-grow.min.css),
   used site-wide on UP production buttons — kept independent of the Elementor plugin's own stylesheet since this card
   can render without it. */
@keyframes unid-course-card-pulse-grow {
    to { transform: scale(1.1); }
}

.unid-course-card__button:hover,
.unid-course-card__button:focus-visible {
    animation-name: unid-course-card-pulse-grow;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Dettagli keeps the color-inversion hover but not the pulse-grow scale effect. */
.unid-course-card__button--details:hover,
.unid-course-card__button--details:focus-visible {
    animation: none;
}

/* Tablet: immagine ancora quadrata, misure leggermente ridotte. */
@media (max-width: 1100px) and (min-width: 768px) {
    .unid-course-card {
        grid-template-columns: 156px minmax(0, 1fr);
        column-gap: 16px;
    }

    .unid-course-card__image {
        width: 156px;
        height: 156px;
    }

    .unid-course-card__title {
        font-size: 19px;
    }

    /* The narrower tablet column doesn't have room to keep the discount pill
       inline without shrinking it into an unreadable multi-line sliver that
       overlaps the actions column — revert to wrapping it onto its own line
       here, same as it already does below the mobile breakpoint. */
    .unid-course-card__price-row {
        flex-wrap: wrap;
    }
}

/* Mobile: niente immagine, testo centrato, sole icone con tooltip al click. */
@media (max-width: 767px) {
    .unid-course-card {
        display: block;
        padding: 15px 13px 13px;
        border-radius: 15px;
        text-align: center;
    }

    .unid-course-card__image {
        display: none;
    }

    .unid-course-card__header {
        display: block;
    }

    .unid-course-card__title {
        font-size: 22px;
        line-height: 1.2;
        text-align: center !important;
    }

    .unid-course-card__subtitle {
        margin-top: 7px;
        font-size: 16px;
        line-height: 1.42;
        text-align: center !important;
    }

    /* "A partire da" needs to sit directly above the sale price specifically —
       not above the visual midpoint of "sale price + crossed-out regular price"
       combined, which is wider and shifts that midpoint to the right of the sale
       price alone. Sharing one grid between the label and the price-row's
       children (via display:contents on the row, so they become direct grid
       items here) puts the label in the same column as the sale price, so that
       column's width is sized to whichever of the two is wider, and both end up
       centered over the same box regardless of what the regular price is doing
       in the next column over. */
    .unid-course-card__commercial {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        column-gap: 14px;
        row-gap: 4px;
        margin-top: 14px;
    }

    .unid-course-card__price-row {
        display: contents;
    }

    .unid-course-card__sale-price {
        grid-column: 1;
        grid-row: 2;
        font-size: 32px;
    }

    .unid-course-card__regular-price {
        grid-column: 2;
        grid-row: 2;
        font-size: 25px;
    }

    .unid-course-card__discount {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: center;
        width: fit-content;
        max-width: 100%;
        margin-top: 1px;
        padding: 7px 10px;
        font-size: 18px;
        text-align: center !important;
    }

    /* No longer a child of .commercial's own grid (moved into .actions in the
       markup so desktop can put it on the same line as the buttons) — order: -1
       puts it back visually above the buttons here, in the same position it
       occupied before, since .actions is flex-direction: column on mobile. */
    .unid-course-card__availability-banner {
        order: -1;
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
        font-size: 18px;
        text-align: center !important;
    }

    .unid-services {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
        gap: 8px;
        width: 100%;
        overflow: visible;
    }

    .unid-service {
        position: relative;
        min-width: 0;
    }

    .unid-service__desktop {
        display: none;
    }

    .unid-service__mobile {
        position: relative;
        display: inline-flex;
        width: 100%;
        min-width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .unid-service__mobile img {
        width: 42px;
        height: 42px;
        display: block;
    }

    .unid-service__tooltip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        z-index: 30;
        width: max-content;
        max-width: 145px;
        padding: 7px 9px;
        border: 1px solid var(--unid-border);
        border-radius: 7px;
        background: #1F2937;
        color: #FFFFFF;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 5px);
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
        pointer-events: none;
    }

    .unid-service__tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        border: 5px solid transparent;
        border-top-color: #1F2937;
        transform: translateX(-50%);
    }

    .unid-service__mobile.is-open .unid-service__tooltip,
    .unid-service__mobile:focus-visible .unid-service__tooltip {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .unid-service:first-child .unid-service__tooltip {
        left: 0;
        transform: translate(0, 5px);
    }

    .unid-service:first-child .unid-service__tooltip::after {
        left: 21px;
        transform: none;
    }

    .unid-service:last-child .unid-service__tooltip {
        right: 0;
        left: auto;
        transform: translate(0, 5px);
    }

    .unid-service:last-child .unid-service__tooltip::after {
        right: 16px;
        left: auto;
        transform: none;
    }

    .unid-service:first-child .unid-service__mobile.is-open .unid-service__tooltip,
    .unid-service:first-child .unid-service__mobile:focus-visible .unid-service__tooltip,
    .unid-service:last-child .unid-service__mobile.is-open .unid-service__tooltip,
    .unid-service:last-child .unid-service__mobile:focus-visible .unid-service__tooltip {
        transform: translate(0, 0);
    }

    .unid-course-card__actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
    }

    .unid-course-card__button {
        flex: 0 0 auto;
        width: 100%;
        min-height: 44px;
        font-size: 20px;
    }
}