
/* =========================================================
   ECQA FEATURE CARDS 1.4.5
   Clean consolidated stylesheet
   ========================================================= */

.ecqa-featurecards {
    --ecqa-bg: #ffffff;
    --ecqa-card-bg: #ffffff;
    --ecqa-primary: #27378f;
    --ecqa-title: #273445;
    --ecqa-text: #52647a;
    --ecqa-section-radius: 40px;
    --ecqa-card-radius: 16px;
    --ecqa-max-width: 1180px;
    --ecqa-pad-top: 72px;
    --ecqa-pad-bottom: 72px;

    position: relative;
    display: block !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: var(--ecqa-pad-top) 20px var(--ecqa-pad-bottom);
    background: var(--ecqa-section-bg, #eef7fc);
    overflow-x: clip;
    font-family: inherit;
}

.ecqa-featurecards *,
.ecqa-featurecards *::before,
.ecqa-featurecards *::after {
    box-sizing: border-box;
}

.ecqa-featurecards.has-section-background {
    border-radius: var(--ecqa-section-radius, 40px);
    overflow: hidden;
}

.ecqa-featurecards.no-section-background {
    border-radius: 0;
    background: transparent;
}

.ecqa-featurecards__inner {
    display: block !important;
    width: 100% !important;
    max-width: var(--ecqa-max-width, 1180px) !important;
    margin: 0 auto !important;
}

.ecqa-featurecards__header {
    max-width: 820px;
    margin: 0 auto 50px;
    text-align: center;
}

.ecqa-featurecards__header h2 {
    margin: 0 0 18px;
    color: var(--ecqa-title);
    font-family: inherit;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.ecqa-featurecards__header p {
    margin: 0;
    color: var(--ecqa-text);
    font-family: inherit;
    font-size: 17px;
    line-height: 1.6;
}

.ecqa-featurecards__grid {
    display: grid !important;
    grid-template-columns: repeat(var(--ecqa-columns, 3), minmax(0, 1fr));
    gap: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.ecqa-featurecard {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 100%;
    padding: 38px 30px;
    border-radius: var(--ecqa-card-radius, 16px);
    background: var(--ecqa-card-bg);
    text-align: center;
    box-shadow: 0 16px 42px rgba(39,55,143,.08);
    transition: transform .22s ease, box-shadow .22s ease;
}

.ecqa-featurecard:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 52px rgba(39,55,143,.13);
}

.ecqa-featurecard__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    color: var(--ecqa-primary);
}

.ecqa-featurecard__icon svg,
.ecqa-featurecard__icon img {
    max-width: 100%;
    max-height: 100%;
}

.ecqa-featurecard h3 {
    margin: 0 0 18px;
    color: var(--ecqa-title);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.ecqa-featurecard__text {
    color: var(--ecqa-text);
    font-family: inherit;
    font-size: 17px;
    line-height: 1.55;
}

.ecqa-featurecard__text > :first-child { margin-top: 0; }
.ecqa-featurecard__text > :last-child { margin-bottom: 0; }

.ecqa-featurecard__button {
    display: inline-flex !important;
    width: auto !important;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 13px 25px !important;
    border: 2px solid var(--ecqa-primary, #27378f) !important;
    border-radius: 999px !important;
    background: var(--ecqa-primary, #27378f) !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(39, 55, 143, .18);
    transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.ecqa-featurecard__button::after {
    content: "\2192";
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s ease;
}

.ecqa-featurecard__button:hover,
.ecqa-featurecard__button:focus-visible {
    background: #ffffff !important;
    color: var(--ecqa-primary, #27378f) !important;
    text-decoration: none !important;
    box-shadow: 0 11px 26px rgba(39, 55, 143, .24);
    transform: translateY(-2px);
}

.ecqa-featurecard__button:hover::after,
.ecqa-featurecard__button:focus-visible::after {
    transform: translateX(3px);
}

.ecqa-featurecard__button:focus-visible {
    outline: 3px solid rgba(39, 55, 143, .25);
    outline-offset: 3px;
}

/* Never let an internal card grid escape into a parent row. */
.ecqa-featurecards__grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 1000px) {
    .ecqa-featurecards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .ecqa-featurecards {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ecqa-featurecards__header {
        margin-bottom: 36px;
    }

    .ecqa-featurecards__header h2 {
        font-size: 28px;
    }

    .ecqa-featurecards__grid {
        grid-template-columns: 1fr;
        gap: 20px !important;
    }

    .ecqa-featurecard {
        padding: 30px 24px;
    }
}


/* =========================================================
   ECQA Feature Cards 1.4.1
   Restore ECQA line icons + centered 5-card layout
   ========================================================= */

/* Built-in ECQA SVG icons are line icons. The previous consolidated
   stylesheet missed these stroke rules, so browser defaults rendered
   them as solid black shapes. */
.ecqa-featurecard__icon svg {
    display: block;
    width: var(--ecqa-icon-size, 60px);
    height: var(--ecqa-icon-size, 60px);
    overflow: visible;
    fill: none !important;
    stroke: var(--ecqa-icon, #27378f) !important;
    stroke-width: 2.1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.ecqa-featurecard__icon svg * {
    fill: none !important;
    stroke: inherit !important;
    stroke-width: inherit !important;
    stroke-linecap: inherit !important;
    stroke-linejoin: inherit !important;
}

.ecqa-featurecard__icon img {
    display: block;
    width: var(--ecqa-icon-size, 60px);
    height: var(--ecqa-icon-size, 60px);
    object-fit: contain;
}

/* Five cards with 3 cards per row:
   use a 6-track grid so row 1 remains three equal cards,
   while the two cards in row 2 sit centered beneath them. */
@media (min-width: 1001px) {
    .ecqa-featurecards.cards-count-5 .ecqa-featurecards__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .ecqa-featurecards.cards-count-5 .ecqa-featurecard {
        grid-column: span 2;
    }

    .ecqa-featurecards.cards-count-5 .ecqa-featurecard:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .ecqa-featurecards.cards-count-5 .ecqa-featurecard:nth-child(5) {
        grid-column: 4 / span 2;
    }
}


/* =========================================================
   ECQA Feature Cards 1.4.2 – Helix-safe
   The module no longer changes parent rows/columns/wrappers.
   Helix controls the page structure; this CSS controls only
   the card module itself.
   ========================================================= */

.ecqa-featurecards {
    float: none !important;
    clear: both !important;
}

/* Transparent cards module remains inside its assigned Helix position. */
.ecqa-featurecards.no-section-background {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Colored background may be full-bleed without touching parent layout. */
.ecqa-featurecards.has-section-background {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* ECQA Feature Cards 1.4.3 – background color fix */
.ecqa-featurecards.has-section-background {
    background: var(--ecqa-section-bg, #eef7fc) !important;
}

.ecqa-featurecards.no-section-background {
    background: transparent !important;
}
.ecqa-featurecards[id] {
    scroll-margin-top: 130px;
}

/* ECQA shared section heading standard */
.ecqa-featurecards__header h2 {
    font-family: inherit !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}
@media (max-width: 991px) { .ecqa-featurecards__header h2 { font-size: 32px !important; } }
@media (max-width: 767px) { .ecqa-featurecards__header h2 { font-size: 28px !important; } }
/* ECQA final heading normalization */
html body .ecqa-featurecards .ecqa-featurecards__header > h2 {
    font-family: inherit !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}
@media (max-width: 991px) { html body .ecqa-featurecards .ecqa-featurecards__header > h2 { font-size: 32px !important; } }
@media (max-width: 767px) { html body .ecqa-featurecards .ecqa-featurecards__header > h2 { font-size: 28px !important; } }
/* ECQA universal main module heading */
html body h2.ecqa-section-title.ecqa-section-title {
    font-family: inherit !important;
    font-size: 36px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}
@media (max-width: 991px) {
    html body h2.ecqa-section-title.ecqa-section-title { font-size: 32px !important; }
}
@media (max-width: 767px) {
    html body h2.ecqa-section-title.ecqa-section-title { font-size: 28px !important; }
}


/* ECQA unified action button interaction */
.ecqa-featurecard__button {
  position: relative; z-index: 2; pointer-events: auto; touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
.ecqa-featurecard__button:hover {
  background: #ffffff !important; color: #27378f !important; border-color: #27378f !important;
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(39,55,143,.14);
}
}
.ecqa-featurecard__button:focus-visible { outline: 3px solid rgba(39,55,143,.25); outline-offset: 3px; }
@media (hover: none), (pointer: coarse) {
.ecqa-featurecard__button { -webkit-tap-highlight-color: rgba(39,55,143,.12); }
.ecqa-featurecard__button:hover { transform: none; }
}

/* ECQA unified action-button hover — 2026-09-11 */
@media (hover: hover) and (pointer: fine) {
  .ecqa-project__button:hover,
  .ecqa-contactcta__button:hover,
  .ecqa-hero .ecqa-button:hover,
  .ecqa-project-card__button:hover,
  .ecqa-contentblock__button:hover,
  .ecqa-contentblock__button--primary:hover,
  .ecqa-contentblock__button--secondary:hover,
  .ecqa-newsletter__fields button:hover,
  .ecqa-video-services__button:hover,
  .ecqa-featurecard__button:hover,
  .ecqa-contactform__form button[type="submit"]:hover,
  .ecqa-contactform__form input[type="submit"]:hover,
  .ecqa-contactform__form .btn-primary:hover,
  .ecqa-contactform__form .visBtn:hover,
  .ecqa-trainingprovider__button:hover,
  .ecqa-exam-card__button:hover,
  .ecqa-news__button:hover {
    background: #1f2d73 !important;
    border-color: #1f2d73 !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateY(-2px);
  }
}


/* 1.4.18 – single Feature Card: roughly two-card width and centered.
   Trigger on the actual number of cards, not only the columns setting. */
@media (min-width: 992px) {
    .ecqa-featurecards.cards-count-1 .ecqa-featurecards__grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
    }
    .ecqa-featurecards.cards-count-1 .ecqa-featurecard {
        width: min(100%, 780px) !important;
        max-width: 780px !important;
        grid-column: 1 / -1 !important;
    }
}

/* 1.4.19 – card width by ACTUAL card count.
   One card may be wide; exactly two cards keep the normal compact card width
   and are centered instead of stretching across the full content area. */
@media (min-width: 1001px) {
    .ecqa-featurecards.cards-count-2 .ecqa-featurecards__grid {
        grid-template-columns: repeat(2, minmax(0, 360px)) !important;
        justify-content: center !important;
        justify-items: stretch !important;
    }
    .ecqa-featurecards.cards-count-2 .ecqa-featurecard {
        width: 100% !important;
        max-width: 360px !important;
        grid-column: auto !important;
    }
}
