/* CIRCLE — responsive fixes for phones and tablets.
   Every rule lives inside a max-width media query, so desktop rendering
   is untouched by design. Loaded after each page's own styles. */

/* ---------- Readability (all screens): lesson meta lines ----------
   The small type/duration labels under each lesson item ("Видео · 6 мин",
   "Четиво · ~5 мин", "23 слайда") were too faint — brand blue + bolder
   makes them legible. Applies to every course and language version. */
.lesson-title-sb { color: #0f172a !important; font-weight: 600 !important; }
.lesson-meta-sb { color: #2563eb !important; font-weight: 600 !important; font-size: 0.76rem !important; }
.lesson-meta-sb .lesson-type-icon { color: #2563eb; }
.lesson-item.active .lesson-title-sb { color: #3a2f00 !important; font-weight: 700 !important; }
.lesson-item.active .lesson-meta-sb { color: #1d4ed8 !important; }
.lesson-item.locked .lesson-title-sb,
.lesson-item.locked .lesson-meta-sb { color: #94a3b8 !important; font-weight: 500 !important; }
.lesson-card-meta { color: #2563eb !important; font-weight: 500 !important; }
.lesson-card.locked .lesson-card-meta { color: #94a3b8 !important; }

/* ---------- Tablet (≤1100px): unclutter the top navigation ---------- */
@media (max-width: 1100px) {
  .nav-links a { padding-left: 9px !important; padding-right: 9px !important; font-size: 0.78rem !important; }
  .interreg-logo-nav img { height: 62px !important; }
  nav, nav#navbar { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- Phone (≤860px): working hamburger menu ---------- */
@media (max-width: 860px) {
  /* The menu the hamburger opens: a clean white panel under the navbar. */
  .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ffffff;
    z-index: 99; /* below the sticky nav (100), so ☰ stays tappable to close */
    padding: 110px 22px 30px;
    overflow-y: auto;
    align-items: stretch;
    height: auto;
    gap: 0;
    box-shadow: none;
  }
  .nav-links.mobile-open li { height: auto !important; width: 100%; }
  .nav-links.mobile-open a {
    display: flex !important;
    height: auto !important;
    padding: 15px 6px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(0, 51, 153, 0.08) !important;
    border-left: none !important;
    width: 100%;
  }
  .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2) { opacity: 0; }
  .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hamburger span { transition: transform 0.2s, opacity 0.2s; }
}

/* ---------- Card grids that never collapsed on their own ---------- */
@media (max-width: 900px) {
  .news-grid, .upcoming-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .news-grid, .upcoming-grid { grid-template-columns: 1fr !important; max-width: 440px; margin-left: auto; margin-right: auto; }
}

/* ---------- Phone (≤760px): general comfort fixes ---------- */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  h1, h2, h3, h4, p, a, li, td { overflow-wrap: break-word; word-break: break-word; }

  /* media never wider than the screen */
  img, video { max-width: 100% !important; height: auto; }
  iframe { max-width: 100% !important; }
  iframe[src*="youtube"], iframe[src*="youtu.be"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }

  /* long tables scroll sideways instead of breaking the page */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* pages without a hamburger: nav links stay reachable via side-scroll */
  .nav-links:not(.mobile-open) { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-links:not(.mobile-open)::-webkit-scrollbar { display: none; }
  .nav-links:not(.mobile-open) a { padding-left: 10px !important; padding-right: 10px !important; font-size: 0.74rem !important; }

  /* course hero: badge and stats bar breathe on a narrow screen */
  .learners-badge { font-size: 0.78rem !important; padding: 7px 12px !important; }
  .course-stats { gap: 14px 20px !important; padding: 14px 16px !important; }
  .course-stat { padding-right: 18px !important; }

  /* forms and buttons: comfortable tap targets */
  .btn-submit, .btn-start, .lesson-card { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom-on-focus */
}

/* ---------- Small phone (≤480px) ---------- */
@media (max-width: 480px) {
  .interreg-logo-nav img { height: 52px !important; }
  nav, nav#navbar { height: 76px !important; }
  .nav-links.mobile-open { padding-top: 92px; }
  .course-hero { padding-left: 18px !important; padding-right: 18px !important; }
  .learners-badge { display: inline-flex; flex-wrap: wrap; }
}