/* ============================================
   HOME PAGE — home.css
   Royal Crystal Academy
   ============================================ */

/* ============================================
   HERO SLIDER
   ============================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: linear-gradient(135deg, #4A0A12 0%, #6B0F1A 60%, #8B1A28 100%) !important;
  display: block !important;
}

/* Ensure hero slider fills the section */
.hero-slider {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero-slider { width: 100%; height: 100%; }

.hero-slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--color-primary-dark);
  opacity: 0;
  transition: opacity 0.8s ease;
  display: flex;
  align-items: center;
}

/* Ensure active slide is always visible */
.hero-slide.active {
  opacity: 1 !important;
  z-index: 2;
}



.hero-slide-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    rgba(74,10,18,0.85) 0%,
    rgba(26,15,13,0.7) 50%,
    rgba(74,10,18,0.5) 100%
  );
}

.hero-slide-content {
  position: relative;
  z-index: 3;
  color: var(--color-white);
  max-width: 680px;
}

.hero-badge {
  display: inline-block;
  background: rgba(201,150,12,0.25);
  border: 1px solid rgba(201,150,12,0.5);
  color: var(--color-secondary-light);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.hero-title span { color: var(--color-secondary); }

.hero-text {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-actions .btn {
  width: auto !important;
  display: inline-flex !important;
}

/* Slider controls */
.hero-prev, .hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--color-white);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}

.hero-prev { left: 24px; }
.hero-next { right: 24px; }

.hero-prev:hover, .hero-next:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-dark);
  transform: translateY(-50%) scale(1.1);
}

.hero-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.hero-dot.active, .hero-dot:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  transform: scale(1.3);
}

/* ============================================
   STATS STRIP
   ============================================ */
.stats-strip {
  padding-block: var(--space-3xl);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.stat-item {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  border-right: 1px solid rgba(255,255,255,0.15);
}

.stat-item:last-child { border-right: none; }

.stat-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  display: block;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--fs-5xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  display: inline;
}

.stat-plus {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--color-secondary);
  display: inline;
}

.stat-label {
  display: block;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.7);
  margin-top: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.about-images {
  position: relative;
  height: 520px;
}

.about-img-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 85%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-img-main img,
.about-img-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.about-img-main:hover img { transform: scale(1.05); }

.about-img-accent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 50%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--color-white);
}

.about-img-accent:hover img { transform: scale(1.05); }

.about-years-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 20px 28px;
  text-align: center;
  z-index: 5;
  box-shadow: var(--shadow-md);
}

.years-num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
}

.years-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about-content p { color: var(--color-text-light); }

.about-features {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-feature {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--fs-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.about-feature strong { display: block; margin-bottom: 4px; color: var(--color-text); }
.about-feature p { font-size: var(--fs-sm); color: var(--color-text-light); margin: 0; }

.about-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* ============================================
   CLASS LEVELS
   ============================================ */
.levels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.level-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border-bottom: 4px solid transparent;
}

.level-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--color-primary);
}

.level-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--space-md);
}

.level-card h3 {
  font-size: var(--fs-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.level-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.level-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(107,15,26,0.08);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ============================================
   WHY CHOOSE US
   ============================================ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.why-content p { color: var(--color-text-light); }

.why-points {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.why-point {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.why-point-num {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: rgba(107,15,26,0.12);
  line-height: 1;
  flex-shrink: 0;
  min-width: 60px;
}

.why-point h4 { color: var(--color-primary); margin-bottom: 4px; }
.why-point p  { font-size: var(--fs-sm); color: var(--color-text-light); margin: 0; }

.why-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: visible;
}

.why-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.why-cta-card {
  position: absolute;
  bottom: -30px;
  left: -30px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-lg);
  max-width: 260px;
  border-left: 4px solid var(--color-secondary);
}

.why-cta-card h4 { color: var(--color-primary); margin-bottom: var(--space-sm); }
.why-cta-card p  { font-size: var(--fs-sm); color: var(--color-text-light); margin-bottom: var(--space-md); }

/* ============================================
   NEWS
   ============================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.news-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.news-card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-card-img img { transform: scale(1.08); }

.news-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-secondary);
  color: var(--color-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.news-card-body { padding: var(--space-xl) var(--space-lg); }

.news-card-date {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.news-card-body h3 {
  font-size: var(--fs-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.news-card-body p {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.news-read-more {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-secondary-dark);
}

.news-read-more:hover { color: var(--color-primary); }

/* ============================================
   EVENTS
   ============================================ */
.events-section { padding-block: var(--space-4xl); }

.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 800px;
  margin-inline: auto;
}

.event-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  backdrop-filter: blur(8px);
  transition: var(--transition);
}

.event-item:hover {
  background: rgba(255,255,255,0.12);
  transform: translateX(6px);
}

.event-date-badge {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: rgba(107,15,26,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-day {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
}

.event-month {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-info { flex: 1; }
.event-info h4 { color: var(--color-white); margin-bottom: 4px; }
.event-info p  { font-size: var(--fs-sm); color: rgba(255,255,255,0.65); margin: 0; }

.event-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-secondary);
  background: rgba(201,150,12,0.15);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ============================================
   GALLERY PREVIEW
   ============================================ */
.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: var(--space-md);
}

.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.gallery-item-lg {
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(107,15,26,0.8), transparent);
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  opacity: 0;
  transition: var(--transition);
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-overlay span {
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section { padding-block: var(--space-4xl); }

.cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.cta-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ============================================
   CONTACT STRIP
   ============================================ */
.contact-strip { padding-block: var(--space-3xl); }

.contact-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.contact-strip-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.contact-strip-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.contact-strip-item h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.contact-strip-item p,
.contact-strip-item a {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.contact-strip-item a:hover { color: var(--color-primary); }

/* ============================================
   HOME PAGE RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .levels-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid  { grid-template-columns: 1fr; }
  .why-grid    { grid-template-columns: 1fr; }
  .news-grid   { grid-template-columns: repeat(2, 1fr); }
  .contact-strip-grid { grid-template-columns: repeat(2, 1fr); }

  .about-images { height: 380px; }
  .why-image img { height: 300px; }
  .why-cta-card { position: static; margin-top: var(--space-xl); max-width: 100%; }
}

@media (max-width: 768px) {
  .hero-title { font-size: 2.2rem; }
  .hero-text  { font-size: var(--fs-base); }
  .hero-prev, .hero-next { width: 40px; height: 40px; font-size: 1.4rem; }
  .hero-prev { left: 12px; }
  .hero-next { right: 12px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
  .stat-item:last-child, .stat-item:nth-last-child(2) { border-bottom: none; }
  .stat-number { font-size: var(--fs-4xl); }

  .about-images { height: 320px; }
  .about-grid { gap: var(--space-2xl); }

  .levels-grid { grid-template-columns: 1fr 1fr; }

  .news-grid { grid-template-columns: 1fr; }

  .gallery-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .gallery-item-lg { grid-row: span 1; height: 200px; }
  .gallery-item { height: 150px; }

  .cta-content { flex-direction: column; text-align: center; }
  .cta-actions { justify-content: center; }

  .contact-strip-grid { grid-template-columns: 1fr 1fr; }

  .events-list { max-width: 100%; }
  .event-item { flex-wrap: wrap; gap: var(--space-md); }
}

@media (max-width: 480px) {
  .hero { min-height: 100svh; }
  .hero-title { font-size: 1.8rem; }
  .hero-badge { font-size: 0.65rem; }
  .hero-actions .btn { font-size: var(--fs-xs); padding: 10px 20px; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }

  .levels-grid { grid-template-columns: 1fr; }

  .contact-strip-grid { grid-template-columns: 1fr; }

  .gallery-preview-grid { grid-template-columns: 1fr; }
  .gallery-item, .gallery-item-lg { height: 180px; grid-row: span 1; }
}

/* ---- News card image consistent height ---- */
.news-card-img {
  height: 220px !important;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* ---- Hero background image (img tag approach for Netlify compatibility) ----
   object-fit:cover fills the full-height hero section edge-to-edge;
   object-position anchors the crop to the top so pupils' faces
   (upper part of the photo) stay visible rather than being cut off. */
.hero-bg-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

.hero-slide-overlay { z-index: 1; }
.hero-slide-content { z-index: 2; }