/* ssim-cover.css
   Estilos específicos para la portada "SSIM Ro Latam"
   Mantiene el tema glass/neon del archivo principal.
*/

:root{
  --cover-max-width: 1200px;
  --card-size: 140px;       /* tamaño del thumbnail dentro de cada card */
  --card-gap: 28px;
  --nav-height: 80px; /* ajusta si tu navbar tiene otra altura */
}

/* center layout within hero */
.cover-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 20px;
}

/* Ensure hero content is visible on entry even with many cards */
/* Make hero at least full viewport minus navbar, and start content below navbar */
.hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: flex-start; /* start so content doesn't get vertically centered when page grows */
  padding-top: calc(var(--nav-height) + 12px); /* space under navbar so title is visible */
  box-sizing: border-box;
}

/* Keep hero-content centered horizontally but not pushed off-screen vertically */
.hero .hero-content {
  width: 100%;
  max-width: var(--cover-max-width);
  margin: 0 auto;
  padding-bottom: 28px;
}

/* make the title focusable so JS can scroll-to it */
#cover-title { outline: none; }

/* Grid that places cards side-by-side and to the next row */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--card-gap);
  width: 100%;
  max-width: var(--cover-max-width);
  margin-top: 28px;
  justify-items: center;
  align-items: start;
}

/* Each card is an anchor so it's keyboard accessible */
.class-card {
  background: rgba(255, 255, 255, 0.04); /* fallback if --bg-glass not present */
  border: 1px solid rgba(255,255,255,0.06);
  width: 160px;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.class-card:focus,
.class-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,255,255,0.08);
  border-color: #00ffff; /* var(--primary) fallback */
}

/* inner wrapper keeps image centered and caption below */
.card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Images: square thumbnails centered and with subtle shadow */
.card-inner img {
  width: var(--card-size);
  height: var(--card-size);
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  padding: 6px;
}

/* caption */
.card-caption {
  font-family: 'Audiowide', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff; /* var(--text-primary) fallback */
  text-align: center;
  width: 100%;
}

/* small screens: arrange cards in 2 columns (more compact) */
@media (max-width: 520px) {
  :root { --card-size: 110px; --card-gap: 16px; }
  .class-grid { grid-template-columns: repeat(2, 1fr); }
  .class-card { width: 140px; padding: 10px; }
}

/* medium screens: 3 cols */
@media (min-width: 521px) and (max-width: 900px) {
  .class-grid { grid-template-columns: repeat(3, 1fr); }
}

/* large screens: more columns */
@media (min-width: 901px) {
  .class-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* optional small helper for accessibility focus */
.class-card:focus {
  box-shadow: 0 0 0 3px rgba(0,255,255,0.12);
}

/* Center the "open-calculator" button under the grid */
.cover-actions .neural-btn {
  display: inline-block;
}

/* selected visual state (when a card was chosen before navigation) */
.class-card.selected {
  box-shadow: 0 24px 50px rgba(0,255,255,0.14);
  transform: translateY(-10px) scale(1.02);
  border-color: #00ffff;
  outline: 2px solid rgba(0,255,255,0.06);
}