@import url("birla-mobile-v86.css");

/* Mobile-only visual corrections, v87.
   Desktop and laptop layouts are intentionally untouched. */
@media (max-width: 820px) {
  /* Remove decorative glyphs that collide with the hero title and CBSE badge. */
  .hero .doodle-a,
  .hero .doodle-c {
    display: none !important;
  }

  /* The mobile hero does not need the desktop scalloped separator. */
  .hero-wave {
    display: none !important;
  }

  /* Keep the homepage slider controls below the image frame. */
  .hero .hero-pagination {
    bottom: -18px !important;
  }

  /* Keep the CBSE badge clear of the image and surrounding decorations. */
  .sun-badge {
    left: 8px !important;
    bottom: 32% !important;
    z-index: 8 !important;
    transform: rotate(-6deg) !important;
  }

  /* Give the quick-link wave its own space below the final card. */
  .parent-desk {
    padding-bottom: 112px !important;
    overflow: hidden !important;
  }

  .parent-desk::after {
    height: 78px !important;
    background-size: 250px 50px, 100% calc(100% - 49px) !important;
    animation-duration: 7s !important;
  }

  /* Keep the shared orange hero accent inside the image area on every page. */
  .page-hero .hero-copy {
    position: relative;
    z-index: 2;
  }

  .page-hero .hero-media {
    isolation: isolate;
    margin-top: 6px;
  }

  .page-hero .hero-media::before {
    inset: 12px -8px -12px 14px !important;
    border-radius: 30px !important;
    transform: rotate(2deg) !important;
  }

  /* Allow the complete Reel card, including its caption, to remain visible. */
  .reels-viewport {
    height: 620px !important;
  }

  /* Stack the news action beneath the heading with a deliberate gap. */
  .news .section-heading.compact {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 34px !important;
  }

  .news .section-heading.compact > div,
  .news .section-heading.compact h2 {
    width: 100%;
    margin-bottom: 0 !important;
  }

  .news .outline-link {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 11px 16px !important;
    gap: 7px;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .news .outline-link span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  /* The address panel was clipped by the embedded map on narrow screens. */
  .map-panel .map-label {
    display: none !important;
  }

  /* Keep the footer joined cleanly while preserving its animated yellow wave. */
  footer .footer-wave {
    position: relative;
    top: -1px;
    margin-bottom: -1px;
    box-shadow: 0 -2px 0 var(--yellow);
  }

  footer {
    margin-top: 0 !important;
    border-top: 0 !important;
  }
}

@media (max-width: 500px) {
  .sun-badge {
    left: 6px !important;
    bottom: 36% !important;
  }

  .parent-desk {
    padding-bottom: 104px !important;
  }

  .parent-desk::after {
    height: 72px !important;
    background-size: 230px 48px, 100% calc(100% - 47px) !important;
  }
}

@media (max-width: 560px) {
  .reels-viewport {
    height: calc(min(138.67vw, 488.9px) + 160px) !important;
  }
}