/*
 * SBS Star Blue Sky — responsive.css
 * Mobile-first breakpoints:
 *   480px  → small phones
 *   640px  → large phones / small tablets
 *   768px  → tablets (portrait)
 *   1024px → tablets (landscape) / small laptops
 */

/* ============================================================
   BASE FIXES (all screens)
============================================================ */
html { -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
.sbs-wrap { overflow-x: hidden; }

/* ============================================================
   ≤ 1024px  —  Tablets landscape
============================================================ */
@media (max-width: 1024px) {
  .sbs-wrap { margin: 0; border-radius: 0; }

  /* Nav */
  .sbs-nav { padding: 0 1.5rem; gap: 10px; }
  .sbs-nav-menu li a { font-size: 12px; padding: 7px 9px; }
  .sbs-nav-cta { padding: 8px 14px; font-size: 12px; }

  /* Hero */
  .sbs-hero-left { padding: 56px 2rem 48px; }
  .sbs-hero h1 { font-size: 30px; }
  .sbs-hero-right { width: 230px; }
  .sbs-hcard { width: 210px; padding: 18px; }

  /* IT Section */
  .sbs-it-hero { padding: 50px 2rem; }
  .sbs-it-hero h2 { font-size: 24px; }

  /* Sections */
  .sbs-sec { padding: 52px 2rem; }
  .sbs-sec-title { font-size: 22px; }

  /* Services */
  .sbs-sgrid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Footer */
  .sbs-ft-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.5rem; }
  .sbs-footer { padding: 36px 2rem 20px; }
}

/* ============================================================
   ≤ 768px  —  Tablets portrait & large phones
============================================================ */
@media (max-width: 768px) {

  /* ── NAV ── */
  .sbs-nav {
    height: auto;
    min-height: 58px;
    padding: 10px 1.25rem;
    flex-wrap: wrap;
    gap: 0;
    position: sticky;
    top: 0;
  }
  .sbs-logo-link { flex: 1; }
  .sbs-logo-name { font-size: 20px; }
  .sbs-mobile-toggle { display: flex; align-items: center; justify-content: center; order: 2; }

  /* Hide desktop nav items */
  .sbs-nav-right { display: none; }
  .sbs-nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 12px;
    order: 3;
  }
  .sbs-nav-menu.open { display: flex; }
  .sbs-nav-menu li a {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    display: block;
  }

  /* Mobile lang + CTA inside open menu */
  .sbs-nav-menu-footer {
    display: flex;
    gap: 8px;
    padding: 10px 12px 4px;
    border-top: .5px solid rgba(255,255,255,.08);
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .sbs-nav-menu-footer .sbs-lang-switcher { display: flex; }
  .sbs-nav-menu-footer .sbs-nav-cta {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 9px 14px;
  }

  /* ── HERO ── */
  .sbs-hero { flex-direction: column; min-height: auto; }
  .sbs-hero-orb { width: 300px; height: 300px; right: -60px; top: -60px; }
  .sbs-hero-right { display: none; }
  .sbs-hero-left { padding: 44px 1.25rem 38px; }
  .sbs-hero h1 { font-size: 27px; letter-spacing: -1px; }
  .sbs-hero p { font-size: 13.5px; max-width: 100%; }
  .sbs-badge-txt { font-size: 10px; }
  .sbs-hero-btns { gap: 8px; }
  .sbs-btn-primary,
  .sbs-btn-outline { padding: 10px 18px; font-size: 12.5px; }
  .sbs-hero-since { margin-top: 22px; }

  /* ── RIBBON ── */
  .sbs-ribbon { grid-template-columns: repeat(2, 1fr); }
  .sbs-rib { padding: 16px 10px; }
  .sbs-rib-n { font-size: 20px; }

  /* ── SECTION COMMONS ── */
  .sbs-sec { padding: 44px 1.25rem; }
  .sbs-sec-title { font-size: 21px; }
  .sbs-sec-sub { font-size: 13px; }
  .sbs-sh { margin-bottom: 32px; }

  /* ── IT SECTION ── */
  .sbs-it-hero { padding: 44px 1.25rem; }
  .sbs-it-grid { grid-template-columns: 1fr; gap: 2rem; }
  .sbs-it-hero h2 { font-size: 22px; }
  .sbs-it-specs-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── SERVICES ── */
  .sbs-sgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sbs-scard { padding: 18px 16px; }
  .sbs-scard h3 { font-size: 13px; }

  /* ── WHY US ── */
  .sbs-wgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sbs-wcard { padding: 18px 14px; }

  /* ── ABOUT ── */
  .sbs-about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .sbs-mini-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sbs-mini-stat { padding: 12px 8px; }
  .sbs-mini-stat-n { font-size: 16px; }

  /* ── GLOBAL MARKETS ── */
  .sbs-regions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sbs-region { padding: 14px 10px; }
  .sbs-region-name { font-size: 13px; }
  .sbs-global-section { padding: 44px 1.25rem; }

  /* ── CONTACT ── */
  .sbs-cgrid { grid-template-columns: 1fr; gap: 2rem; }
  .sbs-crow { grid-template-columns: 1fr 1fr; }
  .sbs-cform { padding: 20px 16px; }
  .sbs-cinfo h3 { font-size: 18px; }

  /* ── CTA BANNER ── */
  .sbs-cta-banner { padding: 44px 1.25rem; }
  .sbs-cta-title { font-size: 22px; }
  .sbs-cta-btns { flex-direction: column; align-items: center; }
  .sbs-cta-btns .sbs-btn-primary,
  .sbs-cta-btns .sbs-btn-wa { width: 100%; max-width: 320px; justify-content: center; }

  /* ── PAGE HEADER ── */
  .sbs-pg-head { padding: 40px 1.25rem 34px; }
  .sbs-pg-head h1 { font-size: 24px; }
  .sbs-pg-head p { font-size: 13px; max-width: 100%; }

  /* ── FOOTER ── */
  .sbs-footer { padding: 36px 1.25rem 18px; }
  .sbs-ft-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin-bottom: 22px; }
  .sbs-ft-grid > div:first-child { grid-column: 1 / -1; }
  .sbs-fb-desc { font-size: 12px; }
  .sbs-fbot { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.rtl .sbs-fbot { align-items: flex-end; }
  .sbs-fbot-links { flex-wrap: wrap; gap: 10px; }

  /* ── ADMIN BAR ── */
  .admin-bar .sbs-nav { top: 46px; }
}

/* ============================================================
   ≤ 640px  —  Large phones
============================================================ */
@media (max-width: 640px) {

  /* Nav */
  .sbs-logo-name { font-size: 18px; }
  .sbs-logo-sub { display: none; }

  /* Hero */
  .sbs-hero-left { padding: 36px 1rem 32px; }
  .sbs-hero h1 { font-size: 24px; letter-spacing: -.8px; }
  .sbs-hero-badge { padding: 5px 12px; }
  .sbs-hero-btns { flex-direction: column; }
  .sbs-btn-primary,
  .sbs-btn-outline { width: 100%; justify-content: center; }

  /* Ribbon */
  .sbs-rib-n { font-size: 18px; }
  .sbs-rib-l { font-size: 9px; }

  /* Sections */
  .sbs-sec { padding: 36px 1rem; }
  .sbs-sec-title { font-size: 20px; }
  .sbs-sh { margin-bottom: 26px; }

  /* IT */
  .sbs-it-hero { padding: 36px 1rem; }
  .sbs-it-hero h2 { font-size: 20px; }
  .sbs-it-since { flex-direction: column; text-align: center; padding: 12px; }

  /* Services → 1 column */
  .sbs-sgrid { grid-template-columns: 1fr; }
  .sbs-scard { padding: 16px 14px; }

  /* Why us */
  .sbs-wgrid { grid-template-columns: 1fr; }
  .sbs-wcard { padding: 16px 14px; text-align: left; display: flex; align-items: flex-start; gap: 14px; }
  body.rtl .sbs-wcard { text-align: right; flex-direction: row-reverse; }
  .sbs-wcard-icon { margin: 0; flex-shrink: 0; }
  .sbs-wcard h4 { margin-bottom: 4px; text-align: left; }
  body.rtl .sbs-wcard h4 { text-align: right; }

  /* About */
  .sbs-tl-box { padding: 18px; }
  .sbs-mini-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sbs-mini-stat-n { font-size: 14px; }
  .sbs-atxt h2 { font-size: 20px; }

  /* Global */
  .sbs-regions { grid-template-columns: 1fr 1fr; }
  .sbs-global-section { padding: 36px 1rem; }

  /* Contact */
  .sbs-crow { grid-template-columns: 1fr; }
  .sbs-cform { padding: 16px 14px; }
  .sbs-cgrid { gap: 1.5rem; }

  /* CTA */
  .sbs-cta-banner { padding: 36px 1rem; }
  .sbs-cta-title { font-size: 20px; }

  /* Page header */
  .sbs-pg-head { padding: 34px 1rem 28px; }
  .sbs-pg-head h1 { font-size: 22px; }

  /* Footer */
  .sbs-ft-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .sbs-ft-grid > div:first-child { grid-column: auto; }
  .sbs-fcol-t { margin-top: 4px; }
  .sbs-fbot-links { display: none; }

  /* IT specs 2 col stays */
  .sbs-it-specs-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ≤ 480px  —  Small phones
============================================================ */
@media (max-width: 480px) {

  /* Nav */
  .sbs-nav { padding: 10px 1rem; }
  .sbs-logo-name { font-size: 17px; }

  /* Hero */
  .sbs-hero-left { padding: 30px .9rem 28px; }
  .sbs-hero h1 { font-size: 21px; letter-spacing: -.5px; }
  .sbs-hero p { font-size: 13px; }
  .sbs-hero-badge { padding: 4px 10px; }
  .sbs-badge-txt { font-size: 9.5px; letter-spacing: 0; }
  .sbs-hero-since { gap: 10px; }
  .sbs-hs-txt { font-size: 10px; }

  /* Ribbon → 2x2 */
  .sbs-ribbon { grid-template-columns: repeat(2, 1fr); }
  .sbs-rib { padding: 14px 8px; }
  .sbs-rib-n { font-size: 17px; }

  /* Sections */
  .sbs-sec { padding: 30px .9rem; }
  .sbs-sec-title { font-size: 18px; }
  .sbs-sec-sub { font-size: 12.5px; }
  .sbs-pill { font-size: 9px; padding: 4px 11px; }

  /* IT */
  .sbs-it-hero { padding: 30px .9rem; }
  .sbs-it-hero h2 { font-size: 19px; }
  .sbs-it-feat { font-size: 12px; }
  .sbs-it-specs-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sbs-it-spec { padding: 14px 10px; }
  .sbs-it-spec-n { font-size: 18px; }
  .sbs-it-spec-icon { font-size: 22px; }

  /* About timeline compact */
  .sbs-tl-box { padding: 14px; }
  .sbs-tl-txt { font-size: 11.5px; }
  .sbs-mini-stats { grid-template-columns: repeat(3, 1fr); }
  .sbs-atxt h2 { font-size: 18px; }
  .sbs-chk { font-size: 12px; }

  /* Regions → 2 col */
  .sbs-regions { grid-template-columns: 1fr 1fr; }
  .sbs-region { padding: 12px 8px; }
  .sbs-region-name { font-size: 12px; }

  /* Contact */
  .sbs-cinfo h3 { font-size: 17px; }
  .sbs-ci-v { font-size: 12px; }
  .sbs-csub-btn { font-size: 12.5px; }

  /* CTA */
  .sbs-cta-title { font-size: 18px; }
  .sbs-cta-sub { font-size: 13px; }

  /* Page header */
  .sbs-pg-head { padding: 28px .9rem 24px; }
  .sbs-pg-head h1 { font-size: 19px; }
  .sbs-pg-head p { font-size: 12.5px; }

  /* Footer */
  .sbs-footer { padding: 28px .9rem 16px; }
  .sbs-fb-name { font-size: 16px; }
  .sbs-fb-desc { font-size: 11.5px; }
  .sbs-flink, .sbs-flink a { font-size: 11.5px; }
  .sbs-fcopy, .sbs-fcopy a { font-size: 10.5px; }

  /* WA float — smaller on tiny screens */
  .sbs-wa-float { width: 46px; height: 46px; bottom: 18px; right: 18px; }
  body.rtl .sbs-wa-float { right: auto; left: 18px; }
  .sbs-wa-float i { font-size: 20px; }
}

/* ============================================================
   RTL responsive fixes
============================================================ */
@media (max-width: 768px) {
  body.rtl .sbs-nav-menu li a { text-align: right; }
  body.rtl .sbs-hero-btns { flex-direction: column; }
  body.rtl .sbs-wcard { text-align: right; }
  body.rtl .sbs-ft-grid { direction: rtl; }
}

@media (max-width: 640px) {
  body.rtl .sbs-wcard { flex-direction: row-reverse; }
  body.rtl .sbs-it-since { text-align: right; }
}