/* ==========================================================================
   Homepage hero — standardised 2026-07-28
   Scope: section.principalMsgBlock.homeHero in application/views/home.php only.

   WHY EVERYTHING HERE IS SCOPED TO .homeHero
   ------------------------------------------
   .principalMsgBlock and .bannerSubPages are used by 60 views. Editing those
   global rules in style.css to fix the homepage would restyle the banner on
   every page on the site. So home.php's hero section carries an extra
   `homeHero` class and every rule below is prefixed with it. Nothing here can
   affect another page.

   #homeBannerCarousel is NOT used as the scope hook — that id is reused by
   first-year.php, PDSHome.php and DemoPageVEnggSc.php.

   WHAT WAS WRONG
   --------------
   1. Carousel images resized per slide. style.css sets
      .bannerSubPages{height:520px;object-fit:cover}, but Bootstrap 3.4.1 ships
      `.carousel-inner>.item>img{display:block;max-width:100%;height:auto}`.
      At specificity (0,2,1) that beats .bannerSubPages (0,1,0), so inside the
      carousel the fixed height was silently discarded and every slide rendered
      at its own aspect ratio. The slides range from 1.000 (MergeP1, 1080x1080
      square) to 1.915 (KJNight, 676x353), so the hero changed height on every
      rotation. The left half kept its 520px, so the two halves never matched.

   2. Stray white strip under the left image. It had no `display:block`, so as
      an inline element it sat on a text baseline and left descender space
      beneath it.

   3. Mismatched column heights. .caroimg has a 10px white border, adding 20px
      to the carousel side that the left side did not have.

   4. Spacing came from nowhere in particular. The markup uses Bootstrap 4/5
      utilities — p-0, m-0, mb-2, mb-3, m-auto, h-100, w-100, d-block,
      img-fluid, align-items-stretch, col-12 — none of which exist in
      Bootstrap 3.4.1. They are inert, so the browser fell back to default
      heading margins and container padding. Real spacing is set below.

   5. col-lg-6 in Bootstrap 3 is >=1200px, not >=992px as in Bootstrap 4/5, so
      the hero stacked on any laptop between 992 and 1199px wide. home.php now
      also carries col-md-6 to get the two-up layout from 992px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   One height drives the whole hero. Both halves read from this, so they can
   never disagree.
   -------------------------------------------------------------------------- */
/* Deliberately .principalMsgBlock.homeHero, not just .homeHero: the height and
   padding below override .principalMsgBlock, which is also a single class, so
   on equal specificity the winner would be decided purely by stylesheet order
   in header.php. Two classes (0,2,0) beats one (0,1,0) outright, so this holds
   even if the <link> tags are ever reordered. */
.principalMsgBlock.homeHero {
  --hero-h: 520px;

  /* Breathing room above and below the image box. The section's own
     background-color (#b80d2e, from style.css) shows through here, so this
     reads as an even crimson frame top and bottom. */
  --hero-pad: 18px;

  /* THIS KILLS THE BIG CRIMSON BLOCK UNDER THE HERO.
     style.css line 1082 sets .principalMsgBlock{height:80vh} at top level, so
     the section was locked to 80% of the viewport height regardless of what
     was inside it. The hero content is --hero-h tall, so on a typical 1050px
     window that left roughly 300px of empty section with nothing in it but
     its own #b80d2e background — the "extra box" below the hero.

     height:auto makes the section hug its contents, so the only crimson left
     is the deliberate padding above and below. */
  height: auto;

  padding: var(--hero-pad) 0;

  /* Was margin-top:90px, carried over unchanged from style.css:1099 on the
     assumption that it cleared a fixed navbar. It does not — the navbar is
     only position:fixed once Bootstrap's affix plugin fires on scroll, and at
     the top of the page it is still in normal flow occupying its own 97px. So
     the browser rendered 97px of navbar and then 90px of nothing: the white
     band under the header.

     site-fixes.css section 9 makes the navbar position:sticky, which keeps it
     in the flow at all times, so no margin is needed here at any point. */
  margin-top: 0;
}

@media (max-width: 1199px) {
  .principalMsgBlock.homeHero { --hero-h: 420px; }
}

@media (max-width: 991px) {
  /* Stacked from here down (no col-md applies), so each half is shorter to
     keep the combined block from pushing the page content too far down. */
  .principalMsgBlock.homeHero { --hero-h: 320px; }
}

@media (max-width: 575px) {
  .principalMsgBlock.homeHero { --hero-h: 260px; }
}

@media (max-width: 435px) {
  /* Matches the existing global rule for the rest of the site, which sets
     .bannerSubPages{height:250px !important} at this width. */
  .principalMsgBlock.homeHero { --hero-h: 250px; }
}

/* --------------------------------------------------------------------------
   Structure — kill the inert Bootstrap 4 utilities' intended effects properly
   -------------------------------------------------------------------------- */

/* `p-0` on the container-fluid does nothing in Bootstrap 3, so the default
   15px side padding was still there, insetting a hero that should be
   full-bleed. */
.homeHero > .container-fluid {
  padding: 0;
}

/* overflow:hidden contains the floated columns, so no stray space collapses
   out below the section. */
.homeHero .row {
  margin: 0;
  overflow: hidden;
}

.homeHero .firstPart,
.homeHero .carousel-section {
  padding: 0;
}

/* --------------------------------------------------------------------------
   Left half — image + overlaid text
   -------------------------------------------------------------------------- */
/* Flex centring rather than the global absolute-position approach.
   style.css centres .bannerbottomText with
   position:absolute; top:50%; left:50%; transform:translate(-50%,-50%).
   That only lands on the true centre when the text box's own height is
   irrelevant, and it drifts as soon as the heading wraps to a different number
   of lines — which is exactly what happens as the viewport narrows. Flex
   centring is exact at every width and every line count. */
.homeHero .firstPart {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  display: flex;
  align-items: center;     /* perfect vertical centring */
  justify-content: center; /* perfect horizontal centring */
}

/* The image becomes the backdrop so it is not a flex item competing with the
   text for space — otherwise flex would try to lay the two out side by side. */
.homeHero .firstPart > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block; /* also removes the inline-baseline gap under the image */
  width: 100%;
  /* !important is required only below 435px, where the global
     .bannerSubPages{height:250px !important} would otherwise win. Among
     !important declarations specificity still decides, and this selector
     (0,2,1) beats .bannerSubPages (0,1,0). */
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Scrim so the white heading stays readable wherever the photo is light.
   Sits under .bannerbottomText, which is z-index 2 in style.css. */
.homeHero .firstPart::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.58) 100%);
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Left half text — deliberate spacing instead of default margins
   --------------------------------------------------------------------------
   The inline style="font-size:46px" / "font-size:34px" attributes were removed
   from home.php: an inline style beats any external stylesheet, so the type
   could not be made responsive while they were there. At 46px the heading
   overflowed its half of the hero on tablets.
   -------------------------------------------------------------------------- */
/* Unset the global absolute positioning so the flex centring above governs. */
.homeHero .bannerbottomText {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;

  width: 92%;
  max-width: 620px;
  padding: 0 8px;
}

.homeHero .bannerbottomText h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.2vw, 46px);
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.homeHero .bannerbottomText h3 {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.9vw, 30px);
  line-height: 1.3;
  font-weight: 400;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Replaces the removed inline style="display:block;margin:auto" */
.homeHero .bannerbottomText .banner-button {
  display: inline-block;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Right half — carousel locked to the same box
   --------------------------------------------------------------------------
   This is the fix for slides resizing. Every slide is forced into the same
   box and cropped to fill it, so the hero height is constant no matter what
   the slide's aspect ratio is. New slides can be any dimensions.
   -------------------------------------------------------------------------- */
.homeHero .carousel-section {
  height: var(--hero-h);
}

/* .caroimg carries the 10px white frame + radius from style.css. border-box
   keeps that frame inside var(--hero-h) so this column matches the left one
   exactly rather than being 20px taller. */
.homeHero .caroimg {
  height: 100%;
  box-sizing: border-box;
}

.homeHero .carousel-inner {
  height: 100%;
}

.homeHero .carousel-inner > .item {
  height: 100%;
}

/* (0,3,1) — beats Bootstrap 3's .carousel-inner>.item>img (0,2,1), which is
   what was resetting these to height:auto. !important is needed for the
   <435px case described above. */
.homeHero .carousel-inner > .item > img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* A 10px frame is a large fraction of a 250px-tall box on a phone. */
@media (max-width: 991px) {
  .homeHero .caroimg {
    border-width: 6px;
  }
}

/* --------------------------------------------------------------------------
   Stacked layout: a small gap between the two halves, and nothing after
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .homeHero .firstPart {
    margin-bottom: 8px;
  }
}