/*
 * Azhar-theme homepage.
 *
 * Only what is specific to the homepage lives here - the hero slider, the
 * notices panel beside it, and the couple of bands that have no reuse
 * elsewhere. Everything shared (section headers, tiles, media cards, the
 * statistics band, the alumni strip) comes from sections.css.
 */

/* ---- Hero + notices row --------------------------------------------- */

.home-lead {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  background: var(--color-surface-muted);
}

.hero-carousel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-raised);
  background: var(--color-primary-900);
  height: 100%;
  min-height: 420px;
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
  height: 100%;
  min-height: 420px;
}

.hero-slide-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A legibility scrim - the caption sits on photographs of unknown
   brightness, so the text needs its own guaranteed contrast. */
.hero-slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 32, 20, 0.88) 0%,
    rgba(8, 32, 20, 0.55) 38%,
    rgba(8, 32, 20, 0.12) 70%,
    rgba(8, 32, 20, 0.05) 100%
  );
}

.hero-slide-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2rem 2.25rem 3.25rem;
  color: #fff;
}

.hero-slide-body h2 {
  color: #fff;
  font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2rem);
  line-height: 1.35;
  margin-bottom: 0.5rem;
  max-width: 34rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-slide-body p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 34rem;
  margin-bottom: 0.9rem;
  font-size: 0.98rem;
}

.hero-slide-body .btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding-inline: 1.35rem;
}

/* An HTML-authored slide has no photograph, so it gets the brand gradient
   as its own ground. */
.hero-slide-html-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-900) 100%);
  background-size: cover;
  background-position: center;
  overflow: auto;
}

.hero-slide-html-panel h2 { color: #fff; }

.hero-carousel .carousel-indicators {
  margin-bottom: 1rem;
  z-index: 3;
}

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transition: background-color 0.25s ease, width 0.25s ease;
}

.hero-carousel .carousel-indicators .active {
  background-color: var(--color-accent-400);
  width: 26px;
  border-radius: var(--radius-pill);
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 3.25rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
}

.hero-carousel:hover .carousel-control-prev,
.hero-carousel:hover .carousel-control-next,
.hero-carousel .carousel-control-prev:focus-visible,
.hero-carousel .carousel-control-next:focus-visible {
  opacity: 1;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  background-size: 1rem;
}

/* ---- Varied slide entrances (§5.1) -----------------------------------
 * The carousel itself cross-fades (Bootstrap's .carousel-fade). On top of
 * that each slide declares its own entrance via data-anim, cycled by index
 * in the view, so consecutive slides never arrive the same way: one drifts
 * in with a slow zoom, the next pans, the next rises. All of it is
 * transform/opacity on the slide's own layers, so the carousel's own
 * machinery is untouched. */

.hero-carousel .carousel-item .hero-slide-media img,
.hero-carousel .carousel-item .hero-slide-body {
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.hero-carousel .carousel-item.active .hero-slide-media img,
.hero-carousel .carousel-item.active .hero-slide-body {
  animation-play-state: running;
}

.hero-carousel .carousel-item[data-anim='zoom'].active .hero-slide-media img { animation-name: hero-zoom-in; animation-duration: 7s; }
.hero-carousel .carousel-item[data-anim='pan'].active .hero-slide-media img  { animation-name: hero-pan; animation-duration: 8s; }
.hero-carousel .carousel-item[data-anim='fade'].active .hero-slide-media img { animation-name: hero-soft-out; animation-duration: 7s; }
.hero-carousel .carousel-item[data-anim='rise'].active .hero-slide-media img { animation-name: hero-rise-img; animation-duration: 7s; }

.hero-carousel .carousel-item[data-anim='zoom'].active .hero-slide-body { animation-name: hero-body-up; }
.hero-carousel .carousel-item[data-anim='pan'].active .hero-slide-body  { animation-name: hero-body-in; }
.hero-carousel .carousel-item[data-anim='fade'].active .hero-slide-body { animation-name: hero-body-fade; }
.hero-carousel .carousel-item[data-anim='rise'].active .hero-slide-body { animation-name: hero-body-scale; }

@keyframes hero-zoom-in  { from { transform: scale(1.0); }   to { transform: scale(1.12); } }
@keyframes hero-pan      { from { transform: scale(1.1) translate3d(2%, 0, 0); } to { transform: scale(1.1) translate3d(-2%, 0, 0); } }
@keyframes hero-soft-out { from { transform: scale(1.12); }  to { transform: scale(1.0); } }
@keyframes hero-rise-img { from { transform: scale(1.08) translate3d(0, 1.5%, 0); } to { transform: scale(1.08) translate3d(0, -1.5%, 0); } }

@keyframes hero-body-up    { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-body-in    { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-body-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-body-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

[dir='rtl'] .hero-carousel .carousel-item[data-anim='pan'].active .hero-slide-body { animation-name: hero-body-in-rtl; }
@keyframes hero-body-in-rtl { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }

/* ---- Recent notices panel -------------------------------------------- */

.notices-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.notices-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-primary-700);
  color: #fff;
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent-500);
}

.notices-panel-head i { color: var(--color-accent-400); }

.notices-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 1.1rem;
  scrollbar-width: thin;
}

.notices-panel-foot {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.notice-row.is-urgent .notice-row-date {
  background: var(--color-accent-300);
  color: #5a4508;
}

/* ---- Quick-access band (Admission / Result / Masala) ------------------ */

.quick-access-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
  box-shadow: var(--shadow-soft);
}

.quick-access-card:nth-child(2n) {
  background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
}

.quick-access-card .qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.4rem;
}

.quick-access-card .qa-title { font-weight: 700; font-size: 1.05rem; color: #fff; }
.quick-access-card .qa-sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); }

/* ---- Welcome band ---------------------------------------------------- */

.welcome-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-raised);
  aspect-ratio: 4 / 3;
  background: var(--color-primary-50);
}

.welcome-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.welcome-body {
  color: var(--color-ink-soft);
  /* The welcome text is an editor-written page; cap what the homepage
     shows so a long essay does not push the rest of the page down. */
  max-height: 19rem;
  overflow: hidden;
  position: relative;
}

.welcome-body::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4rem;
  background: linear-gradient(transparent, var(--color-surface));
}

.sec-muted .welcome-body::after {
  background: linear-gradient(transparent, var(--color-surface-muted));
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 991.98px) {
  /* §5.2: Recent Notices moves below the hero on mobile. It is already
     the second column in source order, so the grid stacking does it - the
     panel just stops stretching to the hero's height. */
  .hero-carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item { min-height: 320px; }

  .notices-panel { min-height: 0; max-height: 26rem; }
  .hero-slide-body { padding: 1.25rem 1.35rem 2.5rem; }
}

@media (max-width: 575.98px) {
  .hero-carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item { min-height: 240px; }

  .hero-slide-body { padding: 1rem 1.1rem 2.25rem; }
  .hero-slide-body p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .carousel-item .hero-slide-media img,
  .hero-carousel .carousel-item .hero-slide-body,
  .hero-carousel .carousel-item.active .hero-slide-media img,
  .hero-carousel .carousel-item.active .hero-slide-body {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---- Introduction band (পরিচিতি) ------------------------------------ *
 * One heading, a row of tab titles under it, and a single panel that
 * changes with the tab - the Al-Azhar homepage pattern. The tab strip
 * itself is styled in sections.css (.intro-tabs); what follows is the
 * band's panel and the four shapes of content it can hold.
 */

.intro-band .intro-tabs {
  gap: 0.35rem 0.5rem;
  border-bottom-color: var(--color-primary-200);
  margin-bottom: 0;
}

.intro-band .intro-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.02rem;
  padding: 0.75rem 1.35rem;
}

.intro-band .intro-tabs .nav-link i { color: var(--color-accent-500); font-size: 1.05rem; }
.intro-band .intro-tabs .nav-link.active { background: var(--color-surface); }

.intro-band .intro-tabs .nav-link.active i { color: var(--color-accent-600); }

.intro-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2rem 2.15rem 2.25rem;
}

.intro-prose,
.intro-panel .intro-card-body { color: var(--color-ink-soft); }
.intro-prose :last-child,
.intro-panel .intro-card-body :last-child { margin-bottom: 0; }

/* Mission / Vision: two equal cards, separated by the accent rule. */
.intro-split {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent-500);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.6rem;
}

/* Head teacher's message. */
.head-msg-figure {
  margin: 0 auto;
  width: 12.5rem;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.head-msg-figure img { width: 100%; height: 100%; object-fit: cover; }

.head-msg-name { font-weight: 700; color: var(--color-primary-800); }
.head-msg-role { font-size: 0.9rem; color: var(--color-ink-muted); }

.head-msg-body {
  position: relative;
  padding-inline-start: 1.4rem;
  border-inline-start: 3px solid var(--color-accent-400);
  font-size: 1.02rem;
}

@media (max-width: 991.98px) {
  .intro-panel { padding: 1.5rem 1.25rem 1.75rem; }
  .intro-band .intro-tabs .nav-link { font-size: 0.95rem; padding: 0.6rem 1rem; }
}

@media (max-width: 575.98px) {
  /* The strip scrolls rather than wrapping into four stacked rows. */
  .intro-band .intro-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .intro-band .intro-tabs::-webkit-scrollbar { display: none; }
  .intro-band .intro-tabs .nav-link { white-space: nowrap; }
  .intro-band .intro-tabs .nav-link span { font-size: 0.9rem; }
}