/* ============================================================
   Location Spoke — Common Claims
   File: assets/css/spoke/spoke-common-claims.css
   Scope: .spoke-common-claims__* classes only
   Figma: node 2200:222 — navy section, header + horizontal Swiper of
   fixed-width (300px) white cards that overflow the container.
   White cards: 240x240 square image, title, body, link.
   ============================================================ */

.spoke-common-claims {
    background: var(--spoke-navy);
    color: var(--spoke-cream);
    overflow: hidden;
}

.spoke-common-claims__header {
    text-align: center;
    max-width: 825px;
    margin: 0 auto 50px;
}

.spoke-common-claims__heading {
    color: var(--spoke-white);
}

.spoke-common-claims__intro {
    margin-bottom: 0;
    color: var(--spoke-stat-label);
}

/* ---- Carousel shell: fixed-width cards overflow the 1220px container ---- */
.spoke-common-claims__swiper {
    position: relative; /* contains the absolutely-positioned nav arrows */
    max-width: 1220px;
    margin: 0 auto;
}

/* slidesPerView:'auto' honors this fixed slide width (Figma card = 300px) */
.spoke-common-claims__swiper .swiper-slide {
    width: 300px;
    height: auto; /* equal-height cards; card stretches to tallest slide */
}

.spoke-common-claims__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    background: var(--spoke-white);
    border-radius: var(--spoke-radius-card);
    padding: 30px;
}

.spoke-common-claims__card-img {
    display: block;
    width: 100%;
    /* height:auto overrides the height="" presentational hint that
       wp_get_attachment_image emits; without it the definite HTML height
       makes the browser ignore aspect-ratio and render a tall portrait. */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--spoke-radius-img);
}

/* ---- Title row: 28x28 icon + title (Figma node 2200:252 group) ---- */
.spoke-common-claims__card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.spoke-common-claims__card-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    /* icons vary in native aspect ratio; fit them inside the 28x28 box
       exactly like the Figma 28x28 icon frame (scaled to fit, centered). */
    object-fit: contain;
}

.spoke-common-claims__card-title {
    margin: 0;
    font-family: var(--spoke-font-sans);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--spoke-navy);
}

.spoke-common-claims__card-body {
    margin: 0;
    font-family: var(--spoke-font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.04em;
    color: var(--spoke-navy);
}

.spoke-common-claims__card-link {
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--spoke-font-sans);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: var(--spoke-blue);
}

.spoke-common-claims__card-link:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* ---- Nav arrows: solid blue circles (matches testimonials treatment) ---- */
.spoke-common-claims__swiper .swiper-button-next,
.spoke-common-claims__swiper .swiper-button-prev {
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    background: var(--spoke-blue);
    border-radius: 50%;
    --swiper-navigation-color: var(--spoke-white);
    --swiper-navigation-size: 16px;
    transition: opacity 0.15s;
}

.spoke-common-claims__swiper .swiper-button-next {
    right: 0;
}

.spoke-common-claims__swiper .swiper-button-prev {
    left: 0;
}

.spoke-common-claims__swiper .swiper-button-next:hover,
.spoke-common-claims__swiper .swiper-button-prev:hover {
    opacity: 0.88;
}

.spoke-common-claims__swiper .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* ============================
   RESPONSIVE — COMMON CLAIMS
   ============================ */

@media (max-width: 768px) {
    .spoke-common-claims__swiper .swiper-slide {
        width: 280px;
    }

    .spoke-common-claims__card {
        padding: 24px;
    }

    /* Mobile relies on touch/swipe scrolling, not the arrow controls */
    .spoke-common-claims__swiper .swiper-button-next,
    .spoke-common-claims__swiper .swiper-button-prev {
        display: none;
    }
}