/* Home-specific styles: hero with animated starfield + section layouts */

.hero {
  position: relative;
  /* Full-screen hero: fills the viewport on load, normal scroll afterwards */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #eaf2ff;
  /* Real hero photograph (Earth from orbit) as the backdrop */
  background: #05070f url('../../images/hero.jpg') center 42% / cover no-repeat;
}
/* particle canvas adds a subtle drifting layer over the photo */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .5; }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 420px at 76% 24%, rgba(56,225,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(4,7,16,.55) 0%, rgba(4,7,16,.30) 46%, rgba(4,7,16,.66) 100%);
  pointer-events: none;
}
/* a soft "planet limb" glow at the bottom */
.hero__glow {
  position: absolute;
  left: 50%; bottom: -55%;
  width: 160%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(47,123,255,.55), rgba(47,123,255,0) 55%);
  filter: blur(6px);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; text-align: center; padding-top: var(--header-h); }
.hero__eyebrow { color: var(--brand-cyan); }
/* Title keeps the original sans (Inter) look, a touch smaller now */
.hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  font-weight: 800;
  margin-bottom: .3rem;
  background: linear-gradient(180deg, #ffffff, #bcd4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(77,159,255,.35);
}
/* the divider dash is kept subordinate so UC3M / CSAT stay the focus.
   It needs its own colour: the h1 uses a clipped gradient with transparent
   fill, which a child span would otherwise inherit and render invisible. */
.hero h1 .dash {
  font-size: .5em;
  font-weight: 300;
  margin: 0 .14em;
  vertical-align: middle;
  color: #a9c0ea;
  -webkit-text-fill-color: #a9c0ea;
}
/* Subtitle uses Cinzel; real capitals are enlarged so they stand out from the
   small-caps (Cinzel renders lowercase as small caps) */
.hero__subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(.9rem, 1.9vw, 1.3rem);
  letter-spacing: .05em;
  color: #cfddf7;
  max-width: 48ch;
  margin: 0 auto 2rem;
}
.hero__subtitle .cap { font-size: 1.18em; }
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Both hero buttons share the same outlined style (no filled blue) */
.btn-hero {
  background: rgba(255, 255, 255, .04);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .6);
  font-weight: 600;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-hero:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  text-decoration: none;
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; color: #9fb8e6; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero__scroll .mouse {
  width: 24px; height: 38px; border: 2px solid #6f8fce; border-radius: 14px; position: relative;
}
.hero__scroll .mouse::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px;
  background: #9fb8e6; border-radius: 2px; transform: translateX(-50%);
  animation: scrollDot 1.6s var(--ease) infinite;
}
@keyframes scrollDot { 0% { opacity: 0; top: 6px; } 40% { opacity: 1; } 80% { opacity: 0; top: 18px; } 100% { opacity: 0; } }

/* About */
.about {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(600px 300px at 30% 20%, rgba(47,123,255,.25), transparent 60%),
    linear-gradient(140deg, var(--surface-2), var(--surface));
  display: grid; place-items: center;
  color: var(--text-muted);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.about__media .placeholder-note { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stats { display: flex; gap: 2rem; margin-top: 1.6rem; flex-wrap: wrap; }
.stat .num { font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; }
.stat .label { font-size: .85rem; color: var(--text-muted); }

/* Explore cards */
.explore-card { display: flex; flex-direction: column; }
.explore-card .icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(47,123,255,.18), rgba(56,225,255,.14));
  color: var(--accent);
}
.explore-card .icon svg { width: 26px; height: 26px; }
.explore-card h3 { margin-bottom: .4rem; }
.explore-card .more { margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.explore-card:hover .more { gap: .7rem; }

/* News */
.news-grid { margin-top: 2rem; }
.news-card .thumb {
  aspect-ratio: 16 / 9; border-radius: var(--radius-sm); margin-bottom: 1rem;
  background: linear-gradient(140deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted);
}
.news-card .date { font-size: .8rem; color: var(--accent); font-weight: 600; }

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
}