:root {
  --brand-dark: #1a2332;
  --brand-yellow: #fecf07;
  --brand-blue: #2563eb;
  --brand-blue-dark: #1d4ed8;
  --brand-blue-light: #3b82f6;
}

.feature-cards {
  padding: 4rem 2rem;
  background: #f8f8f6;
}
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 2rem;

  /* limit total width and center */
  max-width: 1200px;
  margin: 0 auto;

  /* extra breathing room on sides */
  padding: 0 1rem;
}
.c-card-link-wrapper {
  overflow: hidden;
}
.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  cursor: pointer;
  transition: transform .3s ease;
}
.c-card:hover {
  transform: scale(1.02);
}
.c-card__media {
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  background-size: cover;
  background-position: center;
  position: relative;
}
.c-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 30%, transparent 60%);
}
.c-card__content {
  padding: 1.5rem;
  z-index: 1;
  margin-top: -4rem; /* pull up over the image */
}
.c-card__title {
  text-decoration: underline;
}
.c-card__description p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}
.c-card__cta p {
  margin: 0;
  font-size: 0.5rem;
  line-height: 1.4;
}
.a-btn {
  display: inline-flex;
  align-items: center;
  border: 2px solid #fff;
  padding: .5rem 1rem;
  text-decoration: none;
  font-weight: 600;
}
.a-btn__text {
  margin-right: .5rem;
}
.a-btn-outline:hover {
  background: #fff;
  color: #000;
}
.c-card__wrapper-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* fade‑in animation */
.pre-fade { opacity: 0; transform: translateY(20px); }
.fade-in {
  animation: fadeUp 0.6s forwards ease-out;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* =====================
PRINCIPAL’S COMMITMENT
======================= */
.principal-section {
  padding: 6rem 2rem;
  background: #ffffff;
  /* https://smoothshadows.com/#djEsMiw1LDAuMDgsMjQsMCwwLCMwMzA3MTIsI2YzZjRmNiwjZmZmZmZmLDE%3D */
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.08),
      0px 0px 4px rgba(3, 7, 18, 0.06),
      0px 0px 9px rgba(3, 7, 18, 0.05),
      0px 0px 15px rgba(3, 7, 18, 0.03),
      0px 0px 24px rgba(3, 7, 18, 0.02);
}

.principal-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Photo styling */
.principal-photo img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform .5s ease;
  display: block;

  /* https://smoothshadows.com/#djEsMSw1LDAuMTUsMjQsMTgsLTEyLCMwMzA3MTIsI2YzZjRmNiwjZmZmZmZmLDI%3D */
  box-shadow: -0px 1px 1px rgba(3, 7, 18, 0.03),
      -2px 3px 4px rgba(3, 7, 18, 0.06),
      -4px 6px 9px rgba(3, 7, 18, 0.09),
      -8px 12px 15px rgba(3, 7, 18, 0.12),
      -12px 18px 24px rgba(3, 7, 18, 0.15);

}




.principal-photo img:hover {
  transform: scale(1.05);
}

/* Text styling */
.principal-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  position: relative;
}
.principal-content h2::after {
  content: "";
  width: 4rem;
  height: 4px;
  background: #0056a6;
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  border-radius: 2px;
}

/* Update your blockquote styling */
.principal-content blockquote {
  position: relative;       /* enable absolutely‑positioned pseudo */
  margin: 0;
  padding: 2rem 1.5rem 1.5rem 3rem; /* extra left padding for the quote */
  font-style: italic;
  line-height: 1.6;
  color: #333;
  border-left: 4px solid var(--brand-blue);
  background: #f9f9f9;
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

/* Decorative open-quote */
.principal-content blockquote::before {
  content: "“";            /* fancy opening quote mark */
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-family:  'Plus Jakarta Sans', sans-serif;
  font-size: 4rem;         /* adjust size as you like */
  line-height: 1;
  color: rgba(0, 86, 166, 0.9); /* subtle brand‑color tint */
  z-index: 0;              /* behind your text */
}

/* Make sure your paragraph sits above the quote symbol */
.principal-content blockquote p {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* Footer stays above too */
.principal-content blockquote footer {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  font-weight: 600;
  text-align: right;
  color: #555;
}

/* Visible state remains the same */
.principal-section.visible blockquote {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .principal-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .principal-content h2::after {
    left: 50%;
    transform: translateX(-50%);
  }
}


@media (max-width: 500px) {
  .principal-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .principal-content h2 {
      font-size: 6vw;
  }
  .principal-content h2::after {
    left: 50%;
    transform: translateX(-50%);
  }
}


/* TYPING EFFECT FOR PRINCIPAL’S HEADING */
.principal-content h2 {
  /* Prepare for the typing mask */
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;

  /* Caret */
  border-right: 2px solid #0056a6;
  box-sizing: border-box;

  /* Start with zero width */
  width: 0;
}

/* When .visible is added, run the typing + blinking animations */
.principal-section.visible .principal-content h2 {
  animation:
    typing 2.5s steps(30, end) forwards,
    blink-caret 0.75s step-end infinite;
}

/* Grow the width from 0 → full */
@keyframes typing {
  from { width: 0ch; }
  to   { width: 22ch; }
}

/* Simple caret blink */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: #0056a6; }
}



/* ====================================
 === Admissions/Jobs Section Styles ===
 ======================================*/

.admission-section {
  position: relative;
  background: url('/static/media/home/plane-at-sunrise.jpg') center center / cover no-repeat;
  padding: 80px 20px 120px;
  text-align: center;
  color: #000;
  z-index: 1;
  overflow: hidden;
}

/* White overlay */
.admission-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* adjust opacity as needed */
  z-index: 0;
}

/* Make content appear above the overlay */
.admission-section > .container {
  position: relative;
  z-index: 1;
}

.admission-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.admission-card {
  background-color: transparent;
  border: 1px solid var(--brand-dark);
  border-radius: 0;
  padding: 2rem 1.5rem;
  position: relative;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border 0.3s ease;
  color: black;
  box-shadow: none;
  opacity: 1;
}

.admission-card:hover {
    background-color: white;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: scale(1.03); /* subtle pop-out */
}


.admission-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background-color: var(--brand-dark);
  color: white;
  font-size: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admission-card h3 {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.admission-card p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.admission-btn {
  display: inline-block;
  background-color: var(--brand-dark);
  color: white;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease, border-radius 0.8s ease;
}

.admission-btn:hover {
  background-color: #00368d;
  border-radius: 20rem;
}



/* =========================
   Cadet Section Styles
==========================*/





.cadet-section {
  position: relative;
  margin: 0 auto;
  padding: 80px 20px;               /* adjust vertical padding as desired */
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.7) 30%,
      rgba(0,0,0,0) 70%
    ),
    url('/static/media/home/cadet_section.jpg') center center / cover no-repeat;
    box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.08),
      0px 0px 4px rgba(3, 7, 18, 0.06),
      0px 0px 9px rgba(3, 7, 18, 0.05),
      0px 0px 15px rgba(3, 7, 18, 0.03),
      0px 0px 24px rgba(3, 7, 18, 0.02);
  overflow: hidden;
}

.cadet-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Reduced from 60px */
    align-items: center;
    min-height: 400px; /* Reduced overall height */
    cursor: default;
}

.cadet-content {
    padding-right: 15px; /* Reduced from 20px */
}

/* Animation States - Initial (hidden) state */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Special animation for accent line */
.accent-line {
    width: 50px; /* Reduced from 60px */
    height: 3px; /* Reduced from 4px */
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border-radius: 2px;
    margin-bottom: 18px; /* Reduced from 24px */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.accent-line.animate-visible {
    transform: scaleX(1);
}


.cadet-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 18px;
  line-height: 1.2;
  display: inline;
  background-image: linear-gradient(white, white);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.5s ease !important;

}


.cadet-title:hover {
  background-size: 100% 2px;
}



.cadet-description {
    font-size: 1rem;
    color: #A3A3A3;
    margin-bottom: 35px;
    font-weight: 400;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; /* Reduced from 32px */
}

.feature-card {
    padding: 22px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    cursor: normal;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px; /* Reduced from 4px */
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-3px); /* Reduced from -4px */
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15); /* Reduced shadow */
    border-color: var(--brand-blue);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    width: 40px; /* Reduced from 48px */
    height: 40px; /* Reduced from 48px */
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border-radius: 10px; /* Reduced from 12px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px; /* Reduced from 20px */
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
}

.feature-icon svg {
    width: 20px; /* Reduced from 24px */
    height: 20px; /* Reduced from 24px */
    color: white;
}

.feature-title {
    font-size: 1.1rem; /* Reduced from 1.25rem */
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 10px; /* Reduced from 12px */
}

.feature-description {
    font-size: 0.9rem; /* Reduced from 0.95rem */
    color: #64748b;
    line-height: 1.5;
}


/* Responsive Design */
@media (max-width: 1024px) {
    .cadet-section {
        margin: 30px 20px; /* Maintain card margins on tablet */
        padding: 40px 30px; /* Reduced padding */
    }

    .cadet-container {
        grid-template-columns: 1fr;
        gap: 30px; /* Reduced gap */
        min-height: auto;
    }

    .cadet-content {
        padding-right: 0;
    }

    .cadet-title {
        font-size: 1.9rem; /* Reduced from 2.25rem */
    }

}

@media (max-width: 768px) {
    .cadet-section {
        margin: 20px 15px; /* Maintain card margins on mobile */
        padding: 30px 20px; /* Further reduced padding */
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 18px; /* Reduced gap */
    }

    .cadet-title {
        font-size: 1.7rem; /* Reduced from 2rem */
    }

    .feature-card {
        padding: 18px; /* Reduced padding on mobile */
    }

    .cadet-container {
        gap: 25px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .accent-line {
        transition: none;
        opacity: 1;
        transform: none;
    }
}


/* ============================
   Cadets Life (Dark Theme)
=============================== */
.cadets-life-section {
  background: #0f172a;
  color: #fff;
  padding: 80px 20px;
}

.cadets-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  color: #f8fafc;
  position: relative;
}
.cadets-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--brand-blue-light);
  margin: 12px auto 0;
  border-radius: 2px;
}

.cadets-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cadets-card {
  background: #1e293b;
  border: 1px solid #334155;
  padding: 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.cadets-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.cadets-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 0.75rem;
}

.cadets-card p {
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.6;
  flex-grow: 1;
}

.cadets-btn {
  display: inline-block;
  margin-top: 1rem;
  background-color: var(--brand-blue-light);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, border-radius 0.3s ease;
}
.cadets-btn:hover {
  background-color: var(--brand-blue);
  border-radius: 2rem;
}

.cadets-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .cadets-title {
    font-size: 2rem;
  }
}

.cadets-card.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When JS adds .animate-visible: fade & slide up */
.cadets-card.animate-on-scroll.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   Admissions Open Banner
================================ */
/* ======= Admissions Banner Section ======= */

body {
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.admissions-banner {
  position: relative;
  background: url('/static/media/home_hero/hero1.jpg') center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  padding: 2rem 1rem;
  margin: 2rem 0;
}

.admissions-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 136, 248, 0.4);
  z-index: 0;
}

.admissions-banner .banner-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
  gap: 1rem; /* Added for spacing */
}

.banner-text {
  flex: 1 1 360px;
  color: #fff;
}

.banner-text h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  color: #FF7F50; /* dark mustard yellow */
}

.banner-text .subheading {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.banner-text p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.banner-text a.banner-btn {
  display: inline-block;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, border-radius 0.3s ease;
}

.banner-text a.banner-btn:hover {
  border-radius: 20px;
}

.banner-timer {
  flex: 0 1 300px;
  margin-top: 1rem;
}

/* ======= Countdown Timer ======= */

.time-count {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem; /* Space between timer parts */
  flex-wrap: nowrap; /* Allow wrap on smaller screens */
}

.time-entry {
  background: transparent;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border: 3px solid #ffffff;
  text-align: center;
  min-width: 4.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.time-entry span {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.time-entry::after {
  content: attr(data-label); /* Use data-label for labels */
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  text-transform: capitalize;
  color: #ffffff;
}

/* ======= Responsive Styles ======= */

@media (max-width: 768px) {
  .admissions-banner .banner-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .banner-text,
  .banner-timer {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .banner-timer {
    margin-top: 2rem;
  }

  .time-count {
    justify-content: center;
  }

  .time-entry {
    min-width: 4rem;
    padding: 0.5rem 0.75rem;
  }
}




/* ================================
   Announcements & Updates Section
================================= */
.updates-section {
  padding: 4rem 1rem;
  background: #f8f8f6;
}

.updates-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  position: relative;
}
.updates-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--brand-blue);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.updates-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.update-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.update-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02),
      0px 2px 3px rgba(3, 7, 18, 0.04),
      0px 5px 6px rgba(3, 7, 18, 0.06),
      0px 9px 11px rgba(3, 7, 18, 0.08),
      0px 14px 17px rgba(3, 7, 18, 0.10),
      0px 20px 24px rgba(3, 7, 18, 0.12);
}

.update-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.update-card:hover .thumb-overlay {
  opacity: 1;
}

.update-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.update-content h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  color: #0f172a;
}

.update-content p {
  flex-grow: 1;
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 1rem;
}

.update-link {
  align-self: flex-start;
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}
.update-link:hover {
  color: var(--brand-blue-dark);
}

.read-more-btn {
  display: inline-block;
  margin-top: auto;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background 0.4s ease, transform 0.3s ease;
}

.read-more-btn:hover {
  background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue));
  transform: translateY(-2px);
}

.updates-more {
  text-align: center;
  margin-top: 2rem;
}
.updates-more .btn {
  background: var(--brand-dark);
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}
.updates-more .btn:hover {
  background: var(--brand-blue-dark);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .update-content p {
    font-size: 0.9rem;
  }
}








/* =========================================
   OPTIMIZED FEATURE CARDS STYLES
========================================= */

:root {
  --brand-dark: #1a2332;
  --brand-yellow: #fecf07;
  --brand-blue: #2563eb;
  --brand-blue-dark: #1d4ed8;
  --brand-blue-light: #3b82f6;
}

.feature-cards {
  padding: 4rem 2rem;
  background: #f8f8f6;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.c-card-link-wrapper {
  overflow: hidden;
}

/* OPTIMIZED: Use will-change and contain for better performance */
.c-card {
  position: relative;
  overflow: hidden;
  height: 400px;
  background: transparent;
  contain: layout style paint; /* Isolate repaints */
  will-change: transform; /* Hint to browser for optimization */
  transition: transform 0.3s ease;
}

.c-card:hover {
  transform: scale(1.02);
}

/* OPTIMIZED: Use transform instead of background-position changes */
.c-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transition: transform 0.5s ease;
}

.c-card:hover .c-card__media {
  transform: scale(1.1);
}

/* Single overlay gradient - simplified */
.c-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 20%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.c-card:hover .c-card__media::before {
  opacity: 1;
}

/* OPTIMIZED: Content area with cleaner transitions */
.c-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 50%);
  z-index: 1;
  overflow: hidden;
  will-change: height;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dynamic height based on card count - moved from inline styles */
/* Default: 2 or fewer cards */
.c-card__content {
  height: 20%;
}

.c-card:hover .c-card__content {
  height: 30%;
}

/* 3 cards */
.cards-container[data-count="3"] .c-card__content {
  height: 22%;
}

.cards-container[data-count="3"] .c-card:hover .c-card__content {
  height: 40%;
}

/* 4+ cards */
.cards-container[data-count="4"] .c-card__content,
.cards-container[data-count="5"] .c-card__content,
.cards-container[data-count="6"] .c-card__content {
  height: 25%;
}

.cards-container[data-count="4"] .c-card:hover .c-card__content,
.cards-container[data-count="5"] .c-card:hover .c-card__content,
.cards-container[data-count="6"] .c-card:hover .c-card__content {
  height: 60%;
}

/* Title styling */
.c-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: #fff;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dynamic font sizes based on card count */
.cards-container[data-count="3"] .c-card__title {
  font-size: 1.2rem;
}

.cards-container[data-count="4"] .c-card__title,
.cards-container[data-count="5"] .c-card__title,
.cards-container[data-count="6"] .c-card__title {
  font-size: 1rem;
}

.c-card:hover .c-card__title {
  transform: translateY(-0.5em);
}

/* Description styling */
.c-card__description {
  margin-top: 0.5rem;
  color: #e0e0e0;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(20px);
}

.c-card__description p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Dynamic description font sizes */
.cards-container[data-count="3"] .c-card__description p {
  font-size: 0.9rem;
}

.cards-container[data-count="4"] .c-card__description p,
.cards-container[data-count="5"] .c-card__description p,
.cards-container[data-count="6"] .c-card__description p {
  font-size: 0.85rem;
  line-height: 1.3;
}

.c-card:hover .c-card__description {
  opacity: 1;
  transform: translateY(0);
}

/* Optional wrapper link */
.c-card__wrapper-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
}

/* OPTIMIZED: Simpler fade-in animation */
.c-card.pre-fade {
  opacity: 0;
  transform: translateY(20px);
}

.c-card.fade-in {
  animation: fadeUp 0.6s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .c-card {
    height: 350px;
  }
}

/* CRITICAL: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .c-card,
  .c-card__media,
  .c-card__content,
  .c-card__title,
  .c-card__description {
    transition: none;
    animation: none;
  }

  .c-card.pre-fade {
    opacity: 1;
    transform: none;
  }
}