/* Grammar landing page -- tokens/navbar shared from lessons/lessons.css */

.gr-hero{
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(225,29,72,.14), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(59,130,246,.14), transparent 55%);
}
.gr-hero-inner{ max-width:900px; margin:0 auto; padding:3rem 2rem 2.5rem; text-align:center; }
.gr-logo{ margin-bottom:1.25rem; }
.gr-logo img{ max-width:220px; width:100%; border-radius:var(--radius-sm); }

.gr-hero h1{
  font-family:'Bangers', cursive; font-weight:400; letter-spacing:.5px;
  font-size:2.8rem; color:#fff; margin-bottom:.9rem;
}
.gr-hero .lead{ font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.gr-hero .sub{ font-size:.98rem; color:var(--muted); margin-bottom:1.75rem; }

.gr-legend{
  display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;
  font-size:.86rem; color:var(--muted); font-weight:600;
}
.legend-item{ display:inline-flex; align-items:center; gap:.5rem; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.piece-of-piss{ background:var(--brand-2); }
.dot.alright{ background:var(--warning); }
.dot.proper-hard{ background:var(--brand); }
.legend-count{ padding:.3rem .75rem; border:1px solid var(--border); border-radius:20px; color:var(--text); }

.gr-wrap{ max-width:1200px; margin:0 auto; padding:2.5rem 2rem 3.5rem; }

.grammar-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:1.5rem;
}

.grammar-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.grammar-card:hover{
  transform:translateY(-4px); border-color:var(--brand-3);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.difficulty{
  align-self:flex-start;
  font-size:.72rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:20px; margin-bottom:.9rem; white-space:nowrap;
}
.difficulty.piece-of-piss{ background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.35); }
.difficulty.alright{ background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.35); }
.difficulty.proper-hard{ background:rgba(225,29,72,.15); color:#ffb3c1; border:1px solid rgba(225,29,72,.35); }

.grammar-card h3{ font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:.5rem; }
.grammar-card p{ font-size:.9rem; color:var(--muted); margin-bottom:.9rem; flex-grow:1; }
.grammar-card .preview{
  font-size:.8rem; font-style:italic; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.65rem .85rem;
}

.gr-footer{ margin-top:3rem; text-align:center; color:var(--muted); font-size:.92rem; }
.gr-footer p{ margin-bottom:.5rem; }

@media (max-width:700px){
  .gr-hero h1{ font-size:2.1rem; }
  .gr-hero-inner{ padding:2.25rem 1.25rem 2rem; }
  .gr-wrap{ padding:2rem 1.25rem 2.5rem; }
}