/* ==========================================================================
   Card Block — Base
   ========================================================================== */

.forzaco-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 48px 96px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: translate 0.3s ease, box-shadow 0.3s ease;
}

.forzaco-card--no-arrow {
    padding-bottom: 48px;
}

a.forzaco-card:hover {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
}

/* Icon (inline SVG) */
.forzaco-card__icon svg {
    width: 38px;
    height: 37px;
    display: block;
}

/* Logo (raster image) */
.forzaco-card__logo {
    min-height: 48px;
    display: flex;
    align-items: center;
}

.forzaco-card__logo img {
    max-height: 48px;
    width: auto;
}

/* Title */
.forzaco-card .forzaco-card__title {
    font-family: "Poppins", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.48px;
    margin: 1em 0 0;
}

/* Description */
.forzaco-card__desc {
    margin-top: 16px;
}

.forzaco-card__desc,
.forzaco-card__desc p {
    font-family: "Poppins", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 25.2px;
    margin-bottom: 0;
}

/* Author — white capsule */
.forzaco-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    background-color: #fff;
    border-radius: 48px;
    padding: 8px 16px 8px 8px;
}

.forzaco-card__author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.forzaco-card__author-info {
    display: flex;
    flex-direction: column;
}

.forzaco-card__author-name {
    font-family: "Poppins", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #020617;
}

.forzaco-card__author-desc {
    font-family: "Poppins", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #4545C4;
}

/* Arrow — bottom-right corner */
.forzaco-card__arrow {
    position: absolute;
    right: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 24px 0 8px 0;
    overflow: hidden;
}

.forzaco-card__arrow svg {
    width: 19px;
    height: 14px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

a.forzaco-card:hover .forzaco-card__arrow svg {
    animation: arrow-slide-through 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes arrow-slide-through {
    0%   { transform: translateX(0);    opacity: 1; }
    40%  { transform: translateX(20px); opacity: 0; }
    41%  { transform: translateX(-20px); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}

/* ==========================================================================
   Style: Green — bg #20FFC9, text #083B2E
   ========================================================================== */

.forzaco-card--green {
    background-color: #20FFC9;
    color: #083B2E;
}

.forzaco-card--green .forzaco-card__title,
.forzaco-card--green .forzaco-card__desc,
.forzaco-card--green .forzaco-card__desc p {
    color: #083B2E;
}

.forzaco-card--green .forzaco-card__icon svg {
    color: #083B2E;
    fill: #083B2E;
}

.forzaco-card--green .forzaco-card__arrow {
    background-color: #083B2E;
    color: #F9FDFF;
}

/* ==========================================================================
   Style: Blue — bg #B0E4FF, text #4545C4
   ========================================================================== */

.forzaco-card--blue {
    background-color: #B0E4FF;
    color: #4545C4;
}

.forzaco-card--blue .forzaco-card__title,
.forzaco-card--blue .forzaco-card__desc,
.forzaco-card--blue .forzaco-card__desc p {
    color: #4545C4;
}

.forzaco-card--blue .forzaco-card__icon svg {
    color: #4545C4;
    fill: #4545C4;
}

.forzaco-card--blue .forzaco-card__arrow {
    background-color: #4545C4;
    color: #F9FDFF;
}

/* ==========================================================================
   Style: Purple — bg #4545C4, text #EEF9FF
   ========================================================================== */

.forzaco-card--purple {
    background-color: #4545C4;
    color: #EEF9FF;
}

.forzaco-card--purple .forzaco-card__title,
.forzaco-card--purple .forzaco-card__desc,
.forzaco-card--purple .forzaco-card__desc p {
    color: #EEF9FF;
}

.forzaco-card--purple .forzaco-card__icon svg {
    color: #EEF9FF;
    fill: #EEF9FF;
}

.forzaco-card--purple .forzaco-card__arrow {
    background-color: #1B1B7D;
    color: #F9FDFF;
}

/* ==========================================================================
   Style: Light — bg #EEF9FF, text #020617
   ========================================================================== */

.forzaco-card--light {
    background-color: #EEF9FF;
    color: #020617;
}

.forzaco-card--light .forzaco-card__title,
.forzaco-card--light .forzaco-card__desc,
.forzaco-card--light .forzaco-card__desc p {
    color: #020617;
}

.forzaco-card--light .forzaco-card__icon svg {
    color: #4545C4;
    fill: #4545C4;
}

.forzaco-card--light .forzaco-card__author-desc {
    color: #4545C4;
}

.forzaco-card--light .forzaco-card__arrow {
    background-color: #4545C4;
    color: #F9FDFF;
}

/* ==========================================================================
   Editor override — reset inherited color on ACF form fields
   ========================================================================== */

.acf-block-fields input[type="text"],
.acf-block-fields textarea,
.acf-block-fields select {
    color: #2c3338;
}