/* ===========================
   BREAKPOINT: 992px
   =========================== */

@media (max-width: 992px) {

  /* HERO */
  .hero-logo { width: 240px; height: 240px; }
  .hero h1 { font-size: 56px; }

  /* MISSION */
  .mission-inner {
    flex-direction: column;
  }
  .mission-left,
  .mission-right {
    width: 100%;
  }

  /* BROKERS */
  .brokers-inner {
    flex-direction: column;
  }
  .brokers-left,
  .brokers-right {
    width: 100%;
  }

  /* EA LAB */
  .ea-inner {
    flex-direction: column;
  }
  .ea-left,
  .ea-right {
    width: 100%;
  }

  /* ACADEMY */
  .academy-inner {
    flex-direction: column;
  }
  .academy-left,
  .academy-right {
    width: 100%;
  }

  /* MARKET INTELLIGENCE */
  .mi-inner {
    flex-direction: column;
  }
  .mi-left,
  .mi-right {
    width: 100%;
  }

  /* CIRCLE */
  .circle-inner {
    flex-direction: column;
  }
  .circle-left,
  .circle-right {
    width: 100%;
  }

  /* ACCESS */
  .access-inner {
    flex-direction: column;
  }
  .access-left,
  .access-right {
    width: 100%;
  }

  /* MT4 */
  .mt4-inner {
    flex-direction: column;
  }
  .mt4-left,
  .mt4-right {
    width: 100%;
  }
  .mt4-webtrader-box {
    height: 360px;
  }

  /* SECURITY */
  .security-inner {
    flex-direction: column;
  }
  .security-left,
  .security-right {
    width: 100%;
  }

  /* PAYMENTS */
  .payments-inner {
    flex-direction: column;
  }
  .payments-left,
  .payments-right {
    width: 100%;
  }

  /* NEWS */
  .news-grid {
    grid-template-columns: 1fr;
  }

  /* CONTACT */
  .form-row {
    flex-direction: column;
  }

  /* FOOTER */
  .footer-inner {
    flex-direction: column;
  }
  .footer-col {
    width: 100%;
  }

  /* CIRCLE BANNER */
  .circle-banner-title {
    font-size: 48px;
  }
  .circle-banner-tagline {
    font-size: 26px;
  }
  .circle-banner-text {
    font-size: 18px;
  }
}

/* ===========================
   BREAKPOINT: 768px
   =========================== */

@media (max-width: 768px) {

  /* HERO */
  .hero-logo { width: 180px; height: 180px; }
  .hero h1 { font-size: 42px; }
}

/* ===========================
   BREAKPOINT: 480px
   =========================== */

@media (max-width: 480px) {

  /* HERO */
  .hero-logo { width: 150px; height: 150px; }
  .hero h1 { font-size: 34px; }
}

/* CTA FIX */
.article-cta .cta-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.article-cta {
    padding: 60px 0;
}

.article-cta .cta-title {
    margin-bottom: 10px;
}

.article-cta .cta-text {
    max-width: 700px;
    margin-bottom: 25px;
}

.recommended-reading {
    margin-top: 40px;
}

.recommended-reading ul {
    margin-top: 10px;
    padding-left: 20px;
}

.recommended-reading li {
    margin-bottom: 6px;
}





/* FIX HEADER WITHOUT CHANGING HTML */

/* 1100px – lekkie zwężenie */
@media (max-width: 1100px) {
    header nav ul {
        gap: 16px;
    }
    header nav ul a {
        font-size: 15px;
    }
}

/* 950px – mocniejsze zwężenie */
@media (max-width: 950px) {
    header nav ul {
        gap: 12px;
    }
    header nav ul a {
        font-size: 14px;
    }
}

/* 850px – kompaktowy tryb, ale menu NIE znika */
@media (max-width: 850px) {
    header nav ul {
        gap: 8px;
    }
    header nav ul a {
        font-size: 13px;
    }
    .auth {
        gap: 10px;
    }
    .auth .btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* DWULINIOWE MENU PRZY MNIEJSZYCH SZEROKOŚCIACH */
@media (max-width: 1100px) {
    header nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 24px; /* pionowy i poziomy odstęp */
    }

    header nav ul li {
        flex: 0 1 auto;
    }

    header nav ul a {
        font-size: 15px;
    }
}

/* Jeszcze bardziej kompaktowe przy 900px */
@media (max-width: 900px) {
    header nav ul {
        gap: 12px 18px;
    }

    header nav ul a {
        font-size: 14px;
    }
}

