/* ==========================================================================
   materias.css — Inside TuP
   Styles for materias.html.
   Imports shared styles from global.css (fonts, variables, reset, header/nav, footer).
   ========================================================================== */

@import url("./global.css");

/* ==========================================================================
   1. VIEW TRANSITIONS
   Global cross-fade between pages + per-card morphing.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

/* Próximamente */

/* Prevent white flash — tell browser the page is dark */
:root {
  color-scheme: dark;
}

/* ==========================================================================
   2. HEADER & NAV styles are in global.css
   ========================================================================== */

/* ==========================================================================
   3. MATERIAS SECTION
   ========================================================================== */

.section.materias {
  padding-block: var(--space-12);
}

.section.materias > div {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Page header */
.materias-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.materias-header > p {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.materias-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* ==========================================================================
   4. CUATRIMESTRE BLOCK
   ========================================================================== */

.materias-aviso {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 58ch;
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-border);
}

.cuatri-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cuatri-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 0.5px solid var(--color-border);
  padding-bottom: var(--space-3);
}

/* ==========================================================================
   5. CARDS GRID
   ========================================================================== */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}

/* Card — each materia */
.materia-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 4; /* fixed proportions — all cards same size */
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--color-border);
  background-color: #16201a; /* 1° cuatri — green tint */
  cursor: pointer;
  transition:
    border-color var(--t-fast),
    transform var(--t-fast);
  text-decoration: none;
}

.materia-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
}

/* Top block: logo + name */
.card-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-logo {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.card-name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Icon — centered */
.card-icon {
  font-size: 2rem;
  color: var(--color-accent);
  /* Material Symbols rendering */
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 32;
}

/* Footer label */
.card-footer {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (width < 359px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .card-top {
    gap: var(--space-1); /* Menos espacio entre logo y nombre */
  }

  .card-name {
    line-height: 0.95;
  }
}

@media (359px <= width < 384px) {
  .materia-card {
    aspect-ratio: 4 / 5; /* Menos altura */
  }

  .card-top {
    gap: var(--space-1); /* Menos espacio entre logo y nombre */
  }

  .card-name {
    line-height: 1.1;
  }
}

@media (width <= 553px) {
  .card-logo {
    font-size: 0.4875rem;
  }

  .card-name {
    font-size: 0.8075rem;
  }

  .card-icon {
    font-size: 1.5rem;
  }

  .card-footer {
    font-size: 0.4425rem;
  }
}

@media (553px < width <= 722px) {
  .card-logo {
    font-size: 0.5875rem;
  }

  .card-name {
    font-size: 0.8375rem;
  }

  .card-icon {
    font-size: 1.8rem;
  }

  .card-footer {
    font-size: 0.4625rem;
  }
}

/* ==========================================================================
   6. PENDING MESSAGE
   ========================================================================== */

.pendiente-block {
  border-top: 0.5px solid var(--color-border);
  padding-top: var(--space-8);
}

.pendiente-texto {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 52ch;
}

/* Footer styles are in global.css */