/* ======================================================
   Style_3_Grammatik.css
   Grammatik-Übersichtsseite — LinguaBosna
   Version 4.0

   Design orientiert sich an:
   - Style_1_Startseite.css (Feature-Karten, Icons)
   - Style_2_Vokabeln.css (Karten-Layout)

   Farbpalette: NUR die 5 Projektfarben
   --primary, --accent, --secondary, --bg-light, --neutral

   Aufbau:
   1.  Hauptbereich & Seitentitel
   2.  Niveau-Auswahl (Tab-Buttons)
   3.  Karten-Layout (Flexbox)
   4.  Einzelne Karten (aktiv)
   5.  Coming-Soon Karten (Demnächst)
   6.  Hilfklassen
   7.  Responsive (900px / 768px / 480px)
   ====================================================== */


/* ── 1. Hauptbereich & Seitentitel ───────────────────── */

main {
  margin-top: 100px;                   /* gleich wie Vokabel-Seite */
  padding: 60px 5%;
  text-align: center;
}

main h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: var(--primary);
  text-transform: uppercase;
}

.subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1rem;
  color: var(--secondary);
  margin-bottom: 35px;
}


/* ── 2. Niveau-Auswahl (Tab-Buttons) ────────────────── */

.level-selector {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.level-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 6px;
  border: 2px solid var(--primary);
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.level-btn:hover {
  background: var(--primary);
  color: #fff;
}

.level-btn.active {
  background: var(--accent);
  color: var(--primary);
  border-color: var(--accent);
  font-weight: 700;
}


/* ── 3. Karten-Layout (Flexbox) ──────────────────────── */
/* Flexbox statt Grid, damit einzelne Karten in der       */
/* letzten Zeile zentriert statt linksbündig dargestellt   */
/* werden (z.B. bei A2 mit 7 Karten: 3 + 3 + 1 mittig)   */

.grammar-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}


/* ── 4. Einzelne Karten (aktiv) ──────────────────────── */

.grammar-card {
  /* Breite: 3 Spalten pro Zeile, abzüglich 2 Lücken à 25px */
  width: calc((100% - 50px) / 3);
  background: #fff;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--primary);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover für aktive Karten */
.grammar-card:not(.coming-soon):hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
}

/* FontAwesome-Icon — wie .feature i auf der Startseite */
.grammar-card > i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 15px;
  display: block;
}

/* Kartentitel */
.grammar-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--primary);
}

/* Kurzbeschreibung */
.grammar-card p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
}


/* ── 5. Coming-Soon Karten ───────────────────────────── */

.grammar-card.coming-soon {
  opacity: 0.55;
  cursor: default;
}

.soon-badge {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.soon-badge i {
  font-size: 0.65rem;
  color: #999;
  margin-bottom: 0;
  display: inline;
}


/* ── 6. Hilfklassen ──────────────────────────────────── */

.hidden {
  display: none;
}


/* ======================================================
   7. RESPONSIVE DESIGN
   ====================================================== */


/* ── Tablet (max. 900px) ─────────────────────────────── */
@media (max-width: 900px) {

  main {
    padding: 50px 5%;
  }

  main h1 {
    font-size: 2rem;
  }

  .level-btn {
    font-size: 0.85rem;
    padding: 8px 16px;
  }
}


/* ── Mobile (max. 768px) ─────────────────────────────── */
@media (max-width: 768px) {

  main {
    margin-top: 63px;
    padding: 50px 5%;
  }

  main h1 {
    font-size: 1.6rem;
    margin-bottom: 8px;
  }

  .subtitle {
    font-size: 1rem;
    margin-bottom: 25px;
  }

  /* Level-Buttons: 3er-Grid */
  .level-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 30px;
  }

  .level-btn {
    font-size: 0.8rem;
    padding: 9px 6px;
    text-align: center;
  }

  /* Karten: 2 Spalten, 1 Lücke à 16px */
  .grammar-grid {
    gap: 16px;
  }

  .grammar-card {
    width: calc((100% - 16px) / 2);
    padding: 24px 16px;
  }

  .grammar-card > i {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .grammar-card h3 {
    font-size: 0.95rem;
  }
}


/* ── Sehr kleine Screens (max. 480px) ────────────────── */
@media (max-width: 480px) {

  main {
    padding: 40px 4%;
  }

  main h1 {
    font-size: 1.4rem;
  }

  .level-btn {
    font-size: 0.75rem;
    padding: 8px 4px;
    border-width: 1.5px;
  }

  /* Karten: 1 Spalte */
  .grammar-card {
    width: 100%;
  }
}