/* ── styles.css ──────────────────────────────────────────────────────────────
   Layout and components for the "Choose Your Experience" hub (index.html).
   shared.css (loaded first) provides the design tokens, reset, and base
   body / link styles used across every page.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  --transition: 0.25s ease;
}

/* ── Hub layout ─────────────────────────────────────────────────────────────── */
/* A soft radial glow behind the hero keeps the page from feeling like flat,
   dead-centered content — it gives the top of the page a focal point so the
   grid below reads as a natural continuation instead of a floating block. */
.hub {
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4.5rem 1.5rem 4rem;
  gap: 1rem;
  background:
    radial-gradient(ellipse 900px 420px at 50% 0%, rgba(124,106,247,.16), transparent 70%);
}

.hub-heading {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
}

.accent { color: var(--accent-lt); }

.hub-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Back-to-home link shown in the navbar on secondary pages (e.g. more.html) */
.nav-back {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--transition);
}
.nav-back:hover { color: var(--text); }

/* ── Experience grid ────────────────────────────────────────────────────────── */
.experiences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 960px;
  justify-items: stretch;
  align-items: start;
}

/* ── Experience tile ────────────────────────────────────────────────────────── */
.experience-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition), background var(--transition);
}

.experience-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow), 0 0 0 1px rgba(124,106,247,.25);
  border-color: var(--accent);
  color: var(--text);
}

.tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(124,106,247,.14);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.3rem;
  transition: background var(--transition), transform var(--transition);
}

.experience-tile:hover .tile-icon {
  background: rgba(124,106,247,.25);
  transform: scale(1.06);
}

.tile-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.tile-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.tile-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.tag {
  background: rgba(124,106,247,.15);
  color: var(--accent-lt);
  border: 1px solid rgba(124,106,247,.3);
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 0.12rem 0.5rem;
}

/* GitHub-only projects (no playable demo) — smaller muted style */
.experience-tile.code-only {
  padding: 1.5rem 1.25rem;
  opacity: 0.8;
}
.experience-tile.code-only:hover { opacity: 1; }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .navbar { padding: 0.85rem 1.25rem; }
  .hub { padding: 3rem 1.25rem 3rem; }
  .experiences-grid { grid-template-columns: 1fr; }
  .experience-tile { padding: 2rem 1.25rem; }
}