/* ==========================================================
   School reform page only
   ----------------------------------------------------------
   Loaded by resources/views/school-reform.blade.php via
   @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   PILOT PROJECTS
   ----------------------------------------------------------
   The two school photographs are different shapes, so a fixed
   box keeps the captions beneath them on the same line.
   ---------------------------------------------------------- */
.about-area .blog-item .top img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.school-caption {
    padding: 10px 15px 15px;
}

/* text-transform is off because the page capitalises every h3, which turns
   Khatoon-e-Pakistan into Khatoon-E-Pakistan. That rule carries !important,
   so this one has to as well. */
.school-caption h3 {
    margin: 10px 0 0;
    line-height: 1.4;
    font-size: 18px;
    min-height: 50px;
    text-transform: none !important;
}

.school-caption p {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   BEFORE AND AFTER
   ----------------------------------------------------------
   jquery.anyimagecomparisonslider.js sizes the slider itself
   and writes its own inline styles; these only cover the two
   labels, which the plugin leaves as bare links. Without a
   background they sit straight on the photograph and are
   unreadable wherever it happens to be pale.
   ---------------------------------------------------------- */
#aics-smb-autostart,
#aics-kps-autostart {
    max-width: 100%;
}

#aics-smb-autostart .ui a,
#aics-kps-autostart .ui a {
    cursor: default;
    padding: 4px 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #302c51 !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: none;
}


/* ----------------------------------------------------------
   HOW WE REFORMED THEM: carousel
   ----------------------------------------------------------
   Round photograph at the head of each card. These are photos,
   not icons, so they fill the whole badge rather than taking
   the 45px site.css gives a picture in one — hence the longer
   selector, which has to out-rank that rule.
   ---------------------------------------------------------- */
#gallery-slider-schoolreform .benefit-item > i > img.pillar-icon {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    object-fit: cover;
}

/* The theme hides the carousel arrows behind a zero-height .owl-nav; these
   put them back beside the cards. */
#gallery-slider-schoolreform .owl-nav {
    overflow: hidden;
    height: 0;
}

#gallery-slider-schoolreform .nav-button {
    height: 70px;
    width: 25px;
    cursor: pointer;
    position: absolute;
    top: 110px;
}

#gallery-slider-schoolreform .owl-prev {
    left: -35px;
}

#gallery-slider-schoolreform .owl-next {
    right: -35px;
}

#gallery-slider-schoolreform .owl-prev.disabled,
#gallery-slider-schoolreform .owl-next.disabled {
    pointer-events: none;
    opacity: 0.25;
}

.owl-theme .owl-nav [class*="owl-"] {
    color: #ffffff;
    font-size: 39px;
    background: #ff6015;
    border-radius: 3px;
}

/* site.css already stretches every slide in this carousel to the tallest;
   this passes that height down to the card inside, so the row of headings
   and the row of text line up as the slides move. */
#gallery-slider-schoolreform .owl-item .benefit-item {
    height: 100%;
}


/* ----------------------------------------------------------
   TYPOGRAPHY
   ----------------------------------------------------------
   The theme draws a coloured bar under every h5; the two school
   names above the before/after sliders read better without it.
   ---------------------------------------------------------- */
h5:after {
    background: transparent !important;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Applies only while the page carries the premium theme
   (body.home-premium, set by the @section in the Blade file).
   Drop that one line and the page returns to how it was.
   ========================================================== */


/* ----------------------------------------------------------
   THE SECTION HEADINGS, ONE LINE EACH
   ----------------------------------------------------------
   The theme caps every .section-title at 760px. All four
   headings on this page are longer than that at the 50px they
   render at, so each broke onto a second line:

       Why Reform Government Schools?              needs  838px
       Before and After Transformation of Schools  needs 1016px
       How Zindagi Trust Reformed Government ...   needs 1222px
       Join the Reform, Be the Spark of Change!    needs  976px

   The container gives 1296px, so lifting the cap puts all four
   on one line without touching the type size. Scoped to this
   page, so the theme's 760px measure still applies elsewhere.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}


/* ----------------------------------------------------------
   THE STEP CARDS — THE HEADING NO LONGER VANISHES
   ----------------------------------------------------------
   style.css gives these cards an orange hover fill with white
   text:

       .benefit-item-index:hover    { background-color: #ff6015; color: white }
       .benefit-item-index:hover h3 { color: white !important }

   Under the theme only half of that survives. The theme's base
   rule, body.home-premium .benefit-item-index, is one element
   more specific than the plain :hover rule, so its white card
   background wins and the card never turns orange — but the h3
   rule carries !important, so the heading still goes white.
   White on white: "Step 1", "Step 2" and "Step 3" disappeared
   the moment the pointer touched them.

   The heading keeps the theme's ink instead. The hover is the
   one the theme's other cards use and which these already had
   underneath: a 7px lift, a deeper shadow, and the orange bar
   growing across the top.
   ---------------------------------------------------------- */
body.home-premium .benefit-item-index:hover h3 {
    color: var(--ink) !important;
}


/* ----------------------------------------------------------
   THE VIDEO PLAY BUTTON
   ----------------------------------------------------------
   At rest a white disc with an orange arrow. On hover the
   theme only brightened the disc from 94% to full white, which
   left the arrow the same orange it already was — no visible
   change. The disc fills with the brand gradient and the arrow
   turns white, so the control answers the pointer.
   ---------------------------------------------------------- */
body.home-premium .video-wrap .js-modal-btn:hover {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
}

body.home-premium .video-wrap .js-modal-btn:hover i {
    color: #fff;
}


/* ----------------------------------------------------------
   THE PILLAR SLIDER — ROOM FOR THE HOVER LIFT
   ----------------------------------------------------------
   Owl clips its track with overflow: hidden on .owl-stage-outer,
   and these cards sit flush against its top edge. The theme's
   hover lifts a card 7px, which carried the 3px orange bar at
   its top straight out of the clip — so hovering appeared to
   remove the orange rather than reveal it.

   10px of padding inside the clip gives the lift somewhere to
   go; the matching negative margin keeps the slider where it
   was on the page.
   ---------------------------------------------------------- */
body.home-premium .gallery-slider-schoolreform .owl-stage-outer {
    padding-top: 10px;
    margin-top: -10px;
}