/* TVET Solutions page (page-template/tvet-solutions.php).
   This page reuses existing shared components (accordion + image-swap,
   features slider, testimonials, CTA, FAQ) whose base styling already
   lives in home.css / integration.css and applies sitewide — so most of
   this page needs no new CSS at all. persona-page.css is a separate,
   unrelated stylesheet (it only targets the 4 persona_* accordion
   classes) — this file has no dependency on it.

   The overrides below are scoped to this page's own unique classes so
   nothing shared (e.g. admission-management.php's own spacing) is
   touched. */

/* Accordion image-size tweak: without this, the accordion's swap-images
   render at full width. Kept here (not relying on persona-page.css,
   which has the identical rule but isn't part of this page's upload) so
   this file has everything the accordion needs on its own. */
/* .solution_section prefix added: home.css:425 (.solution_section .solution_row .solution_right img{width:100%}) has the SAME (0,3,1) specificity, so whichever file loads last used to win. This file is now also imported by custom-style.css, which loads BEFORE home.css, so order can no longer be relied on. The extra class makes this (0,4,1) and it wins either way. */
.solution_section.ai_higher_ed_features_action .solution_img .image img {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Kicker-to-heading gap: admission-management.css tightens this to 8px for
   its own "Why Choose" section (.features_section), but this page should
   match the standard 15px gap used elsewhere on the site (e.g. the
   Capabilities section on /education-erp/). */
.solution_section.academia_sis_capabilities.features_section.tvet_solutions_accordion .title_one .title_bottom {
    margin-top: 15px;
}

/* Capabilities slider nav arrows: desktop shows all 4 cards in a grid (no
   slider needed there), so the prev/next buttons should only appear on
   mobile, where slick collapses to one card at a time (slidesToShow:1
   breakpoint at 550px in custom-script.js). */
.features_main.tvet_solutions_capability_slider .btn-wrap {
    display: none;
}
@media (max-width: 550px) {
    .features_main.tvet_solutions_capability_slider .btn-wrap {
        display: flex;
    }
}

/* Accordion body padding: admission-management.css's shared
   .solution_section.features_section .accordion-content rule (3 classes)
   pads this box unevenly (0 top, ~33px right/bottom, ~65px left).
   Matching its full class list here (4 classes, via
   .tvet_solutions_accordion) out-specifies it so this page gets an even
   20px on all sides instead, while staying scoped so admission-
   management.php (which shares that base rule) is untouched. */
.solution_section.features_section.tvet_solutions_accordion .accordion-content {
    padding: 20px;
}

/* The open accordion header gets its own 15px left padding from
   admission-management.css's .accordion-header.active-a rule. Matching
   it to the accordion-content's 20px left padding above keeps the
   heading and paragraph aligned. */
.solution_section.features_section.tvet_solutions_accordion .accordion-header.active-a {
    padding-left: 20px;
    padding-bottom: 0px;
}

/* Capabilities section blue background cut short mid-card: slick.js sets
   an inline height on .slick-list/.slick-track from its initial slide
   measurement, but this page's 4th card title ("Reporting, Bursaries &
   Compliance") wraps to 2 lines, making that slide taller than what
   slick measured — so the section's background (sized by that stale
   height) ends before the cards actually do. Forcing both back to auto
   lets the row's real height (and the section background behind it)
   follow the tallest card. Scoped to this page's own slider class. */
.tvet_solutions_capability_slider .slick-list,
.tvet_solutions_capability_slider .slick-track {
    height: auto !important;
}
.tvet_solutions_capability_slider .features_integration_slide {
    align-items: stretch;
}

/* The live server's integration.css has .features_main's background set
   to a malformed gradient (color-stop percentages out of order: 16%
   then 4%), which browsers clamp into a hard color-break partway down
   the section instead of a smooth/solid fill — the "half cut" blue
   background. Restoring the plain background color here, scoped to this
   page's slider class, without touching integration.css (shared by
   many other pages, out of scope for this release). */
.tvet_solutions_capability_slider.features_main {
    background: var(--theme-background-color);
}

/* Capability card content anchors to the top instead of centering
   vertically: headings wrap to 1 or 2 lines depending on their text, so a
   vertically-centered card starts its paragraph at a different height per
   card. Anchoring to the top keeps every heading on the same row while
   text stays centered horizontally. The persona pages have this same fix
   in persona-page.css, scoped to their own capability-slider classes --
   mirrored here, scoped to this page's own class, instead of adding
   .tvet_solutions_capability_slider into that shared persona file. */
/* Specificity note: written as .features_box.ai_feature_card (0,3,0), not
   just .ai_feature_card (0,2,0) -- persona-page.css's base
   ".ai_higher_ed_features .ai_feature_card" rule (justify-content:center,
   padding-top/bottom 2.2vw) is also (0,2,0) and the two files load in
   OPPOSITE order on staging vs local, so at equal specificity whichever
   file happens to load last silently wins. One extra class makes this
   rule win in both environments regardless of load order. */
.tvet_solutions_capability_slider .features_box.ai_feature_card {
    justify-content: flex-start;
}

/* Capability card padding: integration.css's shared .features_box rule
   (single class, reused sitewide by ai-for-highered.php and the persona
   pages too) sets 2.917vw+ of padding at every breakpoint. Cutting it
   down to 1.5vw here, scoped to this page's own capability-slider class
   (same value the persona pages use), tightens the cards without
   touching the shared rule other pages still rely on. */
.tvet_solutions_capability_slider .features_box.ai_feature_card {
    padding: 1.5vw;
}

/* ============================================================
   False Bay case-study spotlight (navy panel between the
   capability slider and the testimonials).

   SCOPING: every selector below is a descendant of
   .tvet_case_spotlight, a class that exists nowhere else in the
   theme (verified across wp-content/themes before writing this),
   so none of these rules can reach another page or section. The
   markup borrows three global things on purpose -- .container,
   the .fs-* type scale, and .bg_button -- and none of their own
   rules are edited here: the button's colour flip for the dark
   ground is written as a descendant override inside this section,
   exactly the way .banner_btn_bg does it sitewide, rather than by
   touching .bg_button itself.
   ============================================================ */
.tvet_case_spotlight {
    background: var(--theme-heading-color);
    padding: 5.2vw 0;
}
.tvet_case_spotlight .tvet_cs_row {
    display: flex;
    align-items: center;
    gap: 3.5vw;
}
/* flex:1 + min-width:0 rather than width:50%, so the 3.5vw gap comes
   out of the columns instead of overflowing the container. */
.tvet_case_spotlight .tvet_cs_left,
.tvet_case_spotlight .tvet_cs_right {
    flex: 1 1 0;
    min-width: 0;
}

/* --- label ------------------------------------------------- */
.tvet_case_spotlight .tvet_cs_label {
    margin: 0 0 0.73vw;
    color: var(--theme-white-color);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --- client lockup: logo | rule | name + place -------------- */
.tvet_case_spotlight .tvet_cs_lockup {
    display: flex;
    align-items: center;
    gap: 0.83vw;
    /* the lockup, heading and paragraph read as three separate beats,
       so they get more air between them than inside them */
    margin-bottom: 1.92vw;
}
.tvet_case_spotlight .tvet_cs_lockup_logo {
    /* cs_logo_mono is white artwork on transparent, which is why it needs
       no treatment on this navy ground -- and why the light-background
       sections elsewhere use cs_logo_colour instead. */
    width: auto;
    height: 2.2vw;
    flex: none;
}
.tvet_case_spotlight .tvet_cs_lockup_rule {
    width: 1px;
    height: 2vw;
    background: rgba(255, 255, 255, 0.22);
    flex: none;
}
.tvet_case_spotlight .tvet_cs_lockup_text {
    display: flex;
    flex-direction: column;
    gap: 0.16vw;
}
.tvet_case_spotlight .tvet_cs_lockup_name {
    color: var(--theme-white-color);
    font-weight: 600;
    line-height: 1.3;
}
.tvet_case_spotlight .tvet_cs_lockup_place {
    display: flex;
    align-items: center;
    gap: 0.37vw;
    color: var(--theme-white-color);
    line-height: 1.3;
}
.tvet_case_spotlight .tvet_cs_flag {
    width: 1.05vw;
    height: auto;
    flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* --- heading + paragraph ----------------------------------- */
.tvet_case_spotlight .tvet_cs_title {
    margin: 0;
    color: var(--theme-white-color);
}
.tvet_case_spotlight .tvet_cs_desc {
    margin: 1.45vw 0 0;
    color: #C6C9E0;
}

/* --- the three figures from cs_metrics --------------------- */
.tvet_case_spotlight .tvet_cs_metrics {
    display: flex;
    gap: 1.5vw;
    margin-top: 1.4vw;
    padding-top: 1.15vw;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.tvet_case_spotlight .tvet_cs_metric {
    flex: 1 1 0;
    min-width: 0;
}
.tvet_case_spotlight .tvet_cs_metric_value {
    display: block;
    color: var(--theme-white-color);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.26vw;
    /* the values line up as a row of figures, so they get lining digits */
    font-variant-numeric: tabular-nums;
}
.tvet_case_spotlight .tvet_cs_metric_label {
    display: block;
    color: #AFB3D0;
    line-height: 1.35;
}

/* --- button: global .bg_button, inverted for the dark ground - */
.tvet_case_spotlight .tvet_cs_btn_wrap {
    margin-top: 1.66vw;
}
.tvet_case_spotlight .tvet_cs_btn_wrap .bg_button {
    display: inline-flex;
    width: auto;
    background: var(--theme-white-color);
    color: var(--theme-heading-color);
}
.tvet_case_spotlight .tvet_cs_btn_wrap .bg_button svg path {
    fill: var(--theme-heading-color);
}

/* --- photograph -------------------------------------------- */
/* Corner radii follow the theme's button shape (diagonal pairs,
   fixed px), scaled up for an image-sized box. */
.tvet_case_spotlight .tvet_cs_media {
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 40px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.tvet_case_spotlight .tvet_cs_media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

/* --- tablet: columns stack, image first stays second -------- */
@media (max-width: 991px) {
    .tvet_case_spotlight {
        padding: 8vw 0;
    }
    .tvet_case_spotlight .tvet_cs_row {
        flex-direction: column;
        gap: 5vw;
    }
    .tvet_case_spotlight .tvet_cs_left,
    .tvet_case_spotlight .tvet_cs_right {
        flex: none;
        width: 100%;
    }
    .tvet_case_spotlight .tvet_cs_label {
        margin-bottom: 12px;
        font-size: 14px;
    }
    .tvet_case_spotlight .tvet_cs_lockup {
        gap: 14px;
        margin-bottom: 30px;
    }
    .tvet_case_spotlight .tvet_cs_lockup_logo {
        height: 38px;
    }
    .tvet_case_spotlight .tvet_cs_lockup_rule {
        height: 34px;
    }
    .tvet_case_spotlight .tvet_cs_flag {
        width: 18px;
    }
    .tvet_case_spotlight .tvet_cs_desc {
        margin-top: 22px;
    }
    .tvet_case_spotlight .tvet_cs_metrics {
        gap: 20px;
        margin-top: 22px;
        padding-top: 18px;
    }
    .tvet_case_spotlight .tvet_cs_metric_value {
        margin-bottom: 4px;
    }
    .tvet_case_spotlight .tvet_cs_btn_wrap {
        margin-top: 26px;
    }
}

/* --- phone: figures go two-up so the labels stay readable ---- */
@media (max-width: 550px) {
    .tvet_case_spotlight .tvet_cs_metrics {
        flex-wrap: wrap;
        gap: 16px 20px;
    }
    .tvet_case_spotlight .tvet_cs_metric {
        flex: 1 1 40%;
    }
    .tvet_case_spotlight .tvet_cs_lockup_logo {
        height: 32px;
    }
}

/* Mobile type for this section.
   .fs-22 and .fs-48 are the two rungs of the theme's type scale with NO
   responsive overrides anywhere in custom-style.css or responsive.css --
   they stay at 1.14583vw and 1.8vw all the way down, which is ~5px and
   ~8px on a phone. This section uses both (description + lockup name on
   fs-22, metric values on fs-48) to match the desktop design, so it has
   to supply its own sizes below the desktop breakpoints. Everything here
   is scoped to .tvet_case_spotlight: the .fs-* utilities keep their own
   values for every other page that uses them.
   (The rest of the scale is covered: fs-64 -> 5vw / 25px, fs-24 -> 20px,
   fs-18 -> 16px / 18px, so those classes need nothing.) */
@media (max-width: 991px) {
    .tvet_case_spotlight .tvet_cs_label {
        font-size: 14px;
    }
    .tvet_case_spotlight .tvet_cs_lockup_name {
        font-size: 18px;
    }
    .tvet_case_spotlight .tvet_cs_lockup_place {
        font-size: 14px;
    }
    .tvet_case_spotlight .tvet_cs_desc {
        font-size: 17px;
        line-height: 1.6;
    }
    .tvet_case_spotlight .tvet_cs_metric_value {
        font-size: 28px;
    }
    .tvet_case_spotlight .tvet_cs_metric_label {
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .tvet_case_spotlight .tvet_cs_label {
        font-size: 13px;
    }
    .tvet_case_spotlight .tvet_cs_lockup_name {
        font-size: 16px;
    }
    .tvet_case_spotlight .tvet_cs_lockup_place {
        font-size: 13px;
    }
    .tvet_case_spotlight .tvet_cs_desc {
        font-size: 16px;
    }
    .tvet_case_spotlight .tvet_cs_metric_value {
        font-size: 24px;
    }
    .tvet_case_spotlight .tvet_cs_metric_label {
        font-size: 13px;
    }
}