/* ==========================================================
   Our Approach page only
   ----------------------------------------------------------
   Loaded by resources/views/our-approach.blade.php via
   @push('styles'), so it lands after site.css.
   ========================================================== */


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


/* ----------------------------------------------------------
   COUNTERS
   ---------------------------------------------------------- */
.counter-item p {
    font-weight: 400;
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
    font-family: 'Montserrat', sans-serif;
}


/* ----------------------------------------------------------
   IMPACT THROUGH OUR EFFORTS
   ----------------------------------------------------------
   The copy is pulled up over the artwork. The old page carried
   two copies of this block, one per breakpoint, differing only
   in this offset — it is one block here and the offset moves.
   ---------------------------------------------------------- */
.impact-title {
    margin-top: -250px;
}

@media only screen and (max-width: 767px) {
    .impact-title {
        margin-top: -180px;
    }

    .page-title-area {
        height: 460px;
    }
}


/* ----------------------------------------------------------
   REFORM / PILOT / ADVOCATE BUTTONS
   ----------------------------------------------------------
   Each button is only as wide as its own label — 58px for
   "Pilot" against 92px for "Advocate" — so the row looked
   uneven. A min-width wide enough for the longest of the three
   makes them match without stretching any of them across the
   card.
   ---------------------------------------------------------- */
.equal-cards .benefit-item .card-foot {
    min-width: 110px;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Everything below 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 the colours and spacing it had before.
   ========================================================== */


/* ----------------------------------------------------------
   REFORM / PILOT / ADVOCATE — one colour, not three
   ----------------------------------------------------------
   Bootstrap's btn-success / btn-primary / btn-danger put a
   green, a blue and a red button in one row, which reads as
   three unrelated states rather than three parts of one idea.
   The theme's orange carries all three, and the hover is the
   one used on the Fundraise button: purple fill, orange rim,
   and an orange glow under it.

   The three Bootstrap classes stay in the markup — removing
   the theme restores their colours untouched.

   The look is the one the "Learn more about our advocacy"
   button already uses further down the page: a pill carrying
   the brand gradient, with a pale sweep parked off to the
   right that travels across the face on hover, the button
   lifting 3px on an orange glow as it goes.

   The declarations are repeated here rather than the three
   buttons being added to that rule in home-premium.css,
   because .card-foot is shared markup — arts-curriculum,
   news-events, our-covid-19-response and monthly-giving all
   use it, and none of them asked for this.
   ---------------------------------------------------------- */
body.home-premium .equal-cards .benefit-item .card-foot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 30px;
    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;

    /* Two layers: the pale sweep over the brand gradient. Both are
       backgrounds, not a pseudo-element — a pseudo-element across the face
       of the button paints over the label. Backgrounds paint under it.
       background-color is cleared because Bootstrap btn-success / btn-primary
       / btn-danger set a flat colour on these. */
    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 .equal-cards .benefit-item .card-foot:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
    background-position: -60% 0, 0 0;
}

/* The pill carries 30px of padding either side, so the three labels came out
   117px, 110px and 132px wide — the 110px floor set further up was sized for
   the old flat buttons and no longer reaches. 140px clears the longest
   ("Advocate", 132px) and puts all three back on one width. */
body.home-premium .equal-cards .benefit-item .card-foot {
    min-width: 140px;
}


/* ----------------------------------------------------------
   THE NEED FOR PUBLIC SCHOOL REFORM — the grid
   ----------------------------------------------------------
   .equal-cards makes every column a flex item so the cards
   match heights, but it adds no vertical spacing: the second
   row of three sat directly on the first, card edge to card
   edge. The margin here is the 24px Bootstrap already puts
   between the columns, so the gaps match in both directions.

   It is set on .reform-grid rather than on .equal-cards, which
   is a site-wide helper used by a dozen other pages.
   ---------------------------------------------------------- */
body.home-premium .reform-grid > [class*="col-"] {
    margin-bottom: 24px;
}


/* Six headings run from "Outdated Infrastructure" to
   "Ineffective Governance & Administration" — at 22px the two
   longest wrapped onto a second line while the other four sat
   on one, so the row read as uneven. 17px fits the longest
   (329px) inside the card's 348px of text width with room to
   spare, and all six then sit on a single line.

   Only from 1200px up: below that the card is 298px and then
   238px wide, where no readable size fits one line and
   wrapping is the right answer. */
@media (min-width: 1200px) {
    body.home-premium .reform-grid .dream-item h3 {
        font-size: 17px;
        line-height: 1.45;
    }
}


/* ----------------------------------------------------------
   SECTION TITLES — back to the width this page was built for
   ----------------------------------------------------------
   The theme narrows every .section-title to 760px and sets
   margin: 0 auto 46px on it. Both hurt this page:

   760px rewraps copy that was written to a 1296px measure.
   "The Need for Public School Reform" broke after "School",
   and the two paragraphs that carry a hand-placed <br> — under
   "Need for Advocacy" and "Impact through our efforts" — ran
   to three lines instead of the two the <br> was put there to
   make.

   The margin shorthand is the worse of the two: it resets the
   margin-top that .impact-title sets further up this file, so
   the impact copy, which is meant to sit above the artwork,
   dropped onto it and became unreadable.

   Scoped to this page's stylesheet, so the theme's own 760px
   measure still applies everywhere else.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}

/* Restated at a weight that beats the theme's shorthand: the
   value is the one set near the top of this file. */
body.home-premium .section-title.impact-title {
    margin-top: -320px;
}

@media only screen and (max-width: 767px) {
    body.home-premium .section-title.impact-title {
        margin-top: -230px;
    }
}


/* ----------------------------------------------------------
   HEADINGS — a size up
   ----------------------------------------------------------
   The theme sets clamp(30px, 3.8vw, 50px), which read small
   against the width these titles now have. This is the same
   shape of rule one step up, so the headings still scale with
   the viewport rather than jumping at a breakpoint.

   The longest of them, "The Need for Public School Reform",
   needs 969px on one line at the new 58px ceiling and has
   1296px, so it stays on one line.
   ---------------------------------------------------------- */
body.home-premium .section-title h2 {
    font-size: clamp(34px, 4.2vw, 58px);
}


/* ----------------------------------------------------------
   "Impact through our efforts" — room above it
   ----------------------------------------------------------
   Only 21px separated the advocacy icon row from this
   heading, because .impact-title is pulled up 250px to sit
   above its artwork and that pull closes the gap to whatever
   precedes it. The margin goes on the section so the artwork
   travels down with the copy and the overlap is preserved.

   The two numbers here work as a pair. The copy is pulled 70px
   higher over the artwork than the -250px set near the top of
   this file, which is what lifts the button clear of the
   photograph; the section is pushed down by the same 55px, so
   the gap above the heading does not change.

   Moving the button on its own could not work: at 1920 the band
   between the paragraph and the top of the photograph is
   thinner than the button is tall.

   93px brings the gap to 50px, which is the rhythm the rest of
   the page already keeps: 48px from the counters to "The Need
   for Public School Reform", 58px from the reform cards to
   "Need for Advocacy".
   ---------------------------------------------------------- */
body.home-premium .impact-section {
    margin-top: 93px;
}

@media only screen and (max-width: 767px) {
    body.home-premium .impact-section {
        margin-top: 59px;
    }
}