/* ==========================================================================
   Vertical Accordion + Image Block
   ========================================================================== */

/* --- Section wrapper --- */
.vai-image {
    padding: 80px 0;
    background: #ffffff;
}

/* --- Section Header --- */
.vai-image__header {
    text-align: center;
    margin-bottom: 56px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.vai-image__block-title {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.1;
    color: #063354;
    margin-bottom: 20px;
}

.vai-image__block-title.vai-title-navy { color: #063354; }
.vai-image__block-title.vai-title-grey { color: #5e5e5e; }
.vai-image__block-title.vai-title-white { color: #ffffff; }

.vai-image__block-content,
.vai-image__block-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #5e5e5e;
}

/* --- Two-column panel --- */
.vai-image__panel {
    display: flex;
    align-items: center;
    gap: 56px;
}

/* Image-right: list left, media right (default) */
.vai-image--image-right .vai-image__list {
    order: 1;
}
.vai-image--image-right .vai-image__media-col {
    order: 2;
}

/* Image-left: media left, list right */
.vai-image--image-left .vai-image__list {
    order: 2;
}
.vai-image--image-left .vai-image__media-col {
    order: 1;
}

/* --- List column --- */
.vai-image__list {
    flex: 0 0 38%;
    max-width: 38%;
    display: flex;
    flex-direction: column;
}

/* --- Media column --- */
.vai-image__media-col {
    flex: 1;
    position: relative;
    min-height: 360px;
}

.vai-image__media-frame {
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #c8edff 0%, #a8dff8 100%); /* fallback for legacy rows */
    padding: 38px 38px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.vai-image__media-img {
    display: block;
    width: 800px;
    /* height: 500px; */
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    object-fit: cover;  
    object-position: center;
    min-height: 280px;
    overflow: hidden;
}

.vai-image__media-lottie {
  position: relative;
  width: 800px;
  height: 450px;
  aspect-ratio: 16 / 9;
  max-height: 450px;
  max-width: 100%;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.vai-image__media-lottie canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */

.vai-image__item {
    border-bottom: 1px solid #d9d9d9;
    padding: 0 16px;
    margin: 0 -16px;
    border-radius: 8px;
}

.vai-image__item:first-child {
    border-top: 1px solid #d9d9d9;
}

.vai-image__item-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    gap: 12px;
}

.vai-image__item-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: #063354;
    transition: color 0.2s;
}

.vai-image__item.is-active .vai-image__item-title {
    font-weight: 700;
}

.vai-image__chevron {
    flex-shrink: 0;
    color: #063354;
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.vai-image__item.is-active .vai-image__chevron {
    transform: rotate(180deg);
}

.vai-image__item-content {
    padding-bottom: 24px;
}

.vai-image__item-body,
.vai-image__item-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #5e5e5e;
}

/* ==========================================================================
   SECTION BACKGROUND OPTIONS
   ========================================================================== */

.vai-bg-white   { background: #ffffff; }
.vai-bg-grey    { background: #f4f3f1; }
.vai-bg-blue-highlight { background: #e9f6fe; }

.vai-bg-blue {
    background: #0070b9;
}
.vai-bg-blue .vai-image__block-title,
.vai-bg-blue .vai-image__block-content,
.vai-bg-blue .vai-image__block-content p,
.vai-bg-blue .vai-image__item-title,
.vai-bg-blue .vai-image__item:not(.is-active) .vai-image__item-body,
.vai-bg-blue .vai-image__item:not(.is-active) .vai-image__item-body p {
    color: #ffffff;
}
.vai-bg-blue .vai-image__item {
    border-color: rgba(255, 255, 255, 0.3);
}

.vai-bg-navy {
    background: #063354;
}
.vai-bg-navy .vai-image__block-title,
.vai-bg-navy .vai-image__block-content,
.vai-bg-navy .vai-image__block-content p,
.vai-bg-navy .vai-image__item-title,
.vai-bg-navy .vai-image__item-body,
.vai-bg-navy .vai-image__item-body p {
    color: #ffffff;
}
.vai-bg-navy .vai-image__item {
    border-color: rgba(255, 255, 255, 0.2);
}

.vai-bg-blue-gradient {
    background: radial-gradient(ellipse at 0% 100%, #d8f4fe, #a9d5ed);
}

.vai-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   ITEM FRAME BACKGROUND OPTIONS
   ========================================================================== */

.vai-frame-white          { background: #ffffff; }
.vai-frame-grey           { background: #f4f3f1; }
.vai-frame-blue-highlight { background: #e9f6fe; }
.vai-frame-blue           { background: #0070b9; }
.vai-frame-navy           { background: #063354; }
.vai-frame-blue-gradient  { background: linear-gradient(180deg, #c8edff 0%, #a8dff8 100%); }

/* ==========================================================================
   ACCORDION TITLE / CONTENT TEXT COLOR (block-level)
   --vai-title        : title + arrow when the item is inactive
   --vai-title-hover  : title + arrow on hover (inactive item)
   --vai-title-active : title + arrow when the item is active
   --vai-body         : body text (set by Content Text Color)
   ========================================================================== */

.vai-image {
    --vai-title: #063354;
    --vai-title-hover: #0070b9;
    --vai-title-active: #04263f;
}

.vai-accordion-title-navy  { --vai-title: #063354; --vai-title-hover: #0070b9; }
.vai-accordion-title-grey  { --vai-title: #5e5e5e; --vai-title-hover: #0070b9; }
.vai-accordion-title-white { --vai-title: #ffffff; --vai-title-hover: #d7ecfb; }

/* Accordion Title Hover Color overrides the default hover color (must follow the title color rules). */
.vai-accordion-hover-blue      { --vai-title-hover: #0070b9; }
.vai-accordion-hover-light-blue { --vai-title-hover: #d7ecfb; }
.vai-accordion-hover-navy      { --vai-title-hover: #063354; }
.vai-accordion-hover-grey      { --vai-title-hover: #5e5e5e; }
.vai-accordion-hover-white     { --vai-title-hover: #ffffff; }
.vai-accordion-hover-orange    { --vai-title-hover: #f28c28; }

/* Accordion Title Active Color (optional) overrides the active title/arrow only. */
.vai-active-title-navy  { --vai-title-active-override: #063354; }
.vai-active-title-blue  { --vai-title-active-override: #0070b9; }
.vai-active-title-black { --vai-title-active-override: #000000; }
.vai-active-title-white { --vai-title-active-override: #ffffff; }

/* Content Text Color drives the active title, active arrow and body text. */
.vai-entry-text-dark  { --vai-title-active: #063354; --vai-body: #063354; }
.vai-entry-text-light { --vai-title-active: #ffffff; --vai-body: #ffffff; }

/* With no highlight behind the active item, keep the active title on the inactive color. */
.vai-image:not(.vai-entry-text-dark):not(.vai-entry-text-light) .vai-image__item.is-active.vai-tab-active-transparent {
    --vai-title-active: var(--vai-title);
}

.vai-image .vai-image__item-title,
.vai-image .vai-image__chevron { color: var(--vai-title); }

.vai-image .vai-image__item-trigger:hover .vai-image__item-title,
.vai-image .vai-image__item-trigger:hover .vai-image__chevron { color: var(--vai-title-hover); }

/* Inactive items always use the Accordion Title Color, regardless of Content Text Color or background. */
.vai-image .vai-image__item:not(.is-active) .vai-image__item-title,
.vai-image .vai-image__item:not(.is-active) .vai-image__chevron { color: var(--vai-title); }

.vai-image .vai-image__item:not(.is-active) .vai-image__item-trigger:hover .vai-image__item-title,
.vai-image .vai-image__item:not(.is-active) .vai-image__item-trigger:hover .vai-image__chevron { color: var(--vai-title-hover); }

.vai-image .vai-image__item.is-active .vai-image__item-title,
.vai-image .vai-image__item.is-active .vai-image__item-trigger:hover .vai-image__item-title,
.vai-image .vai-image__item.is-active .vai-image__chevron,
.vai-image .vai-image__item.is-active .vai-image__item-trigger:hover .vai-image__chevron { color: var(--vai-title-active-override, var(--vai-title-active)); }

.vai-entry-text-dark .vai-image__item-body,
.vai-entry-text-dark .vai-image__item-body p,
.vai-entry-text-light .vai-image__item-body,
.vai-entry-text-light .vai-image__item-body p { color: var(--vai-body); }

/* ==========================================================================
   ACTIVE ACCORDION ITEM HIGHLIGHT
   ========================================================================== */

.vai-image__item.vai-tab-active-grey,
.vai-image__item.vai-tab-active-blue-highlight,
.vai-image__item.vai-tab-active-blue-gradient,
.vai-image__item.vai-tab-active-white,
.vai-image__item.vai-tab-active-transparent {
    border-top-color: transparent;
    border-bottom-color: transparent;
    margin: 4px -16px;
}

.vai-image__item.vai-tab-active-grey         { background: #f4f3f1; }
.vai-image__item.vai-tab-active-blue-highlight { background: #e9f6fe; }
.vai-image__item.vai-tab-active-blue-gradient  { background: radial-gradient(ellipse at 0% 100%, #eefbff, #d3ecf8); }
.vai-image__item.vai-tab-active-white        { background: #ffffff; }
.vai-image__item.vai-tab-active-transparent  { background: transparent; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .vai-image__panel {
        flex-direction: column;
        gap: 40px;
    }

    .vai-image__list {
        flex: none;
        max-width: 100%;
        width: 100%;
        order: 2 !important;
    }

    .vai-image__media-col {
        width: 100%;
        min-height: 220px;
        order: 1 !important;
    }
}

@media (max-width: 767px) {
    .vai-image {
        padding: 56px 0;
    }

    .vai-image__header {
        margin-bottom: 36px;
    }

    .vai-image__media-frame {
        padding: 20px 20px 0;
    }

    .vai-image__media-img,
    .vai-image__media-lottie {
        min-height: 180px;
    }

    .vai-image__item-trigger {
        padding: 16px 0;
    }

    .vai-image__item-title {
        font-size: 16px;
    }
}

/* --- Section Header --- */
.vat-image__header {
    text-align: center;
    margin-bottom: 56px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.vat-image__block-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.1;
    color: #063354;
    margin-bottom: 20px;
}

.vat-image__block-content,
.vat-image__block-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #5e5e5e;
}

/* --- Two-column panel --- */
.vat-image__panel {
    display: flex;
    align-items: flex-start;
    gap: 56px;
}

/* Image-right: list left, media right (default) */
.vat-image--image-right .vat-image__list {
    order: 1;
}
.vat-image--image-right .vat-image__media-col {
    order: 2;
}

/* Image-left: media left, list right */
.vat-image--image-left .vat-image__list {
    order: 2;
}
.vat-image--image-left .vat-image__media-col {
    order: 1;
}

/* --- List column --- */
.vat-image__list {
    flex: 0 0 38%;
    max-width: 38%;
    display: flex;
    flex-direction: column;
}

/* --- Media column --- */
.vat-image__media-col {
    flex: 1;
    position: relative;
    min-height: 360px;
}

.vat-image__media-frame {
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #c8edff 0%, #a8dff8 100%);
    padding: 28px 28px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.vat-image__media-img,
.vat-image__media-lottie {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 8px 8px 0 0;
    object-fit: cover;
    min-height: 280px;
}

/* ==========================================================================
   ACCORDION MODE
   ========================================================================== */

.vat-image--accordion .vat-image__item--accordion {
    border-bottom: 1px solid #d9d9d9;
}

.vat-image--accordion .vat-image__item--accordion:first-child {
    border-top: 1px solid #d9d9d9;
}

.vat-image--accordion .vat-image__item-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    gap: 12px;
}

.vat-image--accordion .vat-image__item-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: #063354;
    transition: color 0.2s;
}

.vat-image--accordion .vat-image__item-trigger:hover .vat-image__item-title,
.vat-image--accordion .vat-image__item--accordion.is-active .vat-image__item-title {
    color: #0070b9;
}

.vat-image__chevron {
    flex-shrink: 0;
    color: #0070b9;
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.vat-image--accordion .vat-image__item--accordion.is-active .vat-image__chevron {
    transform: rotate(180deg);
}

.vat-image--accordion .vat-image__item-content {
    padding-bottom: 24px;
}

.vat-image--accordion .vat-image__item-body,
.vat-image--accordion .vat-image__item-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #5e5e5e;
}

/* ==========================================================================
   TABS MODE
   ========================================================================== */

.vat-image--tabs .vat-image__item--tab {
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s;
    outline: none;
}

.vat-image--tabs .vat-image__item--tab:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 112, 185, 0.35);
}

.vat-image--tabs .vat-image__item-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: #063354;
    margin: 0 0 8px;
    transition: color 0.2s;
}

.vat-image--tabs .vat-image__item--tab.is-active .vat-image__item-title {
    color: #0070b9;
}

.vat-image--tabs .vat-image__item-body,
.vat-image--tabs .vat-image__item-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #5e5e5e;
    margin: 0;
}

/* --- Tab active highlight colors --- */
.tab-active-grey {
    background: #f4f3f1;
}

.tab-active-blue-highlight {
    background: #e9f6fe;
}

.tab-active-blue-gradient {
    background: linear-gradient(135deg, #d8f0fd 0%, #c0e6fb 100%);
}

/* ==========================================================================
   SECTION BACKGROUND OPTIONS
   ========================================================================== */

.vat-bg-white   { background: #ffffff; }
.vat-bg-grey    { background: #f4f3f1; }

.vat-bg-blue-highlight { background: #e9f6fe; }

.vat-bg-blue {
    background: #0070b9;
}
.vat-bg-blue .vat-image__block-title,
.vat-bg-blue .vat-image__block-content,
.vat-bg-blue .vat-image__block-content p,
.vat-bg-blue .vat-image__item-title,
.vat-bg-blue .vat-image__item-body,
.vat-bg-blue .vat-image__item-body p {
    color: #ffffff;
}
.vat-bg-blue .vat-image--accordion .vat-image__item--accordion {
    border-color: rgba(255, 255, 255, 0.3);
}

.vat-bg-navy {
    background: #063354;
}
.vat-bg-navy .vat-image__block-title,
.vat-bg-navy .vat-image__block-content,
.vat-bg-navy .vat-image__block-content p,
.vat-bg-navy .vat-image__item-title,
.vat-bg-navy .vat-image__item-body,
.vat-bg-navy .vat-image__item-body p {
    color: #ffffff;
}
.vat-bg-navy .vat-image--accordion .vat-image__item--accordion {
    border-color: rgba(255, 255, 255, 0.2);
}

.vat-bg-blue-gradient {
    background: linear-gradient(135deg, #d8f0fd 0%, #a8dff8 100%);
}

.vat-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .vat-image__panel {
        flex-direction: column;
        gap: 40px;
    }

    .vat-image__list {
        flex: none;
        max-width: 100%;
        width: 100%;
        order: 2 !important;
    }

    .vat-image__media-col {
        width: 100%;
        min-height: 220px;
        order: 1 !important;
    }
}

@media (max-width: 767px) {
    .vat-image {
        padding: 56px 0;
    }

    .vat-image__header {
        margin-bottom: 36px;
    }

    .vat-image__media-frame {
        padding: 20px 20px 0;
    }

    .vat-image__media-img,
    .vat-image__media-lottie {
        min-height: 180px;
    }

    .vat-image--accordion .vat-image__item-trigger {
        padding: 16px 0;
    }

    .vat-image--accordion .vat-image__item-title,
    .vat-image--tabs .vat-image__item-title {
        font-size: 16px;
    }
}