/* ==========================================================================
   cards.css
   Image cards (standard, tall and three-card rows) and pricing cards.

   01. Image Cards
   02. Image Cards: Three-Card Layout
   03. Pricing Cards
   ========================================================================== */

/* ==== 01. Image Cards ==== */
.card-image {
    border: 0;
    padding: 0;
    row-gap: 20px;
    column-gap: 20px;
}

/* Base image box */
.card-image .image-box {
    border: 0;
    padding: 0;
    min-height: 200px;
    height: auto;
    overflow: hidden;
}

/* Base image (ONLY applies if there is actually an <img> tag inside .image-box) */
.card-image .image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    max-height: 260px; /* desktop cap */
}

/* Tall image box (Elementor container w/ BACKGROUND image) */
.card-image .image-box-tall {
    aspect-ratio: 4 / 5;
    border: 0;
    padding: 0;

    /* Keep this for desktop, but remove on mobile so ratio can scale */
    max-height: 325px;

    height: auto;
    overflow: hidden;

    /* IMPORTANT: because this is a background image container */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Tall image (applies when an <img> is inside .image-box-tall,
   e.g. an Elementor Image widget with the image-box-tall class) */
.card-image .image-box-tall img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    max-height: 325px; /* desktop cap */
}

/* Tablet: lower max height */
@media (max-width: 1024px) {
    .card-image .image-box {
        min-height: 150px;
    }

    .card-image .image-box-tall {
        aspect-ratio: 4 / 5;
    }

    .card-image .image-box img {
        max-height: 200px;
    }
}

/* Mobile: force image boxes to keep aspect ratios + remove tall cap so 4:5 holds */
@media (max-width: 767px) {
    .card-image .image-box {
        aspect-ratio: 3 / 2; /* maintains 3:2 ratio */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        min-height: auto; /* let aspect-ratio control height */
    }

    .card-image .image-box-tall {
        aspect-ratio: 4 / 5; /* maintains 4:5 ratio */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        min-height: auto; /* let aspect-ratio control height */

        max-height: none; /* let aspect-ratio control height on mobile */
    }

    .card-image .image-box img {
        width: 100%;
        height: 100%;
        max-height: none; /* remove the desktop cap */
        object-fit: cover; /* fills the box */
        object-position: center;
    }

    /* If you ever place an <img> inside .image-box-tall on mobile */
    .card-image .image-box-tall img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        object-position: center;
    }
}

.card-image .text-box {
    border: 0;
    padding: 0;
}

/* 0) Remove underline from the wrapping link (all states) */
a.card-image,
a.card-image:visited,
a.card-image:hover,
a.card-image:focus {
    text-decoration: none !important;
}

/* 1) Headline h2 - never underline */
a.card-image .headline h2,
a.card-image .headline .elementor-heading-title {
    text-decoration: none !important;
}

/* 2) Body heading title - never underline */
a.card-image .body .elementor-heading-title {
    text-decoration: none !important;
}

/* Default: btn-link underlined */
a.card-image .btn-link .elementor-heading-title {
    text-decoration: underline !important;
    font-size: var(--font-size-16) !important;
}

/* On hover anywhere in the card, remove underline */
a.card-image:hover .btn-link .elementor-heading-title {
    text-decoration: none !important;
}

/* ...and when hovering the button area */
a.card-image .btn-link:hover .elementor-heading-title {
    text-decoration: none !important;
}

/* ==== 02. Image Cards: Three-Card Layout ==== */
/*
   Applies ONLY when a row holds exactly three .card-image cards.
   Four-or-more rows are untouched and keep the rules in section 01.

   Two ways it triggers (either one works):
     a) Automatic: the parent container has exactly 3 direct children
        and they are .card-image cards.
     b) Manual: add the class "cards-three" to the parent container
        (Elementor > Advanced > CSS Classes). Use this if the parent
        also holds other elements, like a heading.

   Result: image is always 4:5 and never taller than 450px
   (so never wider than 360px), at every screen size.
   :is() is used so browsers without :has() still honor .cards-three.
*/

/* Undo the 325px cap on the widget wrapper; let the <img> set the size */
:is(.cards-three, .e-con:has(> .card-image:nth-child(3):last-child)) .card-image .image-box-tall {
    aspect-ratio: auto;
    max-height: none;
    height: auto;
    width: 100%;
    display: block;
}

/* The image itself carries the 4:5 ratio and the 450px cap */
:is(.cards-three, .e-con:has(> .card-image:nth-child(3):last-child)) .card-image .image-box-tall img {
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 360px; /* 450px × 4/5 – keeps ratio when the cap is hit */
    height: auto;
    max-height: 450px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ==== 03. Pricing Cards ==== */
.elementor .pricingContainer h3 {
    margin-bottom: 0 !important;
    font-weight: var(--weight-bold);
}

.pricingContainer > .e-con {
    width: fit-content !important;
    flex: 0 0 auto !important;
    min-width: 0;
}

.elementor .pricingContainer .monthlyPrice {
    font-size: var(--font-size-14) !important;
    margin-bottom: 3px !important;
    font-weight: var(--weight-bold) !important;
    color: var(--color-primary) !important;
}

.elementor .pricingContainer .annualSavingsVirtual,
.elementor .pricingContainer .annualSavingsTrue {
    font-size: var(--font-size-14) !important;
    margin-bottom: 0 !important;
    font-weight: var(--weight-regular);
    color: var(--content-secondary) !important;
}

.elementor .price-virtual .value,
.elementor .price-true .value {
    font-family: var(--typography-font-secondary) !important;
    font-size: var(--font-size-12) !important;
    text-transform: uppercase !important;
    color: var(--content-primary) !important;
    letter-spacing: var(--letter-spacing-pos-014) !important;
}

.elementor .littleBadge span {
    margin-bottom: 20px !important;
}

.elementor .littleBadge .elementor-heading-title .value {
    font-family: var(--typography-font-secondary) !important;
    font-size: var(--font-size-12) !important;
    text-transform: uppercase !important;
    color: var(--content-primary) !important;
    letter-spacing: var(--letter-spacing-pos-014) !important;
}

.banner-contact {
    border-radius: var(--image-border-radius);
    background: var(--background-tertiary, #e7e7e4);
    backdrop-filter: blur(20px);
    display: flex;
    padding: 60px;
    align-items: center;
    gap: 60px;
}

.banner-contact .text {
    flex: 1; /* take up all remaining space */
    min-width: 0; /* prevent overflow */
}

.banner-contact .button {
    flex: 0 auto; /* shrink to fit its content */
    width: auto; /* width just as wide as the button text */
}

/* Mobile (≤768px): stack & full width */
@media (max-width: 768px) {
    .banner-contact {
        flex-direction: column;
        align-items: flex-start; /* left aligned */
        gap: 30px; /* space between text and button */
    }

    .banner-contact .text,
    .banner-contact .button {
        flex: none;
        width: 100%; /* full width on mobile */
    }
}

.banner-contact.inverse {
    background: var(--background-primary-inverse, #141413);
}

/* Default: desktop + mobile (≤767px and ≥1025px) */
.banner-contact .elementor-button {
    width: 276px;
}

/* Tablet (768px–1024px): shrink to text width */
@media (min-width: 768px) and (max-width: 1024px) {
    .banner-contact .elementor-button {
        width: auto; /* just as wide as text */
        min-width: 0; /* prevent Elementor from enforcing min width */
    }
}