/* Spanish Blueprint — shared responsive styles */

/* ── Navigation (all pages) ── */
@media (max-width: 768px) {
  nav {
    padding: 14px 16px !important;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-logo {
    font-size: 17px !important;
  }

  .nav-links {
    display: flex !important;
    gap: 14px !important;
    font-size: 12px !important;
  }

  .nav-group {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
    font-size: 11px;
  }

  .nav-group strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  nav {
    padding: 12px 14px !important;
  }

  .nav-links {
    flex: 1 1 100%;
    justify-content: center;
    gap: 18px !important;
  }
}

/* ── Home page ── */
@media (max-width: 768px) {
  .hero {
    padding: 48px 20px 40px !important;
  }

  .hero-sub {
    margin-bottom: 40px !important;
  }

  .entry-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px;
  }

  .entry-card {
    padding: 24px 20px !important;
  }

  .entry-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}

/* ── Verb library ── */
@media (max-width: 768px) {
  .page-header {
    padding: 36px 20px 28px !important;
  }

  .content {
    padding: 32px 20px 60px !important;
  }

  .group-grid {
    grid-template-columns: 1fr !important;
  }

  .verb-pill {
    font-size: 20px !important;
  }

  footer {
    padding: 20px !important;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* Missing tag variants used in verb library cards */
.tag-spell { background: rgba(255, 160, 80, 0.12); color: #FFA050; }
.tag-yins  { background: rgba(120, 200, 255, 0.12); color: #78C8FF; }

/* ── Verb group conjugation charts ── */
@media (max-width: 960px) {
  html,
  body {
    height: auto !important;
    min-height: 100vh;
  }

  .page-body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .verb-headers,
  .tense-header-row,
  .tense-rows {
    grid-template-columns: 1fr !important;
  }

  .verb-header {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .verb-header:last-child {
    border-bottom: none;
  }

  .tense-header-cell:nth-child(n + 2) {
    display: none;
  }

  .tense-header-cell:first-child {
    border-right: none !important;
    padding: 12px 16px !important;
    font-size: 10px !important;
  }

  .tense-cell {
    border-right: none !important;
    padding: 16px !important;
  }

  .tense-cell:nth-child(3n) {
    border-right: none !important;
  }

  .tense-cell:nth-last-child(-n + 3) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .tense-cell:last-child {
    border-bottom: none !important;
  }

  .conj-table {
    max-width: 280px !important;
    width: 100%;
  }

  .conj-table td {
    font-size: 15px !important;
    padding: 5px 0 !important;
  }

  .conj-table .pro {
    font-size: 11px !important;
  }

  .verb-name {
    font-size: 26px !important;
  }

  footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 14px 16px !important;
  }
}

@media (max-width: 480px) {
  .verb-forms {
    max-width: 100% !important;
  }

  .form-val {
    font-size: 11px !important;
  }
}

/* ── Group page sequential navigation ── */
.group-nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

.group-nav a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color .15s;
}

.group-nav a:hover {
  color: #e8e8e8;
}

.group-nav a.next {
  color: #2EEEA8;
}

.group-nav a.next:hover {
  color: #fff;
}

footer .group-nav {
  gap: 16px;
}

@media (max-width: 768px) {
  footer .group-nav {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ── Safe area (notched phones) ── */
@supports (padding: max(0px)) {
  nav {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
}

/* ── Tablet: home entry cards ── */
@media (min-width: 601px) and (max-width: 820px) {
  .entry-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px;
  }
}
@media (max-width: 768px) {
  #site-nav {
    padding: 8px 14px !important;
  }

  #site-nav .nav-links {
    gap: 14px !important;
    font-size: 12px !important;
  }

  #leg {
    top: 72px !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  #reset-btn {
    top: auto !important;
    bottom: 84px !important;
    right: 12px !important;
    left: auto !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  #fs-btn {
    display: none;
  }

  #hint {
    display: none !important;
  }

  #minimap {
    bottom: 12px !important;
    left: 12px !important;
    width: 120px !important;
    height: 75px !important;
  }

  #panel {
    width: 100% !important;
    right: -100% !important;
    padding: 52px 20px 32px !important;
  }

  #panel.open {
    right: 0 !important;
  }

  #panel-title {
    font-size: 20px !important;
  }

  #panel-sub {
    font-size: 14px !important;
  }

  #mobile-warn h2 {
    font-size: 20px;
  }

  #mobile-warn p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #leg span {
    font-size: 10px;
  }

  #leg .ld {
    width: 8px;
    height: 8px;
    margin-right: 3px;
  }
}