/* ================================================
   AYVUS — Responsive overrides
   Loaded after all inline page styles
   ================================================ */

/* Hub mobile grid — hidden by default, shown on mobile */
.hub-mobile-nav { display: none; }

/* Ensure lang-switch <a> links render like the home page */
.lang-switch a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ── Tablet  (768 – 1023 px) ──────────────────── */
@media (max-width: 1023px) {

  nav,
  nav.main-nav {
    padding: 0 40px;
  }

  .page-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }

  .about-wrap {
    padding: 0 40px;
  }

  /* Service pages: 2 cols on tablet */
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  /* About: 2-col project/service grid */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  /* Müştərilər: tablet */
  .clients-logos {
    grid-template-columns: repeat(5, 1fr);
    min-height: auto;
  }

  /* About page scroll */
  html,
  body {
    overflow: auto !important;
    height: auto !important;
  }

  /* Sidebar üstə keçir */
  .about-wrap {
    flex-direction: column;
    padding: 0 40px;
    height: auto !important;
    padding-bottom: calc(var(--ticker-h, 46px) + 24px);
  }

  .sidebar {
    width: 100%;
    position: static;
    top: auto;
    margin: 16px 0 0;
    padding: 10px 0;
    height: auto;
  }

  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding: 0 8px;
    scrollbar-width: none;
  }

  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-section-label { display: none; }

  .sidebar-item {
    white-space: nowrap;
    padding: 8px 12px;
    margin: 0;
    flex-shrink: 0;
  }

  .about-main {
    padding: 16px 0 calc(var(--ticker-h, 46px) + 24px);
    min-width: 0;
  }

  /* Service.php: 3 cols on tablet */
  .sub-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hub: smaller center + icons */
  .hub-center {
    width: 80px;
    height: 80px;
    font-size: 28px;
  }

  .hub-icon {
    width: 66px;
    height: 66px;
    font-size: 24px;
    border-radius: 18px;
  }
}

/* ── Mobile  (≤ 767 px) ───────────────────────── */
@media (max-width: 767px) {

  /* Nav */
  nav,
  nav.main-nav {
    padding: 0 16px;
  }

  .nav-right {
    gap: 8px;
  }

  /* Overlay menu */
  .overlay-menu {
    gap: 0;
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: calc(var(--nav-h, 64px) + 16px);
    padding-bottom: 24px;
  }

  .overlay-menu a {
    font-size: 26px;
    letter-spacing: -1px;
    padding: 8px 0;
  }

  /* ── Enable body scrolling on all pages ── */
  html,
  body {
    overflow: auto !important;
    height: auto !important;
  }

  /* ── Service + blog pages (page-wrap) ── */
  .page-wrap {
    padding: 20px 16px;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(var(--ticker-h, 46px) + 24px);
  }

  .sd-title {
    font-size: 20px;
    letter-spacing: -.6px;
  }

  .goal-text {
    font-size: 12px;
  }

  .main-split {
    min-height: auto;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .benefit-card {
    padding: 14px 12px;
  }

  /* ── Contact page ── */
  .content-area {
    flex-direction: column;
    align-items: stretch;
    gap: 16px !important;
  }

  .contact-info {
    width: 100%;
  }

  .map-wrap {
    height: 240px;
    flex-shrink: 0;
  }

  /* ── Blog page ── */
  .post-title {
    font-size: 17px;
    letter-spacing: -.3px;
  }

  .body-text {
    font-size: 12px;
  }

  /* ── About page ── */
  .about-wrap {
    flex-direction: column;
    padding: 0 16px;
    height: auto !important;
    padding-bottom: calc(var(--ticker-h, 46px) + 24px);
  }

  .sidebar {
    width: 100%;
    position: static;
    top: auto;
    margin: 16px 0 0;
    padding: 10px 0;
    height: auto;
  }

  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding: 0 8px;
    scrollbar-width: none;
  }

  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar-section-label {
    display: none;
  }

  .sidebar-item {
    white-space: nowrap;
    padding: 8px 12px;
    margin: 0;
    flex-shrink: 0;
    font-size: 12px;
  }

  .about-main {
    padding: 16px 0 calc(var(--ticker-h, 46px) + 24px);
    min-width: 0;
  }

  .sec-heading {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .grid-3 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Müştərilər: 3 sütun mobil */
  .clients-logos {
    grid-template-columns: repeat(3, 1fr);
    min-height: auto;
  }

  /* Vakansiya formu — inputlar alt alta */
  .vf-row {
    grid-template-columns: 1fr;
  }

  .vacancy-form {
    padding: 16px;
  }

  /* Hosting & Server icarəsi — kartlar alt alta */
  .plans-grid {
    flex-direction: column;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .plan-card {
    min-width: 0;
    width: 100%;
  }

  /* Qiymətlərimiz — 1 sütun, bütün kartlar görünsün, pagination gizlənsin */
  .price-grid {
    grid-template-columns: 1fr;
  }

  #qiymetler .price-grid > * {
    display: flex !important;
  }

  #qiymetler .pagination,
  #bloq .pagination,
  #deyerler .pagination {
    display: none !important;
  }

  #bloq .grid-3 > *,
  #deyerler .grid-3 > * {
    display: flex !important;
  }

  /* ── Service.php sub-grid ── */
  .sub-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sub-card {
    padding: 16px 14px;
  }

  .sub-card-name {
    font-size: 13px;
  }

  /* ── Index hub → mobile grid ── */
  .hub-center,
  #hubSvg,
  #gridCanvas {
    display: none !important;
  }

  .hub-icon {
    display: none !important;
  }

  .hero {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile service grid replacing hub */
  .hub-mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px;
    padding-bottom: 16px;
    width: 100%;
  }

  .hub-mobile-card {
    border: 1px solid var(--nav-border);
    border-radius: 14px;
    background: var(--card-bg, rgba(255,255,255,.03));
    backdrop-filter: blur(10px);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    transition: border-color .2s, transform .15s;
  }

  .hub-mobile-card:hover {
    border-color: rgba(99,102,241,.35);
    transform: translateY(-2px);
  }

  .hub-mobile-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
  }

  .hub-mobile-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--logo-color);
    line-height: 1.3;
    transition: color .4s;
  }
}

/* ── Very small  (≤ 480 px) ──────────────────── */
@media (max-width: 480px) {

  .sub-grid {
    grid-template-columns: 1fr;
  }

  .hub-mobile-nav {
    grid-template-columns: 1fr;
  }

  .overlay-menu a {
    font-size: 22px;
  }
}