/* 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. */
.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). */
.tvet_solutions_capability_slider .btn-wrap {
    display: none;
}
@media (max-width: 550px) {
    .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;
}