/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .announcements-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .tourism-teaser { flex-direction: column; padding: 48px; gap: 36px; }
  .tourism-image { width: 100%; height: 200px; }
  .hero h2 { font-size: 38px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-content { max-width: 720px; margin: 0 auto; text-align: center; }
  .hero-content .hero-buttons { justify-content: center; }
  .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-feature { max-width: 640px; margin: 0 auto; }
}

/* Navbar — 1024-1199px: the same bar, tightened.
   At full size the nine items need 1102px plus the 64px gutter, so below
   1166px "Monitorul Oficial Local" was cut off and "Contact" sat past the
   right edge, reachable only by scrolling the page sideways. Tightened they
   need ~1000px, which fits a 1024px screen with room to spare. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-inner { padding: 0 16px; }
  .nav-item > a { padding: 0 9px; font-size: 13px; }
  .nav-item > a::after { left: 9px; right: 9px; }
}

/* Navbar — up to 1023px: the hamburger menu. Below 1024px even the tightened
   bar does not fit, so the menu collapses here rather than at 768px. The
   header's own mobile compaction stays at 768px, below. */
@media (max-width: 1023px) {
  .hamburger { display: flex; }

  .navbar { display: none; }
  .navbar.open { display: block; }
  .nav-inner {
    flex-direction: column;
    padding: 0;
    height: auto;
  }
  .nav-item > a {
    padding: 16px 24px;
    height: auto;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-item > a::after { display: none; }
  .dropdown {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: var(--gray-50);
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    min-width: 100%;
    transition: none;
    /* Here the panel is inline in the accordion and the whole navbar scrolls,
       so the desktop viewport cap would trap it in a second scroll area. */
    max-height: none;
    overflow-y: visible;
  }
  .nav-item.open .dropdown { display: block; }

  /* The chevron is the only signal that a section is expanded — and the
     desktop :hover rule that rotates it never fires on touch. */
  .nav-item > a .nav-arrow {
    margin-left: auto;
    width: 14px;
    height: 14px;
    opacity: 0.6;
  }
  .nav-item.open > a .nav-arrow {
    transform: rotate(180deg);
    opacity: 0.9;
  }

  /* Nested submenu: show inline, indented, when parent dropdown is open */
  .dd-submenu > .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: var(--gray-100);
    padding: 0;
    min-width: 100%;
    transition: none;
  }
  .dd-submenu > .submenu a { padding-left: 44px; }
  .dropdown a .submenu-arrow { display: none; }
}

@media (max-width: 768px) {
  .search-box { display: none; }

  .header-top { padding: 0 16px; height: 60px; gap: 8px; }
  .logo-area { gap: 10px; min-width: 0; flex: 1; }
  .logo-crest { width: 38px; height: 38px; font-size: 13px; flex-shrink: 0; }
  .logo-text { min-width: 0; }
  .logo-text h1 {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .logo-text .subtitle { display: none; }
  .header-actions { gap: 6px; flex-shrink: 0; }
  .lang-toggle { font-size: 12px; }
  .lang-btn { padding: 6px 9px; font-size: 12px; }

  .alert-banner {
    padding: 10px 40px 10px 14px;
    font-size: 12.5px;
    gap: 8px;
    text-align: left;
    justify-content: flex-start;
    line-height: 1.35;
  }
  .alert-banner .alert-message { flex: 1; min-width: 0; }
  .alert-banner a { white-space: nowrap; }
  .alert-close { right: 8px; padding: 2px; }


  .hero { padding: 60px 20px 72px; }
  .hero h2 { font-size: 30px; }
  .hero p { font-size: 16px; }
  .hero-eyebrow { font-size: 11px; }
  .hero-feature-title { font-size: 18px; }
  .hero-feature-overlay { padding: 16px 20px 18px; }

  .section { padding: 48px 20px; }
  .section-header h2 { font-size: 26px; }
  .section-header { flex-direction: column; align-items: flex-start; }

  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service-card { padding: 24px 16px 20px; }

  .projects-grid { grid-template-columns: 1fr; }
  .announcements-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer { padding: 48px 20px 0; }

  .tourism-section { padding: 0 20px 48px; }
  .tourism-teaser { padding: 36px 28px; }
  .tourism-text h2 { font-size: 28px; }

  .inner-page { padding: 0 20px 48px; }
  .page-title { font-size: 26px; }

  /* Article-style page wrappers: collapse the desktop 32px gutter to 20px on mobile */
  .article-page { padding-left: 20px !important; padding-right: 20px !important; }

  /* Breadcrumbs — wrap only when the crumb chain genuinely doesn't fit */
  .breadcrumbs {
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 6px;
    font-size: 12px;
    padding: 16px 0 20px;
  }
  .breadcrumbs > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .breadcrumbs > span:last-child { color: var(--gray-600); font-weight: 500; }

  .hcl-item { flex-direction: column; align-items: flex-start; }
  .hcl-actions { width: 100%; }
  .hcl-btn { flex: 1; text-align: center; }
}

@media (max-width: 480px) {
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-btn { justify-content: center; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .service-icon { width: 44px; height: 44px; font-size: 20px; }
}