/* ==========================================================================
   Shared page strip — the thin dark band at the top of about, services,
   courses, Franchise, media and student_corner.

   ONE file on purpose. All six have to be the same height and width, and six
   copies of these values would drift the first time any page was touched.

   HEIGHT
   Measured on the live band (iglobexinfotech.in/Franchise.php) at a 1425px
   viewport: 205px total, made up of

       58px  padding-top
       53px  h1     (46px / 800 / -1px tracking, one line)
       15px  h1 margin-bottom
       27px  lead   (16px / 1.7, one line)
       52px  padding-bottom

   That is the whole strip — no badge, no counters, no buttons. min-height pins
   it at 205 so no page comes out shorter, and every page's heading and lead are
   kept to a single line so none comes out taller.

   Anything that used to sit inside the band — about's four counters and
   credentials line, services' counters, courses' two facts, media's counts,
   student_corner's counters and buttons — now sits directly BELOW it, in
   .gx-page-substrip, styled as light cards on the page's own background.

   The previous version of this file held all of that inside the band and pinned
   it at 580px (700 and 780 on narrow screens). That is what was running too
   tall.
   ========================================================================== */

.gx-page-hero {
  position: relative;
  overflow: hidden;
  /* A floor, not a fixed height: a heading that wraps on a narrow screen must
     still be readable rather than clipped. */
  min-height: 205px;
  display: grid;
  align-content: center;
  padding: 58px 40px 52px;
  /* Full-bleed on purpose — the band runs to the window edges, the way the live
     Franchise band does. An inset version (32px gutters, 2rem corners, like
     .cta-band) was tried and taken back out. */
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .12), transparent 28%),
    radial-gradient(circle at 85% 80%, rgba(37, 99, 235, .22), transparent 32%),
    linear-gradient(135deg, #050b18 0%, #0b1733 48%, #123a91 100%);
}

/* Content above the decoration, held to the same reading width as the pages. */
.gx-page-hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

/* Two large soft glows bleeding in from opposite corners. They are far taller
   than the strip on purpose — only the inner edge of each one shows. */
.gx-page-hero::before,
.gx-page-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.gx-page-hero::before {
  width: 350px; height: 350px; left: -180px; top: -180px;
  background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
  animation: heroGlow 9s ease-in-out infinite;
}
.gx-page-hero::after {
  width: 420px; height: 420px; right: -220px; bottom: -250px;
  background: radial-gradient(circle, rgba(59, 130, 246, .15), transparent 70%);
  animation: heroGlow 11s ease-in-out infinite reverse;
}

/* ── heading ── */
.gx-page-hero h1,
.gx-page-hero h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  margin: 0 0 15px;
  color: #fff;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
}
.gx-page-hero h1 i,
.gx-page-hero h2 i {
  margin-right: 12px;
  font-size: .82em;
  color: #3b82f6;
  /* Without this the icon inline box is taller than the 52.9px heading line box
     and stretches it. Franchise.php came out 0.7px taller than the other five
     purely because it uses the Font Awesome 6 fa-solid glyph while they use fas
     — different metrics, same visible icon. */
  line-height: 1;
  vertical-align: baseline;
}
/* One heading is far longer than the rest — about.php's "Driving Digital
   Transformation Since 2014" is 40 characters against 13 for media.php. At the
   shared scale it wrapped to two lines between roughly 600px and 1300px, and
   that page alone came out 246px instead of 205px. A slightly smaller scale for
   that one heading keeps all six level. It is the only per-page value in this
   file, and it is here rather than in css/pages/about.css so the reason sits
   next to the rule it competes with. */
.gx-page-hero .gx-page-hero__title--long {
  font-size: clamp(26px, 3.1vw, 40px);
}

/* The one accented word in a heading.
   `font: inherit` is not cosmetic here. css/pages/Franchise.css carries a
   `* { font-family: "Segoe UI", Arial, sans-serif }` reset, and a universal
   selector applies to this span directly, so it beats the font-family the h1
   inherits down. The result was "Affiliation" rendering in Segoe UI next to
   "Franchise" in Poppins, and a line box 0.7px taller than the other five
   pages. This pins the span back to whatever the heading is using. */
.gx-page-hero .hero-accent { color: #93c5fd; font: inherit; }

/* ── the single line under it ── */
.gx-page-hero .section-subhead,
.gx-page-hero .gx-page-hero__lead {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}

/* The badge is gone from the strip: it added 22px of text plus 1.4rem of
   margin, and there is only room for a heading and one line. Kept as a rule so
   any page still carrying the markup does not push the height back up. */
.gx-page-hero .hero-badge { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   THE LIGHT BAND DIRECTLY UNDER THE STRIP

   Counters, fact chips and buttons live here now, on the page background. The
   markup per page is the same as before — .stats-grid / .stat-card and friends
   — just moved out of .gx-page-hero and wrapped in .gx-page-substrip.
   ══════════════════════════════════════════════════════════════════════════ */

.gx-page-substrip {
  padding: 2.5rem 20px 0;
}
.gx-page-substrip__inner {
  max-width: 1280px;
  margin-inline: auto;
  text-align: center;
}

/* ── counters ──
   Two classes deep so these beat the older single-class .stat-card rules still
   sitting in css/pages/about.css. */
.gx-page-substrip .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.gx-page-substrip .stat-card {
  padding: 1.5rem 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e6ebf3;
  border-radius: 1.25rem;
  box-shadow: 0 8px 24px rgba(15, 35, 70, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gx-page-substrip .stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 14px 34px rgba(15, 35, 70, .12);
}
.gx-page-substrip .stat-number {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: #123a91;
}
.gx-page-substrip .stat-label {
  font-size: .875rem;
  font-weight: 600;
  margin-top: .25rem;
  color: #475569;
}
.gx-page-substrip .stat-label i { color: #2563eb; margin-right: .35rem; }

/* ── fact chips ──
   courses.php has two facts rather than four counters, so it uses a row of
   pills. Light versions of the glass ones that were in the band. */
.gx-page-substrip .gx-page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: 0;
}
.gx-page-substrip .gx-page-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  border-radius: 60px;
  font-size: .9rem;
  font-weight: 600;
  color: #1e3a6b;
  background: #fff;
  border: 1px solid #e6ebf3;
  box-shadow: 0 6px 18px rgba(15, 35, 70, .06);
}
.gx-page-substrip .gx-page-hero__chip i { color: #2563eb; }

/* ── button row ──
   student_corner has two buttons. This only spaces them; their look still
   comes from .btn-glow / .btn-outline on that page. */
.gx-page-substrip .gx-page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
}

/* student_corner.php's outline button was white text on a 40%-white border —
   built for the dark hero it used to live in. On this light band that is white
   on #f8fafd, i.e. invisible. Restyled here and scoped to the substrip, so the
   rule in css/pages/student_corner.css keeps working anywhere else it is used
   and that file does not have to be touched at all. The filled button beside it
   needs nothing: its own gradient is dark blue already. */
.gx-page-substrip .btn-outline {
  color: #123a91;
  background: #fff;
  border: 1.5px solid rgba(18, 58, 145, .35);
}
.gx-page-substrip .btn-outline:hover {
  color: #fff;
  background: #123a91;
  border-color: #123a91;
}

/* ── credentials line (about.php) ── */
.gx-page-substrip .gx-page-hero__creds {
  margin: 1.25rem 0 0;
  font-weight: 500;
  font-size: .95rem;
  color: #475569;
}
.gx-page-substrip .gx-page-hero__creds i { color: #2563eb; }
.gx-page-substrip .gx-page-hero__creds .fa-star { color: #fbbf24; }


/* ══════════════════════════════════════════════════════════════════════════
   DECORATION
   ══════════════════════════════════════════════════════════════════════════ */

.hero-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-shapes .shape { position: absolute; display: block; pointer-events: none; }

/* Sized and placed for a 205px band: the big shapes hang off the edges so only
   a sliver shows, and the small ones sit inside the padding. */
.shape-circle {
  width: 220px; height: 220px; right: -70px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.20), rgba(37,99,235,.04) 60%, transparent 72%);
  animation: heroFloatCircle 8s ease-in-out infinite;
}
.shape-ring {
  width: 150px; height: 150px; left: -60px; bottom: -70px;
  border: 2px solid rgba(59, 130, 246, .30);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(37, 99, 235, .10);
  animation: heroRotate 14s linear infinite;
}
.shape-square {
  width: 58px; height: 58px; right: 15%; top: 26%;
  border: 1px solid rgba(96, 165, 250, .28);
  background: rgba(59, 130, 246, .05);
  border-radius: 14px;
  transform: rotate(25deg);
  animation: heroFloatSquare 7s ease-in-out infinite;
}
.shape-diamond {
  width: 34px; height: 34px; left: 15%; top: 30%;
  border: 1px solid rgba(96, 165, 250, .35);
  background: rgba(37, 99, 235, .08);
  transform: rotate(45deg);
  animation: heroDiamond 6s ease-in-out infinite;
}
.shape-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 15px rgba(59, 130, 246, .65);
}
.dot-1 { left: 7%;  top: 26%;    animation: heroDot 4s   ease-in-out infinite; }
.dot-2 { right: 8%; top: 68%;    width: 6px; height: 6px; animation: heroDot 5s   ease-in-out .8s  infinite; }
.dot-3 { left: 30%; bottom: 18%; width: 5px; height: 5px; animation: heroDot 4.5s ease-in-out 1.2s infinite; }

/* Rings expanding out of the centre, staggered so one is always mid-flight.
   Scaled down with the band, and they stop at 3.2x rather than 5x — beyond
   that they were only ever a line crossing the text. */
.zoom-ring {
  position: absolute;
  width: 70px; height: 70px;
  left: 50%; top: 50%;
  border: 1px solid rgba(96, 165, 250, .35);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.25);
  opacity: 0;
  pointer-events: none;
  animation: zoomRing 6s ease-out infinite;
}
.ring-1 { animation-delay: 0s; }
.ring-2 { animation-delay: 2s; }
.ring-3 { animation-delay: 4s; }

@keyframes heroGlow        { 0%,100% { transform: scale(1);    opacity: .7; }
                             50%     { transform: scale(1.15); opacity: 1; } }
@keyframes heroFloatCircle { 0%,100% { transform: translate3d(0,0,0); }
                             50%     { transform: translate3d(-20px, 18px, 0); } }
@keyframes heroRotate      { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes heroFloatSquare { 0%,100% { transform: translate3d(0,0,0) rotate(25deg); }
                             50%     { transform: translate3d(-16px, 14px, 0) rotate(55deg); } }
@keyframes heroDiamond     { 0%,100% { transform: translateY(0) rotate(45deg); }
                             50%     { transform: translateY(-14px) rotate(90deg); } }
@keyframes heroDot         { 0%,100% { opacity: .35; transform: translateY(0) scale(1); }
                             50%     { opacity: 1;   transform: translateY(-14px) scale(1.5); } }
@keyframes zoomRing        { 0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
                             10%  { opacity: .55; }
                             60%  { opacity: .28; }
                             100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }

/* Everything above drifts continuously; honour the system setting. */
@media (prefers-reduced-motion: reduce) {
  .hero-shapes *,
  .gx-page-hero::before,
  .gx-page-hero::after { animation: none !important; }
  .gx-page-substrip .stat-card { transition: none; }
  .gx-page-substrip .stat-card:hover { transform: none; }
}

/* ── narrow screens ──
   Padding follows the live band's own steps. No min-height override is needed
   any more: the strip holds one heading and one line at every width, so the six
   pages stay level on content alone. That is also why the leads on about,
   services and student_corner were shortened — a two-line lead on one page next
   to a one-line lead on another is exactly how they used to come out at
   different heights. */
@media (max-width: 900px) {
  .gx-page-hero { padding: 48px 28px; }
  .gx-page-substrip { padding-top: 2rem; }
  .gx-page-substrip .stats-grid { gap: 1rem; }
}
@media (max-width: 600px) {
  .gx-page-hero { padding: 38px 20px 36px; }
  /* On a phone the strip only varies by how many lines a heading wraps to.
     clamp() bottoms out at 30px, which put about.php's "Driving Digital
     Transformation Since 2014" on three lines against one line for media.php —
     a 42px spread. Scaling with the viewport instead brings the longest heading
     down to two lines and the spread to roughly 17px. */
  .gx-page-hero h1,
  .gx-page-hero h2 { font-size: clamp(24px, 7.2vw, 30px); }
  .gx-page-substrip .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .gx-page-substrip .stat-number { font-size: 1.75rem; }
  .gx-page-substrip .gx-page-hero__cta { flex-direction: column; align-items: stretch; }
  .shape-circle  { width: 160px; height: 160px; right: -70px; top: -80px; }
  .shape-ring    { width: 110px; height: 110px; left: -55px; bottom: -60px; }
  .shape-square  { width: 44px;  height: 44px;  right: 8%; }
  .shape-diamond { width: 26px;  height: 26px;  left: 8%; }
  .shape-dot     { opacity: .5; }
}