/* ==========================================================
   Impact pages (Infrastructure, Governance, New Programs,
   Academics)
   ----------------------------------------------------------
   Loaded by resources/views/impact.blade.php via
   @push('styles'), so it lands after site.css and covers all
   four.

   Two card shapes, because zindagi-trust uses two:
     .impact-card     a photograph with the heading and text
                      beneath it — Governance, New Programs,
                      Academics
     .impact-gallery  a dashed card with the heading on top,
                      then a small carousel, then the text —
                      Infrastructure
   ========================================================== */


/* ----------------------------------------------------------
   PHOTOGRAPH CARDS
   ----------------------------------------------------------
   The photographs are all different shapes — from 4:3 scans to
   wide camera frames — so one box crops them to a common band
   and .equal-cards levels the row.

   The height subtracts the margin: .equal-cards stretches the
   column, so a card at height:100% fills it edge to edge and
   the rows end up touching. Taking the gap off the height is
   what puts it back.
   ---------------------------------------------------------- */
.impact-card {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.impact-card .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}

.impact-card .top {
    flex: 0 0 auto;
}

.impact-card .top img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 0;
}

.impact-card .bottom {
    flex: 1 1 auto;
    padding: 20px;
}

.impact-card .bottom h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.impact-card .bottom p {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   GALLERY CARDS
   ----------------------------------------------------------
   Infrastructure gives every card two or three photographs,
   with the heading above them. Same height treatment as above.
   ---------------------------------------------------------- */
.impact-gallery {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 25px 20px;
}

.impact-gallery h3 {
    font-size: 20px;
    margin-bottom: 16px;
}

/* owl replaces the markup with its own wrapper, so the height goes on the
   picture rather than the container */
.impact-gallery .gallery-slider-acr .gallery-item img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 0;
}

.impact-gallery p {
    margin-top: 18px;
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   ACADEMICS: the heading band
   ----------------------------------------------------------
   The old page carried this twice, once per breakpoint, the two
   copies differing only in height. Padding lets it size itself
   to the words instead.
   ---------------------------------------------------------- */
.impact-band {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 0;
}

.impact-band .section-title h2,
.impact-band .section-title p {
    color: #302c51;
}


/* ==========================================================
   THEMED PAGES ONLY
   ----------------------------------------------------------
   impact.css serves the four Impact pages, which all render
   from one view. Each rule is scoped to body.home-premium, so
   removing that one @section line returns all four to how
   they were.
   ========================================================== */


/* ----------------------------------------------------------
   THE SECTION HEADINGS, BACK TO THE CONTAINER MEASURE
   ----------------------------------------------------------
   The theme caps every .section-title at 760px. The headings
   on these pages come from config/impact.php and the longest
   of them — on academics — was pushed to three lines by the
   cap. Lifting it gives them the width the copy was written
   for. One is long enough to still take two lines at 1296px;
   that is the sentence, not the cap.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}


/* ----------------------------------------------------------
   THE ORANGE RULE 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. The one under the page heading sits outside
   one, so it stayed a 2px line across its full 736px. Same
   declarations as the theme's own, so every divider matches;
   the theme's rule is the more specific, so the ones inside a
   section title keep theirs.
   ---------------------------------------------------------- */
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);
}


/* ----------------------------------------------------------
   SPACE BETWEEN THE ROWS OF CARDS
   ----------------------------------------------------------
   .equal-cards matches the cards' heights but adds no vertical
   spacing, so a second row sat directly on the first. The
   margin matches the 24px Bootstrap already puts between the
   columns, so the gaps match in both directions.
   ---------------------------------------------------------- */
body.home-premium .equal-cards > [class*="col-"] {
    margin-bottom: 24px;
}


/* ----------------------------------------------------------
   THE GALLERY CAROUSEL — 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 10px, which carried its
   top — and the orange bar drawn there — straight out of the
   clip, so hovering appeared to cut the card rather than lift
   it.

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


/* ----------------------------------------------------------
   THE PHOTOGRAPH BEHIND THE ACADEMICS HEADING
   ----------------------------------------------------------
   Academics is the only one of the four that sets a picture
   behind its heading, and the theme treats any
   .banner-slider-item as a hero: it lays a dark scrim over the
   picture -- 86 per cent at the left edge -- and fades the
   bottom 120px, so that white hero text reads against it.

   This band's text is not white. It is the page heading in
   ink, set that way because the photograph is a light one, so
   the scrim only dulled the picture and took the contrast out
   from under the words. Both layers come off, and the band is
   left as it was drawn.

   The paragraph needs saying too: the theme softens every
   main p to --ink-soft, which is right in a column of body
   text and too pale over a photograph. It goes back to the
   ink the band was given.
   ---------------------------------------------------------- */
body.home-premium .banner-area-two1 .banner-slider-item.impact-band::before,
body.home-premium .banner-area-two1 .banner-slider-item.impact-band::after {
    content: none;
}

body.home-premium .impact-band .section-title p {
    color: var(--ink-2);
}