/**
 * 3 Column Call to Action – Block Styles
 *
 * Covers both the parent (rs-cta-three-column) and child (rs-cta-card) elements.
 * Loaded once via the parent block; the child block shares these styles.
 *
 * Asymmetric grid:
 *   Desktop – 3 equal flex columns with align-items: flex-start.
 *             The 2nd child (middle card) receives margin-top: 62px to shift it
 *             downward, matching the Figma asymmetric layout.
 *   Mobile  – Single column stack; offset is reset to 0.
 *
 * Image handling:
 *   - Fixed image-wrapper height so card titles align across all three cards
 *     regardless of description length.
 *   - Object-fit: cover crops any upload size to the slot.
 *   - Loading skeleton animates until the img fires its load event (JS in render.php).
 */

/* ====================================================================
   SECTION WRAPPER
   ==================================================================== */

.rs-cta-three-column {
    /* background-color is set via inline style from the block attribute */
    padding-top: 2rem;      /* 32px mobile */
    padding-bottom: 1.5rem; /* 24px */
    width: 100%;
}

@media (min-width: 1024px) {
    .rs-cta-three-column {
        padding-top: 3rem;      /* 48px desktop */
        padding-bottom: 1.5rem;
    }
}

/* ====================================================================
   SECTION HEADING
   ==================================================================== */

.rs-cta-three-column__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.875rem; /* 30px – mobile */
    line-height: 1.2;
    color: #0d1a3a;
    text-align: center;
    margin: 0 0 1.5rem;  /* 24px below on mobile */
}

@media (min-width: 1024px) {
    .rs-cta-three-column__title {
        font-size: 2.5rem;   /* 40px – desktop */
        margin-bottom: 2.5rem; /* 40px below on desktop */
    }
}

/* ====================================================================
   GRID CONTAINER
   ==================================================================== */

.rs-cta-three-column__grid {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px – mobile */
}

@media (min-width: 1024px) {
    .rs-cta-three-column__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem; /* 64px – desktop, matches Figma */
    }

    /* Equal-width columns on desktop */
    .rs-cta-three-column__grid > * {
        flex: 1 1 0;
        min-width: 0;
    }

    /*
     * Asymmetric offset: the middle card shifts down ~62 px.
     * Derived from Figma: outer wrappers for L/R are 570 px tall,
     * cards are 445 px — (570 − 445) / 2 = 62.5 px.
     */
    .rs-cta-three-column__grid > *:nth-child(2) {
        margin-top: 62px;
    }
}

/* ====================================================================
   INDIVIDUAL CARD
   ==================================================================== */

.rs-cta-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Card link (wraps image + content) ──────────────────────────── */

.rs-cta-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

.rs-cta-card__link:hover {
    box-shadow: 0 8px 24px rgba(13, 26, 58, 0.12);
}

.rs-cta-card__link:focus-visible {
    outline: 2px solid #2451c6;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ====================================================================
   IMAGE AREA
   ==================================================================== */

.rs-cta-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 260px;  /* mobile */
    overflow: hidden;
    flex-shrink: 0;
    background-color: #cfd9f1;
}

@media (min-width: 1024px) {
    .rs-cta-card__image-wrapper {
        height: 300px; /* desktop — fixed so all title rows align */
    }
}

/* Loading skeleton */
.rs-cta-card__skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #cfd9f1 25%,
        #e8edf7 50%,
        #cfd9f1 75%
    );
    background-size: 200% 100%;
    animation: rs-cta-shimmer 1.6s ease-in-out infinite;
    z-index: 1;
}

@keyframes rs-cta-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Image */
.rs-cta-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops to fit regardless of upload dimensions */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.rs-cta-card__img.is-loaded {
    opacity: 1;
}

/* Hide skeleton once image is loaded */
.rs-cta-card__image-wrapper:has(.rs-cta-card__img.is-loaded) .rs-cta-card__skeleton {
    display: none;
}

/* No-image placeholder */
.rs-cta-card__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #ebeff9;
    border: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: #5279e0;
}

/* ====================================================================
   CARD CONTENT
   ==================================================================== */

.rs-cta-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;  /* 8px */
    padding: 0.875rem 2.1875rem 2rem; /* 14px top / 35px sides / 32px bottom */
}

/* ── Title row: heading + arrow on same line ─────────────────────── */

.rs-cta-card__title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.rs-cta-card__heading {
    flex: 1 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    color: #0d1a3a;
    margin: 0;
}

.rs-cta-card__arrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.5625rem; /* 25px */
    line-height: 1.3;
    color: #0d1a3a;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Slide arrow on card hover/focus */
.rs-cta-card__link:hover  .rs-cta-card__arrow,
.rs-cta-card__link:focus-visible .rs-cta-card__arrow {
    transform: translateX(5px);
}

/* ── Description ─────────────────────────────────────────────────── */

.rs-cta-card__description {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1rem;  /* 16px */
    line-height: 1.4;
    color: #0d1a3a;
    margin: 0;
}

/* ====================================================================
   EDITOR-ONLY ADJUSTMENTS
   (applies when block is in the WP block editor canvas)
   ==================================================================== */

.rs-cta-card--editing .rs-cta-card__img {
    /* Show image immediately in editor — no JS skeleton reveal needed */
    opacity: 1;
}

.rs-cta-card--editing .rs-cta-card__skeleton {
    display: none;
}