/**
 * how-it-works.css — How It Works Page Styles
 * TradeUp BC — v2 Design System
 *
 * Contents:
 *  1. Page Container (1362px max, 30px padding at ≤1362px)
 *  2. Banner
 *  3. Main Content Section
 *  4. Typography
 *  5. 5-Steps Image
 *  6. BC Divider (scoped override)
 *  7. Responsive
 */


/* =============================================================================
   1. PAGE CONTAINER
   Max-width 1362px, centered. No side padding when viewport > 1362px.
   30px side padding when viewport ≤ 1362px so content never touches screen edge.
   ============================================================================= */

.hiw-container {
    width: 100%;
    max-width: 1362px;
    margin-inline: auto;
    padding-inline: 0;
    position: relative;
}

@media (max-width: 1362px) {
    .hiw-container {
        padding-inline: 30px;
    }
}


/* =============================================================================
   2. BANNER
   Full-width background image. Content container sits inside with label
   element aligned to the bottom-left.
   ============================================================================= */

.hiw-banner {
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 450px;
    display: flex;
    align-items: flex-end;
}

/* Override container padding inside banner — label hugs left edge of container */
.hiw-banner .hiw-container {
    display: flex;
    align-items: flex-end;
}

/* White box housing the H1 title, max 462px, bottom-left of banner */
.hiw-banner__label {
    max-width: 462px;
    background: transparent linear-gradient(180deg, #FFFFFFCB 0%, #FFFFFF 76%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px 10px 0px 0px;
    padding-top: 30px;
    padding-bottom: 24px;
    padding-left: 41px;
    padding-right: 58px;
}

/* H1: How It Works */
.hiw-banner__title {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 0px;
    color: #006E51;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}


/* =============================================================================
   3. MAIN CONTENT SECTION
   70px top padding (distance from banner to first heading).
   ============================================================================= */

.hiw-content {
    padding-top: 70px;
    padding-bottom: 0;
}


/* =============================================================================
   4. TYPOGRAPHY
   ============================================================================= */

/* H2 — "Five Steps to Advance Your Career" */
.hiw-h2 {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 47px;
    letter-spacing: 0px;
    color: #962C08;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

/* H3 — "Our platform is designed to address…" */
.hiw-h3 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 0px;
    color: #034B39;
    margin: 0 0 10px 0;
}

/* Body text — above image (22px / medium weight) */
.hiw-body-1 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 0.11px;
    color: #000000;
    margin: 0 0 1rem 0;
}

/* Body text — below image (18px / normal weight) */
.hiw-body-2 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.09px;
    color: #3C413F;
    margin: 0 0 1rem 0;
}

.hiw-content > p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   5. 5-STEPS IMAGE
   70px above (from the text above), 13px below (to next content).
   ============================================================================= */

.hiw-steps-wrap {
    margin-top: 13px;
    margin-bottom: 70px;
    width: 100%;
}

.hiw-steps-wrap img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 47px;
}


/* =============================================================================
   6. BC DIVIDER — scoped so it works without home.css loaded
   ============================================================================= */

.hiw-divider-outer {
    width: 100%;
    max-width: 1362px;
    margin-inline: auto;
    padding-inline: 0;
}

@media (max-width: 1362px) {
    .hiw-divider-outer {
        padding-inline: 30px;
    }
}

.hiw-divider-outer .v2-divider-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 73px;
    margin-bottom: 75px;
    width: 100%;
}

.hiw-divider-outer .v2-divider-bc__line {
    flex: 1;
    max-width: 100%;
    height: 2px;
    background-color: #002961;
    min-width: 0;
}

.hiw-divider-outer .v2-divider-bc__logo {
    flex-shrink: 0;
    display: block;
    width: 50px;
    height: auto;
    object-fit: contain;
}


/* =============================================================================
   7. AREAS OF DEMAND SECTION
   Dark green background with texture image.
   Two-column layout, icon left + content right per item, 30px row gap.
   ============================================================================= */

.hiw-demand {
    background-color: #004B37;
    background-image: url('https://filter-tradeupbc-nexcess.dev.developmentwebsite.ca/wp-content/uploads/2026/03/background-green@2x-scaled.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 84px;
    padding-bottom: 99px;
    position: relative;
    overflow: hidden;
    /* 70px margin from the Why Short Courses section above */
    margin-top: 70px;
}

/* Header: title + intro text */
.hiw-demand__header {
    margin-bottom: 52px;
    text-align: center;
}

.hiw-demand__title {
    font: normal normal bold 40px/47px 'Rubik', sans-serif;
    letter-spacing: 0px;
    color: #E8C650;
    text-transform: uppercase;
    margin: 0 0 7px 0;
}

.hiw-demand__sub {
    font: normal normal normal 18px/28px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.09px;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
}

/* Two-column grid */
.hiw-demand__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 54px;
    align-items: start;
}

/* Each column is a flex column with 30px row gap */
.hiw-demand__col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Each item: icon (80px) + 52px gap + text body */
.hiw-demand__item {
    display: flex;
    align-items: flex-start;
    justify-content: end;
    gap: 52px;
}

.hiw-demand__icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hiw-demand__icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}

.hiw-demand__body {
    flex: 1;
    max-width: 472px;
}

/* Item title */
.hiw-demand__item-title {
    font: normal normal 600 32px/34px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0 0 10px 0;
}

/* Item description */
.hiw-demand__item-text {
    font: normal normal normal 18px/28px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.09px;
    color: #FFFFFF;
    margin: 0;
}

/* Button row — sits at the 4th row position in right column, centered */
.hiw-demand__btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    /* height matches a typical item so it aligns with the 4th row on left */
    min-height: 80px;
}

/* Explore Trades Pathways button */
.hiw-demand__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 324px;
    background: #E8C650 0% 0% no-repeat padding-box;
    border: 2px solid #E8C650;
    border-radius: 8px;
    font: normal normal 600 20px/20px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0px;
    color: #962D00;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 20px;
    transition: background 250ms ease-in-out, border-color 250ms ease-in-out, color 250ms ease-in-out;
}

.hiw-demand__btn:hover,
.hiw-demand__btn:focus {
    background: #962D00;
    border-color: #962D00;
    color: #fff;
}


/* =============================================================================
   8. WHY SHORT COURSES SECTION
   Two-column layout: left 661px, right 654px, gap 54px.
   ============================================================================= */

.hiw-why {
    padding-top: 0;
    padding-bottom: 0;
}

/* Two-column row */
.hiw-why__inner {
    display: flex;
    align-items: stretch;
    gap: 54px;
}

/* Left column: fluid, target ~661px */
.hiw-why__col-text {
    flex: 661 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Right column: fluid, target ~654px */
.hiw-why__col-img {
    flex: 654 0 0;
    min-width: 0;
}

.hiw-why__col-img img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    display: block;
}

/* H2 */
.hiw-why__h2 {
    font: normal normal bold 40px/47px 'Rubik', sans-serif;
    letter-spacing: 0px;
    color: #962C08;
    text-transform: uppercase;
    margin: 0 0 6px 0;
}

/* Checklist */
.hiw-why__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hiw-why__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.hiw-why__item:last-child {
    margin-bottom: 0;
}

/* Checkmark icon — Font Awesome 5 */
.hiw-why__check {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.09px;
    color: #32A07D;
    flex-shrink: 0;
    margin-top: 0;
}

/* Item text */
.hiw-why__item-text {
    font: normal normal normal 18px/25px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.09px;
    color: #3C413F;
}

/* SEE COURSES button — yellow, 190px wide */
.hiw-why__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    background: #E8C650 0% 0% no-repeat padding-box;
    border: 2px solid #E8C650;
    border-radius: 8px;
    font: normal normal 600 20px/20px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0px;
    color: #962D00;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 20px;
    transition: background 250ms ease-in-out, border-color 250ms ease-in-out, color 250ms ease-in-out;
    margin-top: 15px;
    margin-left: 25px;
}

.hiw-why__btn:hover,
.hiw-why__btn:focus {
    background: #962D00;
    border-color: #962D00;
    color: #fff;
}


/* =============================================================================
   9. WHY CONSIDER SHORT COURSES OR PROGRAMS SECTION
   Two columns (max 654px each, 54px gap). Left: image. Right: H2 + 2 sub-cols.
   ============================================================================= */

.hiw-consider {
    padding-top: 84px;
    padding-bottom: 0;
}

/* Main two-column row */
.hiw-consider__inner {
    display: flex;
    align-items: stretch;
    gap: 54px;
}

/* Left column: image — fluid, target ~654px */
.hiw-consider__col-img {
    flex: 1 0 0;
    min-width: 0;
}

.hiw-consider__col-img img,
.hiw-consider__col-img video {
    width: 100%;
    height: 390px;
    object-fit: cover;
    display: block;
}

/* Right column: text — fluid, target ~654px */
.hiw-consider__col-text {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* H2 title */
.hiw-consider__h2 {
    font: normal normal bold 40px/47px 'Rubik', sans-serif;
    letter-spacing: 0px;
    color: #962C08;
    text-transform: uppercase;
    margin: 0 0 14px 0;
}

/* Two sub-columns: max 300px each, 54px gap */
.hiw-consider__subcols {
    display: flex;
    gap: 54px;
    align-items: flex-start;
}

.hiw-consider__subcol {
    max-width: 300px;
    flex: 1;
}

/* 769px–1361px: each subcol 50% width */
@media (min-width: 769px) and (max-width: 1361px) {
    .hiw-consider__subcols {
        flex-wrap: nowrap;
    }
    .hiw-consider__subcol {
        flex: 0 0 50%;
        max-width: 50%;
        box-sizing: border-box;
    }
}

/* H3 sub-column title */
.hiw-consider__h3 {
    font: normal normal 600 32px/36px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0px;
    color: #034B39;
    margin: 0 0 8px 0;
}

/* Body text */
.hiw-consider__body {
    font: normal normal normal 18px/28px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.09px;
    color: #3C413F;
    margin: 0;
}


/* =============================================================================
   10. FAQ — scoped to How It Works page
   Uses homepage v2-faq classes; only overrides needed here are the
   container swap (hiw-container instead of v2-container) and home.css
   is not loaded on this page, so we load its styles via the existing
   home.css link — no extra overrides needed beyond the container.
   ============================================================================= */

/* home.css is not loaded on this page — load the same FAQ styles inline */
.hiw-container ~ .v2-faq,
.v2-faq + .v2-faq,
section.v2-faq {
    /* ensures the FAQ section respects the page container width */
}

/* The FAQ section uses hiw-container, so the accordion items
   inside .v2-faq__list stay within 1362px with 30px side padding */
.v2-faq .hiw-container {
    padding-inline: 0;
}

@media (max-width: 1362px) {
    .v2-faq .hiw-container {
        padding-inline: 30px;
    }
}


/* =============================================================================
   11. RESPONSIVE
   ============================================================================= */

/* --- 5-steps image: desktop/mobile toggle --- */
.hiw-steps-desktop { display: block; }
.hiw-steps-mobile  { display: none !important; }

/* Ensure mobile image is hidden above 768px */
@media (min-width: 769px) {
    .hiw-steps-mobile {
        display: none !important;
    }
    .hiw-steps-desktop {
        display: block !important;
    }
}

/* Mobile image only when ≤ 768px */
@media (max-width: 768px) {
    .hiw-steps-desktop { display: none !important; }
    .hiw-steps-mobile  {
        display: block !important;
        width: 100%;
        height: auto;
        max-width: 100%;
        margin-inline: 0;
    }
}


/* --- Large tablet / small desktop (1025px → 1200px) --- */
/* Columns shrink fluidly — no stacking yet. Font sizes scale down slightly. */
@media (max-width: 1200px) {
    .hiw-why__inner,
    .hiw-consider__inner {
        gap: 30px;
    }

    .hiw-demand__grid {
        gap: 0 30px;
    }

    .hiw-demand__item {
        gap: 24px;
    }

    .hiw-consider__subcols {
        gap: 30px;
    }

    .hiw-consider__h3 {
        font-size: 26px;
        line-height: 30px;
    }
}


/* --- Stack breakpoint: ≤ 1024px --- */
@media (max-width: 1024px) {

    /* Banner */
    .hiw-banner {
        min-height: 300px;
    }

    .hiw-banner__title {
        font-size: 38px;
        line-height: 44px;
    }

    .hiw-banner__label {
        padding-left: 28px;
        padding-right: 36px;
    }

    /* Main content typography */
    .hiw-h2 {
        font-size: 32px;
        line-height: 38px;
    }

    .hiw-h3 {
        font-size: 26px;
        line-height: 30px;
    }

    .hiw-body-1 {
        font-size: 20px;
        line-height: 28px;
    }

    /* Divider spacing */
    .hiw-divider-outer .v2-divider-bc {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    /* Why Short Courses — stack image on top of content */
    .hiw-why__inner {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .hiw-why__col-text,
    .hiw-why__col-img {
        flex: none;
        width: 100%;
    }

    .hiw-why__col-img img {
        height: 320px;
    }

    .hiw-why__btn {
        margin-left: 0;
    }

    /* Why Consider — stack image above text */
    .hiw-consider {
        padding-top: 60px;
    }

    .hiw-consider__inner {
        flex-direction: column;
        gap: 30px;
    }

    .hiw-consider__col-img,
    .hiw-consider__col-text {
        flex: none;
        width: 100%;
    }

    .hiw-consider__col-img img,
    .hiw-consider__col-img video {
        height: 320px;
    }

    .hiw-consider__h2 {
        font-size: 32px;
        line-height: 38px;
    }

    /* Areas of Demand — single column; icon on top, title center, content left */
    .hiw-demand__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hiw-demand__col + .hiw-demand__col {
        margin-top: 30px;
    }

    .hiw-demand__item {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .hiw-demand__body {
        text-align: left;
    }

    .hiw-demand__item-title {
        font-size: 24px;
        line-height: 28px;
        text-align: center;
    }

    .hiw-demand__item-text {
        text-align: left;
    }

    .hiw-demand__btn {
        width: 100%;
        max-width: 324px;
    }
}


/* --- Mobile: ≤ 768px --- */
@media (max-width: 768px) {

    /* Banner minimum height */
    .hiw-banner {
        min-height: 240px;
    }

    /* Banner label: center, gradient + radius */
    .hiw-banner .hiw-container {
        justify-content: center;
    }

    .hiw-banner__label {
        background: transparent linear-gradient(180deg, #FFFFFFCB 0%, #FFFFFF 76%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
        border-radius: 10px 10px 0px 0px;
        text-align: center;
    }

    /* Main content section */
    .hiw-content {
        padding-top: 32px;
        padding-bottom: 0;
    }

    .hiw-body-1 {
        font-size: 20px;
        line-height: 28px;
    }

    /* All H2 → 26px */
    .hiw-h2,
    .hiw-consider__h2,
    .hiw-demand__title {
        font-size: 26px !important;
        line-height: 32px;
    }

    /* Why Short Courses title */
    .hiw-why__h2 {
        font: normal normal bold 36px/44px Rubik, sans-serif;
        letter-spacing: 0px;
        color: #962C08;
    }

    /* All H3 → 26px (1.625rem) */
    .hiw-h3,
    .hiw-consider__h3,
    .hiw-demand__item-title {
        font-size: 1.625rem !important; /* 26px */
        line-height: 1.35;
    }

    /* 5-steps: hide desktop, show mobile, margin-bottom 60px */
    .hiw-steps-desktop {
        display: none !important;
    }

    .hiw-steps-mobile {
        display: block !important;
        width: 100%;
        height: auto;
        max-width: 100%;
        margin-inline: 0;
    }

    .hiw-steps-wrap {
        margin-bottom: 60px;
    }

    /* Why Short Courses button */
    .hiw-why__btn {
        max-width: 190px;
        margin-left: 25px;
    }

    /* Areas of Demand */
    .hiw-demand {
        margin-top: 70px;
        padding-top: 40px;
        padding-bottom: 74px;
    }

    .hiw-demand__header {
        margin-bottom: 40px;
    }

    /* Why Consider */
    .hiw-consider {
        padding-top: 70px;
    }

    .hiw-consider__inner {
        gap: 40px;
    }

    .hiw-consider__h2 {
        margin: 0 0 20px 0;
    }

    /* Why Consider: stack subcols, title single line */
    .hiw-consider__subcols {
        flex-direction: column;
    }
    .hiw-consider__subcol {
        max-width: 100%;
        flex: none;
    }
    .hiw-consider__h3 br {
        display: none;
    }
}


/* --- Mobile: ≤ 640px --- */
@media (max-width: 640px) {

    .hiw-banner__title {
        font-size: 28px;
        line-height: 32px;
    }

    .hiw-banner__label {
        max-width: 100%;
        padding: 20px 24px 18px 24px;
    }

    /* Content section */
    .hiw-content {
        padding-top: 40px;
    }

    .hiw-body-1 {
        font-size: 18px;
        line-height: 26px;
    }

    /* Why Short Courses */
    .hiw-why__col-img img {
        height: 240px;
    }

    .hiw-why__btn {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }

    /* Why Consider */
    .hiw-consider {
        padding-top: 40px;
    }

    .hiw-consider__col-img img,
    .hiw-consider__col-img video {
        height: 220px;
    }

    .hiw-consider__subcols {
        flex-direction: column;
        gap: 24px;
    }

    .hiw-consider__subcol {
        max-width: 100%;
    }

    .hiw-consider__h2 {
        font-size: 26px;
        line-height: 32px;
    }

    /* Areas of Demand */
    .hiw-demand {
        padding-top: 50px;
        padding-bottom: 50px;
        margin-top: 40px;
    }

    .hiw-demand__item {
        gap: 16px;
    }

    .hiw-demand__icon,
    .hiw-demand__icon img {
        width: 56px;
        height: 56px;
    }

    .hiw-demand__item-title {
        font-size: 24px;
        line-height: 28px;
    }

    .hiw-demand__btn {
        width: 100%;
    }
}