/* ==========================================================================
   SKIT Jaipur — "The Grand Homepage" variation
  Editorial, national-caliber university design layered on top of site.css.
   Palette: ivory paper + deep maroon (brand) + antique gold + ink charcoal.
   ========================================================================== */

:root {
  --gr-ink: #0b0c10;
  --gr-paper: #faf6ef;
  --gr-paper-deep: #f2ead9;
  --gr-gold: #b6862c;
  --gr-gold-light: #e7c877;
  --gr-slate: #23262c;
  --gr-line: rgba(11, 12, 16, 0.1);
  --gr-serif: 'Merriweather', serif;
}

/* ============ Shared editorial primitives ============ */
.gr-section { padding: 120px 0; }
.gr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gr-gold);
  margin-bottom: 22px;
}
.gr-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gr-gold); }
.gr-eyebrow--light { color: var(--gr-gold-light); }

.gr-head { max-width: 760px; margin-bottom: 64px; }
.gr-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.gr-head h2 {
  font-family: var(--gr-serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--black);
}
.gr-head p { margin-top: 18px; font-size: 1.06rem; color: var(--gray); }
.gr-head--light h2 { color: var(--white); }
.gr-head--light p { color: rgba(255,255,255,0.72); }

.gr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: var(--transition);
}
.gr-btn--gold { background: var(--gr-gold); color: var(--gr-ink); }
.gr-btn--gold:hover { background: var(--gr-gold-light); transform: translateY(-2px); }
.gr-btn--line { border-color: rgba(255,255,255,0.4); color: var(--white); }
.gr-btn--line:hover { border-color: var(--gr-gold); color: var(--gr-gold-light); }
.gr-btn--ink { border-color: var(--gr-ink); color: var(--gr-ink); }
.gr-btn--ink:hover { background: var(--gr-ink); color: var(--white); }

/* Elegant photographic placeholder — replaces dashed maroon boxes with a
   refined tone-on-tone texture suited to a national-caliber institute. */
.gr-frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #1c1d21 0%, #33262a 55%, #1c1d21 100%);
  min-height: 100%;
}
.gr-frame::after {
  content: attr(data-caption);
  position: absolute; left: 20px; bottom: 18px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.35);
  padding: 6px 12px;
  border-radius: 999px;
}
.gr-frame--gold::before {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(230,196,110,0.35);
  pointer-events: none;
}

/* ============ Hero ============ */
.gr-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--gr-ink);
  overflow: hidden;
  background: radial-gradient(circle at 86% 12%, rgba(182,134,44,0.18), transparent 38%), radial-gradient(circle at 8% 88%, rgba(122,12,46,0.08), transparent 45%), linear-gradient(150deg, #fffdf9 0%, var(--gr-paper) 100%);
}
.gr-hero__rule { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gr-gold) 0%, var(--maroon-light) 50%, var(--gr-gold) 100%); }
.gr-hero__image { position: absolute; top: 14%; right: 7%; width: 34%; height: 58%; overflow: hidden; border: 14px solid rgba(255,255,255,0.7); box-shadow: 0 24px 60px rgba(74,3,19,0.16); transform: rotate(2deg); }
.gr-hero__image::after { content: "SKIT Jaipur"; position: absolute; right: 18px; bottom: 16px; padding: 6px 12px; background: rgba(11,12,16,0.7); color: var(--white); font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.gr-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.gr-hero__inner { position: relative; z-index: 2; padding: 90px 24px 60px; width: 100%; }
.gr-hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--maroon); border: 1px solid rgba(122,12,46,0.28); padding: 8px 18px; border-radius: 999px; margin-bottom: 34px; }
.gr-hero h1 { font-family: var(--gr-serif); font-weight: 700; font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.14; max-width: 900px; color: var(--gr-ink); }
.gr-hero h1 em { font-style: normal; color: var(--maroon); }
.gr-hero__lead { margin-top: 26px; max-width: 640px; font-size: 1.12rem; color: var(--charcoal); }
.gr-hero__actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 42px; }
.gr-btn--line { border-color: rgba(11,12,16,0.35); color: var(--gr-ink); }
.gr-btn--line:hover { border-color: var(--maroon); color: var(--maroon); }
.gr-hero__stats { position: relative; z-index: 2; margin-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(11,12,16,0.14); }
.gr-hero__stat { padding: 30px 26px; border-right: 1px solid rgba(11,12,16,0.14); }
.gr-hero__stat:last-child { border-right: none; }
.gr-hero__stat strong { display: block; font-family: var(--gr-serif); font-size: 2.1rem; color: var(--maroon); }
.gr-hero__stat span { display: block; margin-top: 6px; font-size: 0.84rem; color: var(--gray); }
/* ============ Accreditation ticker ============ */
.gr-ticker {
  background: var(--gr-ink);
    border-right: 1px solid rgba(11,12,16,0.14);
  padding: 20px 0;
  overflow: hidden;
    color: var(--maroon);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gr-ticker__track {
  color: var(--maroon);
  gap: 60px;
  animation: gr-scroll 32s linear infinite;
  padding-left: 60px;
}
.gr-ticker__track span { font-size: 0.82rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.gr-ticker__track span strong { color: var(--gr-gold-light); }
@keyframes gr-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Legacy / About editorial ============ */
.gr-legacy { background: var(--gr-paper); }
.gr-legacy__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: stretch;
}
.gr-legacy__media { min-height: 460px; border-radius: 2px; }
.gr-legacy__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-legacy__quote {
  font-family: var(--gr-serif);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--black);
  border-left: 3px solid var(--gr-gold);
  padding-left: 26px;
  margin: 30px 0 34px;
}
.gr-legacy__quote span { display: block; margin-top: 14px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; color: var(--gray); text-transform: uppercase; }
.gr-legacy__body p { color: var(--charcoal); margin-bottom: 16px; font-size: 1rem; }
.gr-legacy__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
.gr-legacy__facts li { list-style: none; position: relative; padding-left: 24px; font-size: 0.92rem; color: var(--charcoal); }
.gr-legacy__facts li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; background: var(--gr-gold); }

/* ============ Pillars of Excellence ============ */
.gr-pillars { background: var(--white); }
.gr-pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gr-line); border: 1px solid var(--gr-line); }
.gr-pillar { background: var(--white); padding: 44px 32px; transition: var(--transition); }
.gr-pillar:hover { background: var(--gr-ink); }
.gr-pillar:hover, .gr-pillar:hover h3, .gr-pillar:hover p { color: var(--white); }
.gr-pillar:hover .gr-pillar__num { color: var(--gr-gold-light); }
.gr-pillar__num { display: block; font-family: var(--gr-serif); font-size: 1.4rem; color: var(--gr-gold); margin-bottom: 20px; }
.gr-pillar h3 { font-size: 1.08rem; margin-bottom: 12px; color: var(--black); }
.gr-pillar p { font-size: 0.9rem; color: var(--gray); }

/* ============ Schools of Excellence (departments) ============ */
.gr-schools { background: var(--gr-slate); color: var(--white); }
.gr-schools__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gr-school {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 34px 26px;
  transition: var(--transition);
}
.gr-school:hover { border-color: var(--gr-gold); transform: translateY(-6px); }
.gr-school__tag { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gr-gold-light); margin-bottom: 16px; }
.gr-school h3 { font-family: var(--gr-serif); font-size: 1.12rem; color: var(--white); margin-bottom: 10px; }
.gr-school p { font-size: 0.85rem; color: rgba(255,255,255,0.65); }

/* ============ Outcomes / Placements ============ */
.gr-outcomes {
  background:
    radial-gradient(circle at 85% 20%, rgba(182,134,44,0.18), transparent 45%),
    linear-gradient(150deg, var(--maroon-dark) 0%, var(--gr-ink) 75%);
  color: var(--white);
}
.gr-outcomes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.gr-outcomes__body p { color: rgba(255,255,255,0.78); margin-bottom: 30px; max-width: 520px; }
.gr-outcomes__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.gr-stat { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 18px; }
.gr-stat strong { display: block; font-family: var(--gr-serif); font-size: 2.4rem; color: var(--gr-gold-light); }
.gr-stat span { display: block; margin-top: 8px; font-size: 0.86rem; color: rgba(255,255,255,0.72); }

/* ============ Beyond the Classroom (campus bento) ============ */
.gr-campus { background: var(--gr-paper); }
.gr-campus__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 190px;
  gap: 16px;
}
.gr-campus__card { grid-column: span 2; grid-row: span 1; position: relative; padding: 24px; color: var(--white); display: flex; align-items: flex-end; }
.gr-campus__card--wide { grid-column: span 3; }
.gr-campus__card--tall { grid-row: span 2; }
.gr-campus__card { background-image: linear-gradient(180deg, rgba(11,12,16,0.04) 28%, rgba(11,12,16,0.82) 100%), url('../src/assets/skit_1.jpeg'); background-size: cover; background-position: center; }
.gr-campus__card:nth-child(2) { background-position: 58% center; }
.gr-campus__card:nth-child(3) { background-position: 42% center; }
.gr-campus__card:nth-child(4) { background-position: 72% center; }
.gr-campus__card:nth-child(5) { background-position: 30% center; }
.gr-campus__card::after { display: none; }
.gr-campus__card h3 { position: relative; z-index: 2; padding: 8px 12px; border-left: 2px solid var(--gr-gold-light); background: rgba(11,12,16,0.68); color: var(--white); font-size: 1.05rem; }

/* ============ Leadership message ============ */
.gr-leadership { background: var(--white); }
.gr-leadership__grid { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 60px; align-items: center; }
.gr-leadership__media { min-height: 380px; background-image: linear-gradient(180deg, rgba(11,12,16,0.02), rgba(11,12,16,0.65)), url('../src/assets/skit_1.jpeg'); background-size: cover; background-position: 68% center; }
.gr-leadership__quote { font-family: var(--gr-serif); font-size: 1.55rem; line-height: 1.5; color: var(--black); }
.gr-leadership__attrib { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.gr-leadership__attrib-line { width: 44px; height: 2px; background: var(--gr-gold); }
.gr-leadership__attrib strong { display: block; font-size: 0.95rem; color: var(--black); }
.gr-leadership__attrib span { font-size: 0.8rem; color: var(--gray); }

/* ============ Testimonials (editorial) ============ */
.gr-voices { background: var(--gr-ink); color: var(--white); }
.gr-voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.1); }
.gr-voice { background: var(--gr-ink); padding: 40px 32px; }
.gr-voice__mark { font-family: var(--gr-serif); font-size: 2.4rem; color: var(--gr-gold); line-height: 1; margin-bottom: 18px; display: block; }
.gr-voice p { font-size: 0.98rem; color: rgba(255,255,255,0.82); font-style: italic; margin-bottom: 20px; }
.gr-voice strong { display: block; font-size: 0.85rem; color: var(--gr-gold-light); }
.gr-voice em { display: block; font-style: normal; font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 3px; }

/* ============ News / research spotlight ============ */
.gr-news { background: var(--gr-paper); }
.gr-news__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
.gr-news__feature { position: relative; min-height: 420px; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--white); }
.gr-news__feature { background-image: linear-gradient(180deg, rgba(11,12,16,0.03) 28%, rgba(11,12,16,0.86) 100%), url('../src/assets/skit_1.jpeg'); background-size: cover; background-position: 38% center; }
.gr-news__feature::after { display: none; }
.gr-news__feature h3 { position: relative; z-index: 2; font-family: var(--gr-serif); font-size: 1.5rem; margin-bottom: 10px; }
.gr-news__feature p { position: relative; z-index: 2; color: rgba(255,255,255,0.8); font-size: 0.92rem; }
.gr-news__item { background: var(--white); border: 1px solid var(--gr-line); padding: 28px 26px; }
.gr-news__item-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gr-gold); margin-bottom: 14px; }
.gr-news__item h4 { font-size: 1rem; margin-bottom: 10px; color: var(--black); }
.gr-news__item p { font-size: 0.88rem; color: var(--gray); }
.gr-news__col { display: flex; flex-direction: column; gap: 22px; }

/* ============ Closing CTA ============ */
.gr-cta {
  position: relative;
  padding: 130px 0;
  text-align: center;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 0%, rgba(182,134,44,0.18), transparent 55%),
    linear-gradient(160deg, var(--gr-ink) 0%, var(--maroon-dark) 100%);
}
.gr-cta h2 { font-family: var(--gr-serif); font-size: clamp(2rem, 4vw, 3.2rem); max-width: 780px; margin: 0 auto 22px; }
.gr-cta p { max-width: 560px; margin: 0 auto 40px; color: rgba(255,255,255,0.75); font-size: 1.05rem; }
.gr-cta__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .gr-hero__image { right: 4%; width: 36%; }
  .gr-legacy__grid, .gr-outcomes__grid, .gr-leadership__grid { grid-template-columns: 1fr; }
  .gr-legacy__media, .gr-leadership__media { min-height: 320px; order: -1; }
  .gr-pillars__grid, .gr-schools__grid { grid-template-columns: repeat(2, 1fr); }
  .gr-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .gr-hero__stat:nth-child(2) { border-right: none; }
  .gr-voices__grid { grid-template-columns: 1fr 1fr; }
  .gr-news__grid { grid-template-columns: 1fr 1fr; }
  .gr-news__feature { grid-column: span 2; }
}

@media (max-width: 720px) {
  .gr-section { padding: 80px 0; }
  .gr-hero__image { display: none; }
  .gr-pillars__grid, .gr-schools__grid, .gr-voices__grid, .gr-news__grid, .gr-outcomes__stats { grid-template-columns: 1fr; }
  .gr-hero__stats { grid-template-columns: 1fr 1fr; }
  .gr-campus__grid { grid-template-columns: repeat(2, 1fr); }
  .gr-campus__card, .gr-campus__card--wide { grid-column: span 1; }
  .gr-news__feature { grid-column: span 1; }
}