/**
 * Written Immigration Assessment Page Styles
 *
 * @package Visa_Matters
 */

/* =========================
   SHARED
========================= */
.via-subtitle {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-20);
    font-weight: var(--vm-fw-500);
    color: var(--vm-blue-dark, #4db1d8);
    display: block;
    margin-bottom: 12px;
}

.via-section-title {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-46);
    font-weight: var(--vm-fw-500);
    line-height: 52px;
    letter-spacing: -0.03em;
    color: var(--vm-heading, #28264e);
    margin-bottom: 20px;
}

.via-section-title--inverse {
    color: var(--vm-white, #ffffff);
}

/* =========================
   SECTION 1 — HERO
========================= */
.via-hero {
    padding: 80px 0;
}

.via-hero__desc {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-20);
    line-height: 26px;
    letter-spacing: -0.02em;
    color: var(--vm-text-body, #3e3e3e);
    margin-bottom: 30px;
}

.via-hero__desc p:last-child {
    margin-bottom: 0;
}

.via-hero__image {
    width: 100%;
    max-width: 590px;
    height: 475px;
    object-fit: cover;
    border-radius: 6px;
}

/* =========================
   SECTION 2 — OVERVIEW
========================= */
.via-overview {
    padding: 80px 0;
    background: var(--vm-grey-light, #f5f5f5);
}

.via-overview__desc {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-20);
    line-height: 26px;
    letter-spacing: -0.02em;
    color: var(--vm-text-body, #3e3e3e);
    margin-bottom: 30px;
}

.via-overview__desc p:last-child {
    margin-bottom: 0;
}

.via-overview__image {
    width: 100%;
    max-width: 590px;
    height: 475px;
    object-fit: cover;
    border-radius: 6px;
}

/* =========================
   SECTION 3 — PROCESS (image cards)
========================= */
.via-process {
    padding: 80px 0;
    background: var(--vm-white, #ffffff);
}

.via-process .via-section-title {
    margin-bottom: 50px;
}

.via-process .vm-service-card {
    border-radius: var(--vm-radius-6, 6px);
    background: var(--vm-white, #ffffff);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.via-process .vm-service-card img {
    width: 100%;
    height: var(--vm-size-256, 256px);
    min-height: var(--vm-size-256, 256px);
    max-height: var(--vm-size-256, 256px);
    display: block;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 400 / 256;
    border-radius: var(--vm-radius-6, 6px) var(--vm-radius-6, 6px) 0 0;
}

.via-process__image-placeholder {
    width: 100%;
    height: var(--vm-size-256, 256px);
    min-height: var(--vm-size-256, 256px);
    background: var(--vm-grey-light, #f5f5f5);
    border-radius: var(--vm-radius-6, 6px) var(--vm-radius-6, 6px) 0 0;
}

.via-process .vm-card-body {
    padding: var(--vm-space-24, 24px) 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.via-process .vm-h4 {
    font-size: var(--vm-fs-24, 24px);
    line-height: var(--vm-lh-28, 28px);
    letter-spacing: var(--vm-ls--048, -0.048em);
    font-weight: var(--vm-fw-600, 600);
    color: var(--vm-heading, #28264e);
    margin-bottom: var(--vm-space-5-11, 12px);
}

.via-process .vm-divider {
    height: 1px;
    background: var(--vm-black, #0f0f0f);
    margin-bottom: var(--vm-space-17-57, 18px);
    margin-top: 0;
    flex-shrink: 0;
}

.via-process .vm-tile-body {
    font-size: var(--vm-fs-16, 16px);
    line-height: var(--vm-lh-20, 20px);
    letter-spacing: var(--vm-ls--016, -0.016em);
    color: var(--vm-text-body, #3e3e3e);
    margin-bottom: 0;
    flex-grow: 1;
}

/* =========================
   SECTION 4 — RECEIVE
========================= */
.via-receive {
    padding: 80px 0;
    background: #d6eaf2;
}

.via-receive__intro {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-18);
    line-height: 26px;
    color: var(--vm-text-body, #3e3e3e);
    margin-bottom: 30px;
}

.via-receive__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.via-receive__list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    font-family: var(--vm-font);
    font-size: var(--vm-fs-18);
    line-height: 26px;
    color: var(--vm-text-body, #3e3e3e);
}

.via-receive__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vm-blue-dark, #4db1d8);
}

.via-receive__list li:last-child {
    margin-bottom: 0;
}

/* =========================
   CONTENT BLOCKS (Timeframes)
========================= */
.via-content-block {
    padding: 80px 0;
    background: var(--vm-white, #ffffff);
}

.via-content-block--alt {
    background: var(--vm-grey-light, #f5f5f5);
}

.via-content-block__body {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-18);
    line-height: 26px;
    color: var(--vm-text-body, #3e3e3e);
}

.via-content-block__body p {
    margin-bottom: 16px;
}

.via-content-block__body p:last-child {
    margin-bottom: 0;
}

.via-content-block__body ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

.via-content-block__body ul li {
    margin-bottom: 8px;
}

/* =========================
   SECTION 5 — PROFESSIONAL FEES (background overlay)
========================= */
.via-fees {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background-color: var(--vm-heading, #28264e);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.via-fees--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(40, 38, 78, 0.88);
    z-index: 1;
}

.via-fees > .container {
    position: relative;
    z-index: 2;
}

.via-fees__body {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-18);
    line-height: 26px;
    color: var(--vm-white, #ffffff);
}

.via-fees__body p,
.via-fees__body li {
    color: var(--vm-white, #ffffff);
}

.via-fees__body p {
    margin-bottom: 16px;
}

.via-fees__body p:last-child {
    margin-bottom: 0;
}

.via-fees__body ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

.via-fees__body ul li {
    margin-bottom: 8px;
}

/* =========================
   SECTION 7 — IMPORTANT INFORMATION (image + content)
========================= */
.via-important {
    padding: 80px 0;
    background: var(--vm-grey-light, #f5f5f5);
}

.via-important__image {
    width: 100%;
    max-width: 590px;
    height: 475px;
    object-fit: cover;
    border-radius: 6px;
}

.via-important__image-placeholder {
    width: 100%;
    max-width: 590px;
    height: 475px;
    background: var(--vm-white, #ffffff);
    border-radius: 6px;
    border: 1px dashed rgba(40, 38, 78, 0.15);
}

.via-important__body {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-18);
    line-height: 26px;
    color: var(--vm-text-body, #3e3e3e);
}

.via-important__body p {
    margin-bottom: 16px;
}

.via-important__body p:last-child {
    margin-bottom: 0;
}

.via-important__list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.via-important__list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-family: var(--vm-font);
    font-size: var(--vm-fs-18);
    line-height: 26px;
    color: var(--vm-text-body, #3e3e3e);
}

.via-important__list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--vm-heading, #28264e);
    font-weight: var(--vm-fw-600);
}

/* =========================
   SECTION 8 — CTA BAR
========================= */
.via-cta-bar__content .vm-btn-white:hover {
    background: var(--vm-heading, #28264e);
    border-color: var(--vm-white, #ffffff);
    color: var(--vm-white, #ffffff);
}

.via-cta-wrapper {
    padding: 80px 0;
    background-color: var(--vm-grey-light, #f5f5f5);
}

.via-cta-bar {
    background: var(--vm-heading, #28264e);
    border-radius: 6px;
    overflow: hidden;
}

.via-cta-bar__img-col {
    position: relative;
    min-height: 320px;
}

.via-cta-bar__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.via-cta-bar__content {
    padding: 50px 50px 50px 40px;
}

.via-cta-bar__desc {
    font-family: var(--vm-font);
    font-size: var(--vm-fs-18);
    line-height: 26px;
    color: var(--vm-white, #ffffff);
}

.via-cta-bar__desc p {
    color: var(--vm-white, #ffffff);
    margin-bottom: 0;
}

/* =========================
   RESPONSIVE — TABLET
========================= */
@media (max-width: 991px) {

    .via-hero,
    .via-overview,
    .via-process,
    .via-receive,
    .via-content-block,
    .via-fees,
    .via-important,
    .via-cta-wrapper {
        padding: 60px 0;
    }

    .via-section-title {
        font-size: var(--vm-fs-32);
        line-height: 40px;
    }

    .via-process .via-section-title {
        margin-bottom: 35px;
    }

    .via-hero__image,
    .via-overview__image,
    .via-important__image {
        height: auto;
        max-height: 400px;
    }

    .via-important__image-placeholder {
        height: auto;
        min-height: 280px;
        max-height: 400px;
    }

    .via-cta-bar__img-col {
        min-height: 280px;
    }

    .via-cta-bar__content {
        padding: 40px 30px;
    }
}

/* =========================
   RESPONSIVE — MOBILE
========================= */
@media (max-width: 767px) {

    .via-hero,
    .via-overview,
    .via-process,
    .via-receive,
    .via-content-block,
    .via-fees,
    .via-important,
    .via-cta-wrapper {
        padding: 40px 0;
    }

    .via-section-title {
        font-size: var(--vm-fs-27);
        line-height: 34px;
    }

    .via-process .via-section-title {
        margin-bottom: 30px;
    }

    .via-hero__image,
    .via-overview__image,
    .via-important__image {
        max-height: 280px;
    }

    .via-important__image-placeholder {
        min-height: 220px;
        max-height: 280px;
    }

    .via-cta-bar__img-col {
        min-height: 220px;
    }

    .via-cta-bar__content {
        padding: 30px 20px;
    }
}