/*
 |==========================================================================
 | ALQURAN — Missing-media fallback layer
 |==========================================================================
 |
 | Most of the demo photography is now in public/assets/images/, so this file
 | has been cut back hard. Several of its original rules had become the bug
 | rather than the cure: because it loads AFTER style.css / custom.css, every
 | background-color and min-height it declared won the cascade and overrode a
 | value the theme had set deliberately. Sections 4, 5, 6 and 6b document
 | exactly which ones and why they are gone.
 |
 | THE RULE FOR THIS FILE: never declare a property the theme already
 | declares for the same element. Before adding anything, grep style.css /
 | custom.css / footer.css for the selector. If the theme sets it, this file
 | must stay silent — a fallback may only fill in where the theme relies on
 | an image that is genuinely absent.
 |
 | Everything that remains is either an image-chrome suppressor or a Swiper
 | pre-init guard. Delete this file, and its <link> in layouts/app.blade.php,
 | once the media pack is complete.
 |
 | Load order: after style.css / custom.css / responsive.css.
 |
 */

:root {
    /* Theme palette, taken from style.css custom properties. */
    --fallback-green: #50bc84;
    --fallback-gold: #f3b815;
    --fallback-tint: #f4f7f5;
    --fallback-line: rgba(80, 188, 132, 0.18);
}

/* --------------------------------------------------------------------------
 | 1. Suppress broken-image chrome
 |
 | A broken <img> renders its alt text plus the browser's broken-file icon,
 | which pushes siblings around and looks like a layout bug. Zeroing the font
 | size collapses that text away without touching a loaded image, which never
 | paints its alt text in the first place.
 | -------------------------------------------------------------------------- */
img {
    font-size: 0;
    color: transparent;
    /* Keeps the intrinsic ratio when width/height attributes are present. */
    max-width: 100%;
}

/* --------------------------------------------------------------------------
 | 2. Purely decorative layers
 |
 | Patterns, bismillah flourishes, ameen marks, slider shadows, vectors and
 | the mosque illustration are absolutely positioned ornaments. If they are
 | missing they should disappear silently rather than leave a gap.
 | -------------------------------------------------------------------------- */
.te-img-position,
.welcome-one_pattern,
.welcome-one_pattern-two,
.welcome-two_pattern,
.students-one_pattern,
.institute-block_one-bismillah,
.slider-six_shadow,
.slider-six_shadow-two,
.slider-six_shadow-three,
.slider-six_vector-1,
.slider-six_vector-2,
.slider-six_mosque,
.testimonial-one_image,
.testimonial-two_pattern {
    font-size: 0;
    color: transparent;
}

/* --------------------------------------------------------------------------
 | 3. Content image boxes
 |
 | The course and blog card artwork IS now on disk:
 |   course-1-370x213.jpg … course-4-370x213.jpg
 |   news-11-370x227.jpg … news-13-370x227.jpg
 |
 | So the 240px min-height this section used to reserve is no longer a safety
 | net, it is a defect: a 213px-tall course image left 27px of empty tint
 | hanging below it inside the card, which is what made the course row look
 | unevenly spaced against the blog row. Only the img normalisation is kept,
 | so a real photo fills the box edge to edge instead of sitting inside it.
 | -------------------------------------------------------------------------- */
.course-block_one-image img,
.news-block_one-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
 | 4. Welcome section artwork — DELIBERATELY EMPTY
 |
 | welcome.jpg and welcome-1.jpg are both on disk now, and style.css already
 | shapes this column completely:
 |
 |   style.css:444 .welcome-one_image-outer  padding-left: 80px
 |   style.css:449 .welcome-one_image        margin-right: -220px
 |   style.css:474 .welcome-one_image img    width:100%; border-radius:10px
 |
 | The min-height:460px + gradient this section used to force was fighting
 | that -220px bleed and pinning the column to a height the real photo does
 | not have, which is what pushed the "Since 1995" badge out of place. With
 | the artwork present the theme's own rules are correct on their own.
 | -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 | 5. Small round avatars
 |
 | Careful: every one of these circles ALREADY has fixed dimensions in
 | style.css, so they cannot collapse and must not be resized here.
 |
 |   style.css:1511 .testimonial-block_one-author .author-image  99 × 99, no bg
 |   style.css:2090 .news-block_one-author_image                 45 × 45, no bg
 |   style.css:1105 .course-block_one-icon                       64 × 64, white bg
 |
 | An earlier version of this section set min-width/min-height:50px on all
 | three, which silently inflated the 45px blog avatar, and repainted the
 | course badge's white background green. Both were 1:1 deviations. All that
 | is actually needed is a soft fill inside the two circles that have no
 | background of their own, so a missing photo reads as a placeholder rather
 | than a transparent hole.
 | -------------------------------------------------------------------------- */
.testimonial-block_one-author .author-image,
.news-block_one-author_image {
    background-color: var(--fallback-line);
}

.testimonial-block_one-author .author-image img,
.news-block_one-author_image img,
.course-block_one-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* The course card's author badge is an absolutely positioned circle that
   overlaps the card artwork (style.css:1105). Its <a> is a plain inline box,
   so a missing image collapsed it and the browser's broken-file glyph leaked
   out over the image. Forcing the anchor to fill the circle keeps the badge
   perfectly round either way. */
.course-block_one-icon a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
 | 6. Section background images — DELIBERATELY EMPTY
 |
 | An earlier version of this file tinted .service-one, .courses-one,
 | .testimonial-one and .students-one .inner-container on the assumption that
 | those bands got their colour from the missing PNG. They do not — each one
 | already declares its own background-color in style.css:
 |
 |   style.css:523  .service-one                  background-color: var(--color-twelve)   = rgb(18,29,24)  DARK
 |   style.css:1026 .courses-one                  background-color: var(--color-sixteen)  = rgb(250,248,243) cream
 |   style.css:799  .students-one .inner-container background-color: var(--main-color)     = rgb(29,142,90) green
 |   style.css:1424 .testimonial-one              no background-color at all
 |
 | fallback.css loads after style.css, so those tints WON the cascade and
 | actively broke the page: Service One turned into a white band carrying
 | white text, and the Reached counters panel lost its green fill. The missing
 | PNG only removes decoration on top of a colour that is already there, so
 | the correct fallback for all four is to do nothing.
 |
 | Hero backdrops are handled in section 8 below, where the two heroes need
 | opposite polarity. Nothing else belongs in this section.
 | -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 | 6b. Footer backdrop — DELIBERATELY EMPTY
 |
 | This section briefly carried `.main-footer{background-color:#0d2b23}` on the
 | assumption that the footer had no colour of its own and would render
 | white-on-white while footer-bg.jpg is missing. That was wrong:
 |
 |   custom.css:1361  .main-footer  background-color: #020403
 |
 | custom.css loads before this file, so the fallback simply replaced the
 | theme's near-black footer with a green-black one — a silent 1:1 deviation
 | with no benefit. footer.css:40 also already sets .footer_bg-image to
 | background-size:cover, so once the real JPG is dropped into
 | assets/images/background/ it covers #020403 exactly as the demo does.
 | Nothing is needed here.
 | -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 | 7. Hero reveal safety net  ← the actual cause of the "flat green hero"
 |
 | style.css deliberately hides the hero's contents until Swiper marks a slide
 | active:
 |
 |     .slider-one_image-layer { opacity: 0; clip-path: polygon(0 0,0 0,0 100%,0 100%) }
 |     .slider-one_title / _heading / _text { clip-path: polygon(0 0,0 0,0 100%,0 100%) }
 |
 | and only `.slider-one .swiper-slide-active <child>` restores them. That
 | class is added exclusively by Swiper. So for as long as the carousel is not
 | initialised, the background image is fully transparent and all three text
 | blocks are clipped to zero width — which renders as a flat coloured band
 | with text piled at the left edge. That is precisely the reported symptom,
 | and it is a JS failure, not a markup or grid problem.
 |
 | assets/js/alquran-carousels.js is the real fix. The rules below are the
 | belt-and-braces version: if JS is unavailable or errors, the first slide
 | still reveals itself so the hero is never blank. Scoped to
 | :not(.swiper-container-initialized) so Swiper's own animation takes over
 | untouched the instant it boots.
 | -------------------------------------------------------------------------- */
.main-slider:not(.swiper-container-initialized) .swiper-slide:first-child .slider-one_image-layer,
.main-slider_two:not(.swiper-container-initialized) .swiper-slide:first-child .slider-six_bg {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.main-slider:not(.swiper-container-initialized) .swiper-slide:first-child .slider-one_title,
.main-slider:not(.swiper-container-initialized) .swiper-slide:first-child .slider-one_heading,
.main-slider:not(.swiper-container-initialized) .swiper-slide:first-child .slider-one_text,
.main-slider:not(.swiper-container-initialized) .swiper-slide:first-child .slider-one_button,
.main-slider_two:not(.swiper-container-initialized) .swiper-slide:first-child .slider-six_heading,
.main-slider_two:not(.swiper-container-initialized) .swiper-slide:first-child .slider-six_text,
.main-slider_two:not(.swiper-container-initialized) .swiper-slide:first-child .slider-six_button {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Only the first slide should be visible before Swiper takes over, otherwise
   all three slides paint on top of each other in the same stacking context. */
.main-slider:not(.swiper-container-initialized) .swiper-slide:not(:first-child),
.main-slider_two:not(.swiper-container-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

/* --------------------------------------------------------------------------
 | 8. Hero backdrop
 |
 | A single flat colour behind a missing hero photograph looks like a bug.
 | A soft gradient reads as intentional and, more importantly, keeps the
 | headline copy legible.
 |
 | Note the two heroes have opposite polarity: Homepage 01's hero text is
 | var(--white-color) so it needs a dark backdrop, while Homepage 06's
 | .slider-six_heading is var(--black-color) and needs a light one. Do not
 | merge these two rules.
 | -------------------------------------------------------------------------- */
/* Homepage 01's hero carries real photography (1.jpg / 2.jpg / 3.jpg) set as an
   inline background-image in home.blade.php, exactly as the original theme does.
   No colour, gradient or ::after scrim is added here — the original
   .slider-one_image-layer in style.css has none, and adding one is a 1:1
   deviation. */

.slider-six_bg {
    background-color: #eef4f0;
    background-image: linear-gradient(
        160deg,
        #f3f8f4 0%,
        #e7f0ea 100%
    );
}

/* .slider-one .swiper-slide already gets its height from padding
   (210px top / 277px bottom in style.css), so the hero keeps its full
   vertical rhythm even with no image at all. slider-six leans on its
   artwork, so it needs an explicit floor. */
.slider-six .swiper-slide {
    min-height: 620px;
}

/* --------------------------------------------------------------------------
 | 9. Carousel safety net
 |
 | Before Swiper initialises, .swiper-wrapper is a plain block and its slides
 | stack vertically. Swiper adds .swiper-container-initialized once it takes
 | over; until then the wrapper is clipped so a stack cannot stretch the page
 | to thousands of pixels. This is a visual guard only — the real fix is
 | assets/js/alquran-carousels.js.
 | -------------------------------------------------------------------------- */
.swiper-container:not(.swiper-container-initialized) {
    overflow: hidden;
}

.swiper-container:not(.swiper-container-initialized) > .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.swiper-container:not(.swiper-container-initialized) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
 | 10. (removed)
 |
 | A `.no-js .wow { visibility:visible; animation:none }` guard used to live
 | here. <html> now carries `class="no-js no-svg"` exactly as
 | alquran/header.php:14 emits it, and nothing in this Laravel port strips
 | that class the way WordPress does — so the rule matched permanently and
 | disabled every WOW.js reveal on the site. WOW.js sets its own
 | visibility:hidden at init time, so with the library loaded (app.blade.php
 | line 142) no guard is needed at all.
 | -------------------------------------------------------------------------- */