/* ============================================================
   AZIST — THE SCHOOL
   ============================================================ */

/* HERO ------------------------------------------------------ */
.school-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + clamp(64px, 8vw, 100px));
  padding-bottom: clamp(64px, 8vw, 100px);
  background-color: var(--color-black);
  position: relative;
  overflow: hidden;
}
.school-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Animated gradient — slow, fluid, continuous drift */
  background:
    radial-gradient(42% 55% at 22% 32%, rgba(65,100,254,0.26) 0%, transparent 60%),
    radial-gradient(40% 50% at 78% 60%, rgba(206,166,252,0.18) 0%, transparent 60%),
    radial-gradient(38% 48% at 60% 22%, rgba(125,196,255,0.16) 0%, transparent 60%),
    radial-gradient(50% 55% at 35% 80%, rgba(65,100,254,0.14) 0%, transparent 62%);
  background-size: 200% 200%;
  animation: school-bg-drift 18s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes school-bg-drift {
  0%   { background-position: 0% 50%,   100% 30%, 40% 80%,  60% 20%; }
  50%  { background-position: 100% 40%, 0% 70%,   90% 30%,  10% 90%; }
  100% { background-position: 30% 100%, 70% 0%,   10% 60%,  85% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .school-hero__bg { animation: none; }
}
.school-hero__ghost {
  top: -5%;
  left: -3%;
  font-size: clamp(100px, 16vw, 200px);
  color: rgba(255,255,255,0.03);
  -webkit-text-stroke: none;
}
.school-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.school-hero__deco {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(200px, 30vh, 340px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}
.school-hero__deco-img {
  height: 100%;
  width: auto;
  display: block;
  animation: school-deco-float 18s ease-in-out infinite alternate;
}
@keyframes school-deco-float {
  from { transform: translateY(-12px) rotate(-3deg); }
  to   { transform: translateY(12px)  rotate(3deg);  }
}
@media (max-width: 768px) {
  .school-hero__deco { display: none; }
}
.school-hero__eyebrow {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--color-sky-blue);
  margin-bottom: var(--space-5);
  display: block;
}
.school-hero__title {
  font-family: var(--font-frama);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}
.school-hero__body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.75;
  color: rgba(255,255,255,0.60);
  max-width: 760px;
  margin-bottom: var(--space-8);
}

/* APPROACH -------------------------------------------------- */
.school-approach {
  padding-block: clamp(80px, 10vw, 130px);
  background-color: var(--color-off-white);
  position: relative;
  overflow: hidden;
}
.school-approach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 96px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.school-approach__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.15;
  color: var(--color-near-black);
  margin-bottom: var(--space-6);
}
.school-approach__lead {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--color-blue);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-light-grey);
}
.school-approach__body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--color-grey);
}
.school-approach__visual {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}
.school-approach__visual-ghost {
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: 120px;
  line-height: 1;
  color: var(--color-light-grey);
  pointer-events: none;
  user-select: none;
}
.school-approach__quote {
  font-family: var(--font-eiko);
  font-weight: 100;
  font-size: clamp(24px, 3vw, 36px);   /* smaller → fits in 4 lines, not 5 */
  line-height: 1.32;
  color: var(--color-near-black);
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}
.school-approach__quote em {
  font-style: italic;
  color: var(--color-blue);
}
.school-approach__attribution {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-mid-grey);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.school-approach__attribution::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background-color: var(--color-mid-grey);
}

/* MÓDULOS --------------------------------------------------- */
.school-modules {
  padding-block: clamp(80px, 10vw, 130px);
  background-color: var(--color-white);
}
.school-modules__header {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.school-modules__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.1;
  color: var(--color-near-black);
  margin-bottom: var(--space-5);
}
.school-modules__sub {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-grey);
}
.school-modules__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  align-items: stretch;   /* equal-height cards, no staircase */
}
.school-module {
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  background-color: var(--color-white);
}
.school-module:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-blue);
}
.school-module__num {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(56px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-light-grey);
  display: block;
  margin-bottom: var(--space-4);
  transition: color var(--duration-base) var(--ease-out);
}
.school-module:hover .school-module__num { color: rgba(65,100,254,0.15); }
.school-module__title {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-near-black);
  margin-bottom: var(--space-4);
}
.school-module__focus {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-blue);
  margin-bottom: var(--space-4);
}
.school-module__body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-grey);
  text-wrap: pretty;
}

/* FORMATOS -------------------------------------------------- */
.school-formats {
  padding-block: clamp(80px, 10vw, 130px);
  background-color: var(--color-near-black);
  position: relative;
  overflow: hidden;
}
.school-formats__ghost {
  bottom: -15%;
  right: -4%;
  color: rgba(255,255,255,0.03);
  -webkit-text-stroke: none;
  font-size: clamp(100px, 14vw, 180px);
}
.school-formats__header {
  text-align: center;
  margin-bottom: clamp(56px, 7vw, 96px);
  position: relative;
  z-index: 1;
}
.school-formats__title {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.school-formats__sub {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.7;
  color: rgba(255,255,255,0.50);
  max-width: 520px;
  margin-inline: auto;
}
.school-formats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;   /* equal-height program cards */
  position: relative;
  z-index: 1;
}
.school-format {
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 48px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.school-format:hover {
  background-color: rgba(65,100,254,0.08);
  border-color: rgba(65,100,254,0.25);
  transform: translateY(-4px);
}
.school-format__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
}
.school-format__icon .brand-illu {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease-out);
}
.school-format:hover .school-format__icon .brand-illu { transform: translateY(-4px); }
.school-format__title {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  white-space: nowrap;   /* all 3 titles on one line ("Hands-on Workshops" is the longest) */
}
.school-format__body {
  font-family: var(--font-manrope);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(255,255,255,0.50);
  text-wrap: pretty;   /* no lone "way." / "needs." widows */
}

/* TAGLINE FINAL --------------------------------------------- */
.school-tagline {
  padding-block: clamp(60px, 7vw, 90px);
  background-color: var(--color-blue);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.school-tagline__text {
  font-family: var(--font-frama);
  font-weight: 200;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.3;
  color: var(--color-white);
  max-width: 720px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.school-tagline__text em {
  font-family: var(--font-eiko);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.75);
}

/* RESPONSIVE ------------------------------------------------ */
@media (max-width: 1024px) {
  .school-modules__grid { grid-template-columns: repeat(2, 1fr); }
  .school-approach__grid { grid-template-columns: 1fr; }
  .school-formats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .school-modules__grid { grid-template-columns: 1fr; }
}