﻿/* =========================================================
   UNIFIED WHY CHOOSE SECTIONS
   Static and inner pages follow the homepage card style.
========================================================= */

.lowc-sec,
.why-choose-section,
.wcm-sec,
.mssp-choose-section {
    position: relative;
    padding: 64px 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    overflow: hidden;
}

.lowc-heading-wrap,
.wcm-heading-wrap,
.mssp-choose-intro {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.lowc-title,
.why-choose-section .section-heading,
.wcm-title,
.mssp-choose-heading {
    margin: 8px 0 12px !important;
    color: #071d49 !important;
    font-size: var(--h2-size, 42px) !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
}

.lowc-desc,
.why-choose-section .section-para,
.wcm-desc,
.mssp-choose-para {
    max-width: 760px !important;
    margin: 0 auto 28px !important;
    color: #5f6b7a !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.lowc-card,
.wcm-program-wrap {
    max-width: 1120px !important;
    margin: 28px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lowc-card-title,
.why-choose-section .sub-intro,
.wcm-program-lead {
    margin: 0 0 22px !important;
    color: #071d49 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.lowc-list,
.why-choose-section .program-wrapper,
.wcm-checklist,
.mssp-choose-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

.why-choose-section .program-wrapper > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.lowc-item,
.why-choose-section .program-item,
.wcm-check-item,
.mssp-choose-card {
    position: relative !important;
    min-height: 138px !important;
    padding: 24px 16px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #17395c !important;
    box-shadow: 0 10px 26px rgba(17, 24, 39, .10) !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease;
}

.lowc-item:nth-child(8n+1),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+1) .program-item,
.wcm-check-item:nth-child(8n+1),
.mssp-choose-card:nth-child(8n+1) { --wcu-color: #2b6cff; }
.lowc-item:nth-child(8n+2),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+2) .program-item,
.wcm-check-item:nth-child(8n+2),
.mssp-choose-card:nth-child(8n+2) { --wcu-color: #ff4d8d; }
.lowc-item:nth-child(8n+3),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+3) .program-item,
.wcm-check-item:nth-child(8n+3),
.mssp-choose-card:nth-child(8n+3) { --wcu-color: #22c55e; }
.lowc-item:nth-child(8n+4),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+4) .program-item,
.wcm-check-item:nth-child(8n+4),
.mssp-choose-card:nth-child(8n+4) { --wcu-color: #7c3aed; }
.lowc-item:nth-child(8n+5),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+5) .program-item,
.wcm-check-item:nth-child(8n+5),
.mssp-choose-card:nth-child(8n+5) { --wcu-color: #f97316; }
.lowc-item:nth-child(8n+6),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+6) .program-item,
.wcm-check-item:nth-child(8n+6),
.mssp-choose-card:nth-child(8n+6) { --wcu-color: #14b8a6; }
.lowc-item:nth-child(8n+7),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+7) .program-item,
.wcm-check-item:nth-child(8n+7),
.mssp-choose-card:nth-child(8n+7) { --wcu-color: #eab308; }
.lowc-item:nth-child(8n+8),
.why-choose-section .program-wrapper > [class*="col-"]:nth-child(8n+8) .program-item,
.wcm-check-item:nth-child(8n+8),
.mssp-choose-card:nth-child(8n+8) { --wcu-color: #8b5cf6; }

.lowc-item::before,
.why-choose-section .program-item::before,
.wcm-check-item::before,
.mssp-choose-card::before {
    content: "";
    position: absolute;
    inset: -45% -20%;
    z-index: -1;
    background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.8) 50%, transparent 72%);
    opacity: 0;
    transform: translateX(-55%) rotate(12deg);
    transition: transform .58s ease, opacity .34s ease;
}

.lowc-item::after,
.why-choose-section .program-item::after,
.wcm-check-item::after,
.mssp-choose-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 5px;
    border-radius: 999px 999px 0 0;
    background: var(--wcu-color, #2b6cff);
    transform: scaleX(.6);
    transform-origin: center;
    transition: transform .34s ease;
}

.lowc-item:hover,
.why-choose-section .program-item:hover,
.wcm-check-item:hover,
.mssp-choose-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 22px 44px rgba(17, 24, 39, .18) !important;
}

.lowc-item:hover::before,
.why-choose-section .program-item:hover::before,
.wcm-check-item:hover::before,
.mssp-choose-card:hover::before {
    opacity: .9;
    transform: translateX(42%) rotate(12deg);
}

.lowc-item:hover::after,
.why-choose-section .program-item:hover::after,
.wcm-check-item:hover::after,
.mssp-choose-card:hover::after {
    transform: scaleX(1);
}

.lowc-check,
.why-choose-section .program-icon,
.wcm-check-icon,
.mssp-choose-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: var(--wcu-color, #2b6cff) !important;
    box-shadow: 0 10px 18px rgba(17, 24, 39, .18) !important;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease;
}

.lowc-check svg,
.why-choose-section .program-icon svg,
.wcm-check-icon svg,
.mssp-choose-icon svg {
    width: 27px !important;
    height: 27px !important;
    stroke: currentColor !important;
}

.lowc-item:hover .lowc-check,
.why-choose-section .program-item:hover .program-icon,
.wcm-check-item:hover .wcm-check-icon,
.mssp-choose-card:hover .mssp-choose-icon {
    transform: translateY(-5px) rotate(-5deg) scale(1.08);
    box-shadow: 0 16px 28px rgba(17, 24, 39, .22) !important;
}

.lowc-item-text,
.why-choose-section .program-text,
.wcm-check-text {
    color: #17395c !important;
    font-weight: 800 !important;
}

@media (max-width: 991.98px) {
    .lowc-list,
    .why-choose-section .program-wrapper,
    .wcm-checklist,
    .mssp-choose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    .lowc-sec,
    .why-choose-section,
    .wcm-sec,
    .mssp-choose-section {
        padding: 44px 0 !important;
    }

    .lowc-title,
    .why-choose-section .section-heading,
    .wcm-title,
    .mssp-choose-heading {
        font-size: min(var(--h2-size, 32px), 32px) !important;
    }

    .lowc-list,
    .why-choose-section .program-wrapper,
    .wcm-checklist,
    .mssp-choose-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .lowc-item,
    .why-choose-section .program-item,
    .wcm-check-item,
    .mssp-choose-card {
        min-height: 112px !important;
        padding: 18px 14px 22px !important;
    }
}

/* Spanish page lower sections must remain visible after shared page CSS. */
.mssp-facts-section,
.mssp-cefr-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

.mssp-facts-section .container,
.mssp-cefr-section .container,
.mssp-facts-stats,
.mssp-facts-list,
.mssp-cefr-banner,
.mssp-cefr-grid,
.mssp-cefr-cta {
    display: grid;
    visibility: visible !important;
    opacity: 1 !important;
}

.mssp-facts-section .container,
.mssp-cefr-section .container,
.mssp-facts-list,
.mssp-cefr-banner,
.mssp-cefr-cta {
    display: block !important;
}

.mssp-facts-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mssp-cefr-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .mssp-facts-stats,
    .mssp-cefr-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Spanish animation fallback: keep content visible even if the page script is cached or missing. */
.mssp-whyintro-animate,
.mssp-whyfeature-animate {
    opacity: 1 !important;
    visibility: visible !important;
}

.mssp-whyintro-animate:not(.mssp-whyintro-in-view),
.mssp-whyfeature-animate:not(.mssp-whyfeature-in-view) {
    transform: none !important;
}

/* French page refinements */
.fr-countries-grid {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.fr-countries-card {
    transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease !important;
}

.why-learn-fr-stat-num.fr-count {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fib-tag-highlight {
    color: #ffffff !important;
    border-color: #c80f2e !important;
    background: linear-gradient(135deg, #e71d36 0%, #b60928 100%) !important;
    box-shadow: 0 12px 24px rgba(200, 15, 46, .24) !important;
    transform: translateY(-2px);
}

.locs-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.locs-sec,
.locs-sec .container,
.locs-sec .row,
.locs-wrap,
.locs-heading-wrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.locs-wrap {
    width: 100% !important;
}

.locs-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 26px auto 0 !important;
    padding: 0 !important;
    max-width: 1120px !important;
    list-style: none !important;
}

.locs-list li {
    position: relative;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px !important;
    border: 1px solid rgba(200, 15, 46, .14);
    border-radius: 999px;
    background: #ffffff;
    color: #1f2a44;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .08);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    isolation: isolate;
    transition: color .28s ease, transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.locs-list li::before {
    content: "";
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1;
    background: linear-gradient(135deg, #e71d36 0%, #b60928 100%);
    border-radius: inherit !important;
    opacity: 0;
    transform: scaleX(.2);
    transform-origin: left;
    transition: transform .32s ease, opacity .24s ease;
}

.locs-list li:hover {
    color: #ffffff;
    border-color: #c80f2e;
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(200, 15, 46, .22);
}

.locs-list li:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

@media (max-width: 575.98px) {
    .locs-list {
        gap: 9px !important;
    }

    .locs-list li {
        width: 100%;
        min-height: 42px;
        padding: 9px 13px !important;
        font-size: 13px;
    }
}

/* CEFR and language level cards: shared reference style */
.cefr-sec,
.mssp-cefr-section,
.levels-section {
    background:
        radial-gradient(circle at 12px 12px, rgba(15, 23, 42, .055) 1px, transparent 1.5px) 0 0 / 22px 22px,
        #ffffff !important;
    padding-top: 64px !important;
    padding-bottom: 72px !important;
}

.cefr-grid,
.mssp-cefr-grid,
.levels-wrapper {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px !important;
}

.levels-wrapper > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.cefr-card,
.mssp-cefr-card,
.cefr-level-card {
    --level-color: #214b9b;
    --level-bg: #eef3ff;
    --level-soft: rgba(33, 75, 155, .12);
    position: relative !important;
    min-height: 420px !important;
    height: 100% !important;
    padding: 12px 20px 0px !important;
    border: 2px solid var(--level-color) !important;
    border-radius: 8px !important;
    background: var(--level-bg) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .36s ease, border-color .36s ease !important;
}

.cefr-card:nth-child(2),
.mssp-cefr-card:nth-child(2),
.levels-wrapper > [class*="col-"]:nth-child(2) .cefr-level-card {
    --level-color: #ff6333;
    --level-bg: #fff5ef;
    --level-soft: rgba(255, 99, 51, .14);
}

.cefr-card:nth-child(3),
.mssp-cefr-card:nth-child(3),
.levels-wrapper > [class*="col-"]:nth-child(3) .cefr-level-card {
    --level-color: #2ecc71;
    --level-bg: #effdf3;
    --level-soft: rgba(46, 204, 113, .16);
}

.cefr-card::before,
.mssp-cefr-card::before,
.cefr-level-card::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: var(--level-soft);
    z-index: -1;
    transition: transform .42s ease;
}

.cefr-card::after,
.mssp-cefr-card::after,
.cefr-level-card::after {
    content: "";
    position: absolute;
    left: -55px;
    bottom: -70px;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: var(--level-soft);
    z-index: -1;
    transition: transform .42s ease;
}

.cefr-card:hover,
.mssp-cefr-card:hover,
.cefr-level-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 26px 54px rgba(15, 23, 42, .15) !important;
}

.cefr-card:hover::before,
.mssp-cefr-card:hover::before,
.cefr-level-card:hover::before {
    transform: scale(1.12) translate(-8px, 8px);
}

.cefr-card:hover::after,
.mssp-cefr-card:hover::after,
.cefr-level-card:hover::after {
    transform: scale(1.15) translate(10px, -8px);
}

.cefr-badge,
.mssp-cefr-tag,
.cefr-level-code {
    width: 112px !important;
    height: 112px !important;
    margin: 0 0 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px dashed var(--level-color) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .35) !important;
    color: var(--level-color) !important;
    box-shadow: none !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    transition: transform .34s ease, background .34s ease, color .34s ease !important;
}

.cefr-card:hover .cefr-badge,
.mssp-cefr-card:hover .mssp-cefr-tag,
.cefr-level-card:hover .cefr-level-code {
    transform: translateY(-4px) scale(1.04);
    background: var(--level-color) !important;
    color: #ffffff !important;
}

.cefr-level,
.mssp-cefr-level-title,
.cefr-level-card .cefr-level-tag {
    color: #071d49 !important;
}

.cefr-level,
.mssp-cefr-level-title {
    margin: 0 0 18px !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
}

.cefr-desc,
.mssp-cefr-level-para,
.cefr-level-desc {
    color: #5f6673 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

.cefr-card-bg {
    display: none !important;
}

.cefr-card-content {
    position: static !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

.cefr-card > *,
.mssp-cefr-card > *,
.cefr-level-card > *,
.cefr-card-content > * {
    position: relative;
    z-index: 2;
}

.cefr-card:hover .cefr-level,
.mssp-cefr-card:hover .mssp-cefr-level-title,
.cefr-level-card:hover .cefr-level-tag {
    color: #071d49 !important;
}

.cefr-card:hover .cefr-desc,
.mssp-cefr-card:hover .mssp-cefr-level-para,
.cefr-level-card:hover .cefr-level-desc {
    color: #4b5563 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.cefr-level-code .cefr-level-tag {
    display: block !important;
    width: 100%;
    margin-top: 5px;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

@media (max-width: 991.98px) {
    .cefr-grid,
    .mssp-cefr-grid,
    .levels-wrapper {
        grid-template-columns: 1fr !important;
    }

    .cefr-card,
    .mssp-cefr-card,
    .cefr-level-card {
        min-height: 0 !important;
        padding: 38px 28px 34px !important;
    }
}

@media (max-width: 575.98px) {
    .cefr-sec,
    .mssp-cefr-section,
    .levels-section {
        padding-top: 46px !important;
        padding-bottom: 52px !important;
    }

    .cefr-badge,
    .mssp-cefr-tag,
    .cefr-level-code {
        width: 94px !important;
        height: 94px !important;
        margin-bottom: 24px !important;
        border-radius: 24px !important;
        font-size: 16px !important;
    }

    .cefr-level,
    .mssp-cefr-level-title {
        font-size: 23px !important;
    }

    .cefr-desc,
    .mssp-cefr-level-para,
    .cefr-level-desc {
        font-size: 15px !important;
    }
}

