/* ==========================================================
   Past Projects (Paid to Learn) page only
   ----------------------------------------------------------
   Loaded by resources/views/paid-to-learn.blade.php via
   @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   HERO
   ----------------------------------------------------------
   The theme gave .banner-area-two1 no background-size, so the
   photograph rendered at its own size and left gaps on wider
   screens. The image itself is set on the element in the Blade
   file.
   ---------------------------------------------------------- */
.page-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* The heading and the paragraph sit on the pale left half of the backdrop,
   so they keep the dark body colour rather than the white the theme gives
   text over a photograph. */
.page-hero h1 {
    font-size: 34px;
    line-height: 1.3;
    color: #302c51;
}

.page-hero p,
.page-hero h6 a {
    color: #302c51;
}

.page-hero h6 a:hover {
    color: #ff6015;
}

/* The cut-out portrait beside it. Without a height it rendered at its own
   2188px and pushed the hero open. */
.page-hero .hero-figure {
    display: block;
    max-height: 520px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}




/* ----------------------------------------------------------
   SUCCESS STORIES CAROUSEL
   ----------------------------------------------------------
   Each slide is a photograph with a dark caption block under
   it. The card is a flex column (site.css), so the picture is
   fixed and the caption takes the rest — that way the six
   photographs, which come from six sources and are all
   different shapes, still produce one even row.
   ---------------------------------------------------------- */
.gallery-area .gallery-item img,
#gallery-slider-schoolreform .gallery-item > img {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0;
}

/* Fills the rest of the card so every caption block is the same height */
#gallery-slider-schoolreform .gallery-item > .feature-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-bottom: 0;
    padding: 25px;
}

/* Two lines reserved: the names are one word but the stories are not */
#gallery-slider-schoolreform .gallery-item > .feature-item p {
    flex: 1 1 auto;
}

/* margin-top pins the button to the floor of the caption; align-self stops
   the flex column stretching it into a full-width bar */
#gallery-slider-schoolreform .gallery-item > .feature-item .feature-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* 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;
}


/* ==========================================================
   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 STORY CARDS — WHITE TEXT ON THE DARK PANEL
   ----------------------------------------------------------
   .feature-item.three carries background-color #302c51, and
   the story copy inside it is a bare <p>. The theme's body
   rule — main p:not([class*="btn"]) — repainted those
   paragraphs in its soft ink, #5b5676, which on that dark
   purple is grey on near-black: twelve paragraphs went
   unreadable.

   The heading beside them was safe because it carries
   Bootstrap's .text-white; the paragraphs carry no class, so
   the colour is restored here instead.
   ---------------------------------------------------------- */
body.home-premium .feature-item.three p,
body.home-premium .feature-item.three li,
body.home-premium .feature-item.three span {
    color: #fff;
}


/* ----------------------------------------------------------
   THE ORANGE RULES OUTSIDE A SECTION TITLE
   ----------------------------------------------------------
   The theme turns an inline orange divider into a short
   gradient bar, but only when it is a direct child of
   .section-title. Four of the five on this page sit outside
   one, so they stayed as 2px lines drawn across the full
   1296px container.

   Matching the theme's own declarations gives every divider on
   the page the same bar. The theme's rule is the more specific
   of the two, so the ones inside a section title keep theirs
   and nothing changes for them.
   ---------------------------------------------------------- */
body.home-premium main div[style*="border-bottom: 2px solid #ff6015"] {
    border-bottom: 0 !important;
    width: 72px;
    height: 5px;
    margin: 20px auto 22px !important;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}


/* ----------------------------------------------------------
   "PLANNING THE PATH" / "IMPLEMENTATION" — UP A LITTLE,
   AND CLEAR OF THE HEADING UNDER THEM
   ----------------------------------------------------------
   The hero above these two cards is a 650px band whose picture
   does not fill it, leaving a wide blank strip, so the pair sat
   lower down the page than it should. And the row had no bottom
   margin at all: "Impact of the Program:" measured 0px from the
   cards, its type touching their lower edge.

   The row lifts 70px into that blank strip and gives the
   heading 56px of its own, so the section reads as two steps
   rather than one block.
   ---------------------------------------------------------- */
body.home-premium .about-area .row.equal-cards {
    margin-top: -70px;
}

body.home-premium .about-area .row.equal-cards + h2 {
    margin-top: 56px;
}


/* ----------------------------------------------------------
   THE IMPACT CARDS — THE LONGEST LINE STAYS ON ONE LINE
   ----------------------------------------------------------
   The arrow cards size themselves to their text. The longest —
   "Some graduates completed their Matriculation and aimed to
   attend college for better job opportunities and successful
   futures" — needs about 1012px at 16px, which fits the 1296px
   row above 1366px but not the 1146px it gets at 1280px and
   1200px, where it broke onto a second line.

   15px needs about 949px, so it holds one line through that
   band too. Above 1366px the size is untouched.
   ---------------------------------------------------------- */
@media (max-width: 1365.98px) {
    body.home-premium .olcards .text {
        font-size: 15px;
    }
}


/* ----------------------------------------------------------
   SUCCESS STORIES — THE BUTTON IN THE THEME'S LANGUAGE
   ----------------------------------------------------------
   A transparent rectangle with a 1px white outline, which is
   the one control on the page still in the old style. It
   becomes the theme's pill, with the same hover its buttons
   use everywhere else.

   That hover is two background layers, not one: a pale sweep
   parked off to the right of the brand gradient, which travels
   across the face of the button when the pointer arrives. A
   single gradient layer gives the lift and the glow but never
   sweeps, which is what made this button feel unlike the rest.
   background-position has to be in the transition for the
   sweep to animate rather than jump.
   ---------------------------------------------------------- */
body.home-premium .feature-item .feature-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 10px 26px -10px rgba(255, 96, 21, 0.75);
    overflow: hidden;

    background-color: transparent;
    background-image:
        linear-gradient(120deg, transparent 36%, rgba(255, 255, 255, 0.30) 50%, transparent 64%),
        linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    background-size: 220% 100%, 100% 100%;
    background-position: 160% 0, 0 0;
    background-repeat: no-repeat;

    transition:
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease);
}

body.home-premium .feature-item .feature-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
    background-position: -60% 0, 0 0;
}