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


/* ----------------------------------------------------------
   HERO BACKDROP THAT CHANGES WITH THE BREAKPOINT
   ----------------------------------------------------------
   The old page carried the hero twice — once per breakpoint —
   with the same words in both and only the photograph
   different. It is written once now; the Blade file passes
   both pictures in as custom properties and this swaps
   between them.
   ---------------------------------------------------------- */
.swap-bg {
    background-image: var(--bg-desktop);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media only screen and (max-width: 575px) {
    .swap-bg {
        background-image: var(--bg-mobile);
    }
}


/* ----------------------------------------------------------
   SECTION HEADINGS
   ----------------------------------------------------------
   The theme leaves 40px under every .section-title. On this
   page each heading is followed immediately by its own rule
   and content, so the gap is closed.
   ---------------------------------------------------------- */
.section-title {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   GOALS: the six cards
   ----------------------------------------------------------
   The icons are different shapes; one box each keeps the row
   even. The old page set width and height to 100px on every
   one, which stretched the wider ones out of proportion.
   ---------------------------------------------------------- */
.card-icon img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto;
}


/* ----------------------------------------------------------
   CORE VISION
   ---------------------------------------------------------- */

/* The band behind the accordion. Both breakpoints used the same
   photograph here, so there is nothing to swap. */
.section-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.work-area .work-content ul li h3 {
    font-size: 18px;
}

/* Dark panel behind the open answer, so it stays readable over the photograph */
.faq-area .accordion p {
    display: none;
    padding: 20px 25px;
    background-color: black !important;
    opacity: 0.7 !important;
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   DOWNLOAD CARDS
   ----------------------------------------------------------
   Two curriculum covers of slightly different sizes. A fixed
   box keeps both cards the same height, and contain keeps each
   cover in proportion inside it.
   ---------------------------------------------------------- */
.blog-item .top img {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: contain;
    background-color: #ffffff;
}

.blog-item .bottom {
    padding: 20px 15px;
}


/* ==========================================================
   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 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 middle one of the three on this page
   sits outside one, so it stayed a 2px line across its full
   736px container. Same declarations as the theme's own, so
   all three match; the theme's rule is the more specific, so
   the two inside a section title are untouched.
   ---------------------------------------------------------- */
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 the 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 HERO — THE PHOTOGRAPH BACK TO ITS OWN BRIGHTNESS
   ----------------------------------------------------------
   The theme lays a dark scrim over every .banner-slider-item,
   which is right on the home page where the headline sits on a
   bright photograph. This one is already dark and before the
   theme carried no scrim at all, which is why it now looks
   dull by comparison. The scrim and the bottom fade are both
   turned off.

   The selector carries one more class than the theme's so it
   wins; the theme's sits on .banner-slider-item with two
   :not() parts, which counts for more than it looks.
   ---------------------------------------------------------- */
body.home-premium .banner-area-two.three .banner-slider-item.swap-bg::before,
body.home-premium .banner-area-two.three .banner-slider-item.swap-bg::after {
    content: none;
}

/* With the scrim gone the lead has to be white again. The theme's body rule,
   main p:not([class*="btn"]), is one element more specific than its own
   .banner-content p rule, so it had repainted this paragraph in soft grey —
   grey on a dark photograph, which is why it stopped being readable. The
   extra class here is what lets this win. */
body.home-premium .banner-area-two .banner-content p {
    color: rgba(255, 255, 255, 0.92);
}


/* ----------------------------------------------------------
   THE HERO BUTTON — ITS SWEEP ANIMATES AGAIN
   ----------------------------------------------------------
   This button carries data-aos, and the theme's reveal rule
   sets transition-property: opacity, transform !important on
   every revealing element. That drops background-position from
   the transition, so the pale second layer jumped across
   instead of travelling, and pins the transform, so the button
   never lifted. The buttons further down the page have no
   data-aos and were unaffected.

   The properties are named again with the sweep's own timing,
   and the lift has to insist for the same reason.
   ---------------------------------------------------------- */
body.home-premium .banner-btn-area .common-btn[data-aos] {
    transition-property: background-position, transform, box-shadow, opacity !important;
    transition-duration: 1.125s, 0.525s, 0.525s, 1650ms !important;
    transition-timing-function: var(--ease) !important;
}

body.home-premium .banner-btn-area .common-btn[data-aos]:hover {
    transform: translateY(-3px) !important;
}


/* ----------------------------------------------------------
   THE SECTION HEADINGS, BACK TO THE CONTAINER MEASURE
   ----------------------------------------------------------
   The theme caps every .section-title at 760px, which broke
   three pieces of copy written to the full 1296px container:

       Core Vision of Our Art Curriculum        2 lines, needs 779px
       Bring Creative Thinking to Your ...      2 lines, needs 966px
       Download Zindagi Trust's complete ...    2 lines, needs 1018px

   All three fit 1296px comfortably, so lifting the cap is
   enough — no change to the type size is needed here.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}


/* ----------------------------------------------------------
   THE ICONS, CENTRED
   ----------------------------------------------------------
   The theme lays .benefit-item out as a flex column with
   align-items: flex-start, then re-centres the children it
   knows about — the icon element, the heading, the paragraph,
   the button. These icons sit in a plain div, which is not on
   that list, so every one went hard against the left edge:
   1px of space on the left against 467px on the right.
   ---------------------------------------------------------- */
body.home-premium .benefit-item > div {
    align-self: stretch;
    width: 100%;
}


/* ----------------------------------------------------------
   THE ACCORDION — DARK PANELS UNDER WHITE TEXT
   ----------------------------------------------------------
   This accordion lies over a photograph and its panels carry
   Bootstrap's .text-white. The theme already solves that on
   the home page, but its rules are scoped to
   .intro-section .faq-area, which this page has no wrapper
   for — so these panels got the light card instead. White
   title text on a white bar and white body text on a white
   card: the headings and the copy both disappeared.

   Dark glass gives the white text something to sit on while
   the photograph still reads through, matching the home page
   and the advocacy page.
   ---------------------------------------------------------- */
body.home-premium .faq-area .accordion > li {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(20, 17, 43, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

body.home-premium .faq-area .accordion > li:hover {
    border-color: rgba(255, 255, 255, 0.38);
}

/* style.css gives every closed link background-color:#fff. Left alone that
   is a white bar under white title text, which hides the headings. */
body.home-premium .faq-area .accordion > li > a {
    color: #fff;
    background-color: transparent;
}

body.home-premium .faq-area .accordion > li > p,
body.home-premium .faq-area .accordion > li > p b {
    color: rgba(255, 255, 255, 0.92);
}

body.home-premium .faq-area .accordion > li > a i {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* The category icons are black line drawings, drawn for a white panel. On
   advocacy the glass sits over a bright turquoise wall and they read well
   against it; the photograph behind this accordion is dark, so the glass goes
   nearly black and the black line work all but disappears.

   Inverting them is what the theme already does for the home page's dark
   accordion. The art is transparent PNG line work, so inverting gives clean
   white strokes rather than a washed-out box. */
body.home-premium .faq-area .accordion > li > a img {
    filter: invert(1) brightness(1.9);
}