/* ─── Card Grid Component — reusable across v2 landing pages ────────────────
 *
 * Companion to script.js in this same folder.
 * Ported from assets2/css/macrosnap.css's `.ms-card-clip` / `.ms-ai-badge-gradient`
 * / `.ms-snap-*` rules, renamed to `.ef-card-grid-*` so it works on any page.
 * ───────────────────────────────────────────────────────────────────────── */

/* overflow:clip with an overflow:hidden fallback for older Safari (<16). */
.ef-card-grid-clip { overflow: hidden; overflow: clip; }

/* Glossy "AI" pill background (radial gradient + navy base, matches macrosnap). */
.ef-card-grid-ai-badge {
    background-image:
        url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNDEgMjAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgcHJlc2VydmVBc3BlY3RSYXRpbz0nbm9uZSc+PHJlY3QgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgZmlsbD0ndXJsKCNncmFkKScgb3BhY2l0eT0nMScvPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0nZ3JhZCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIGN4PScwJyBjeT0nMCcgcj0nMTAnIGdyYWRpZW50VHJhbnNmb3JtPSdtYXRyaXgoMy44NDU5IC0zLjggMS45MzE1IDcuNTY2OCAtMC4wMDAwMDExMTcyIDQ2KSc+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgxODgsMjQzLDkyLDEpJyBvZmZzZXQ9JzAuMDczNTE3Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyMDUsMjQ0LDEyNiwxKScgb2Zmc2V0PScwLjEzNzY4Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyMjEsMjQ1LDE2MCwxKScgb2Zmc2V0PScwLjIwMTg0Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyNTUsMjQ3LDIyNywxKScgb2Zmc2V0PScwLjMzMDE2Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgxOTIsMjI3LDIzMywxKScgb2Zmc2V0PScwLjM2ODgnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDEyOSwyMDcsMjM4LDEpJyBvZmZzZXQ9JzAuNDA3NDUnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDk4LDE5NywyNDEsMSknIG9mZnNldD0nMC40MjY3OCcvPjxzdG9wIHN0b3AtY29sb3I9J3JnYmEoNjYsMTg4LDI0NCwxKScgb2Zmc2V0PScwLjQ0NjEnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDM1LDE3OCwyNDcsMSknIG9mZnNldD0nMC40NjU0MycvPjxzdG9wIHN0b3AtY29sb3I9J3JnYmEoMTksMTczLDI0OSwxKScgb2Zmc2V0PScwLjQ3NTA5Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgzLDE2OCwyNTAsMSknIG9mZnNldD0nMC40ODQ3NScvPjxzdG9wIHN0b3AtY29sb3I9J3JnYmEoMTUsMTMyLDIxMywwLjc1KScgb2Zmc2V0PScwLjY0MDgyJy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyNyw5NiwxNzYsMC41KScgb2Zmc2V0PScwLjc5NjknLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDEzLDQ4LDg4LDAuMjUpJyBvZmZzZXQ9JzAuODk4NDUnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDAsMCwwLDApJyBvZmZzZXQ9JzEnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48L3N2Zz4="),
        linear-gradient(90deg, #081537 0%, #081537 100%);
    background-size: 100% 100%;
}

/* Swiper overrides for the "stacked" mobile_layout's tablet carousel
   (768px – below static_breakpoint), fixed 415px card width. */
.ef-card-grid-swiper                     { overflow: unset; }
.ef-card-grid-swiper .swiper-wrapper     { align-items: stretch; }

.ef-card-grid-swiper.ef-card-grid-swiper--clip { overflow: hidden; }

/* Only the content block should grow to fill leftover height when
   align-items:stretch (above) equalizes slide heights — the image box
   must keep its own image_aspect_class size, not split it 50/50. */
.ef-card-grid-swiper .swiper-slide > div:last-child { flex: 1; }

/* Built-in Swiper pagination — pill bullets (matches card-carousel.css) */
.ef-card-grid-pagination.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    bottom: auto;
    left: auto;
    line-height: 0;
}

.ef-card-grid-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    background: #333;
    opacity: 0.2;
    border-radius: 99px;
    margin: 0 !important;
    transition: opacity 0.2s ease;
}

.ef-card-grid-pagination .swiper-pagination-bullet-active { opacity: 1; }
/* Hide when swiper is locked (all cards fit — watchOverflow sets this class) */
.ef-card-grid-pagination.swiper-pagination-lock { display: none; }