/* ==============================================
   BEXFORD – HERO SECTION
   responsive.css | Breakpoint overrides
   ============================================== */

/* ── LARGE DESKTOP (≥ 1400px) ─────────────────── */
@media (min-width: 1400px) {
  :root {
    --font-size-hero: 3.4rem;
  }

  .hero__container {
    max-width: 1380px;
    padding: calc(var(--space-20) + 150px) var(--space-12) var(--space-20);
  }

  .hero__circle-ring {
    width: 530px;
    height: 530px;
  }

  .hero__circle-wrap {
    width: 460px;
    height: 460px;
  }

  .hero__info-card--top-right {
    top: 52px;
    right: -22px;
  }

  .hero__info-card--bottom-left {
    bottom: 72px;
    left: -22px;
  }

  .hero__info-card--top-left {
    top: 72px;
    left: -22px;
  }

  .hero__info-card--bottom-right {
    bottom: 52px;
    right: -22px;
  }
}

/* ── TABLET LANDSCAPE (≤ 1024px) ──────────────── */
@media (max-width: 1024px) {
  :root {
    --font-size-hero: clamp(1.8rem, 3.8vw, 2.6rem);
  }

  .nav {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .nav__link {
    padding: var(--space-2) var(--space-2);
    font-size: .78rem;
  }

  .hero__container {
    padding: calc(var(--space-16) + 140px) var(--space-6) var(--space-12);
    gap: var(--space-6);
  }

  .hero__circle-ring {
    width: 390px;
    height: 390px;
  }

  .hero__circle-wrap {
    width: 340px;
    height: 340px;
  }

  .hero__info-card--top-right {
    top: 28px;
    right: -5px;
  }

  .hero__info-card--bottom-left {
    bottom: 40px;
    left: -5px;
  }

  .hero__info-card--top-left {
    top: 42px;
    left: -5px;
  }

  .hero__info-card--bottom-right {
    bottom: 28px;
    right: -5px;
  }
}

/* ── TABLET PORTRAIT (≤ 999px) ────────────────── */
@media (max-width: 999px) {

  /* Show hamburger, hide desktop links */
  .nav__hamburger {
    display: flex;
  }

  .nav__links--desktop {
    display: none !important;
  }

  .nav {
    gap: var(--space-3);
    position: relative;
  }

  /* Hero: single column */
  .hero__container {
    grid-template-columns: 1fr;
    padding: calc(var(--space-12) + 140px) var(--space-5) var(--space-10);
    gap: var(--space-10);
  }

  /* Right column hidden on mobile/tablet */
  .hero__right {
    display: none;
  }

  /* CTA buttons: full width, stacked, 16px gap */
  .hero__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
  }

  .hero__cta-btn {
    width: 100%;
    border-radius: 14px;
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-md);
  }

  /* Eyebrow badge: keep dot and text in one line and fit on small mobile */
  .hero__eyebrow-badge {
    flex-wrap: nowrap !important;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2) !important;
  }

  .hero__eyebrow-text {
    white-space: nowrap !important;
    font-size: 8.5px !important; /* slightly smaller to fit 320px screens perfectly */
    letter-spacing: .08em !important;
  }

  /* Blobs */
  .hero__blob--left {
    width: 220px;
    height: 220px;
    left: -80px;
  }

  .hero__blob--right {
    width: 280px;
    height: 280px;
  }
}

/* ── MOBILE LARGE (≤ 576px) ───────────────────── */
@media (max-width: 576px) {
  :root {
    --font-size-hero: clamp(1.7rem, 7.5vw, 2.2rem);
  }

  .nav {
    padding: var(--space-2) var(--space-3);
  }

  .nav__logo-img {
    height: 34px;
  }

  .hero__container {
    padding: calc(var(--space-10) + 140px) var(--space-4) var(--space-10);
    gap: var(--space-8);
  }

  .hero__left {
    gap: var(--space-5);
  }
}

/* ── MOBILE SMALL (≤ 400px) ───────────────────── */
@media (max-width: 400px) {
  :root {
    --font-size-hero: 1.65rem;
  }

  .nav__logo-img {
    height: 28px;
  }

  .hero__heading {
    font-size: 1.65rem;
  }

  .hero__subtext {
    font-size: .85rem;
  }
}

/* ==========================================================
   JOURNEY SECTION
   Part 2C - Responsive + Final Polish
========================================================== */

/* Smooth rendering */

.journey,
.journey * {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Better spacing */

.journey-card {
  overflow: hidden;
}

.journey-card__content>* {

  position: relative;
  z-index: 5;
}

/* ==========================================================
   Large Desktop
========================================================== */

@media (min-width:1500px) {

  .journey__container {

    max-width: 1380px;
  }

  .journey__grid {

    gap: 42px;
  }

  .journey-card {

    min-height: 620px;
  }

  .journey-card__title {

    font-size: 48px;
  }

}

/* ==========================================================
   Laptop
========================================================== */

@media (max-width:1200px) {

  .journey__grid {

    gap: 24px;
  }

  .journey-card {

    min-height: 520px;
  }

  .journey-card__title {

    font-size: 36px;
  }

  .journey-card__icon {

    width: 110px;
    height: 110px;
  }

  .journey-card__icon img {

    width: 50px;
    height: 50px;
  }

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:992px) {

  .journey {

    padding: 90px 0;
  }

  .journey__heading {

    margin-bottom: 50px;
  }

  .journey__title {

    font-size: 3rem;
  }

  .journey__subtitle {

    font-size: 18px;
  }

  .journey__grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 28px;
  }

  .journey-card:last-child {

    grid-column: span 2;

    max-width: 500px;

    margin: auto;
  }

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px) {

  .journey {

    padding: 70px 0;
  }

  .journey__container {

    width: 92%;
  }

  .journey__heading {

    margin-bottom: 45px;
  }

  .journey__title {

    font-size: 2.2rem;
  }

  .journey__subtitle {

    font-size: 16px;

    line-height: 1.7;
  }

  .journey__grid {

    grid-template-columns: 1fr;

    gap: 24px;
  }

  .journey-card {

    min-height: 480px;
  }

  .journey-card:last-child {

    grid-column: auto;

    max-width: none;
  }

  .journey-card__content {

    padding: 40px 26px;
  }

  .journey-card__icon {

    width: 95px;
    height: 95px;

    margin-bottom: 26px;
  }

  .journey-card__icon img {

    width: 42px;
    height: 42px;
  }

  .journey-card__number {

    font-size: 82px;
  }

  .journey-card__title {

    font-size: 30px;
  }

  .journey-card__text {

    font-size: 16px;
  }

}

/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width:480px) {

  .journey {

    padding: 60px 0;
  }

  .journey__title {

    font-size: 2rem;
  }

  .journey__divider {

    width: 70px;
  }

  .journey-card {

    border-radius: 20px;

    min-height: 440px;
  }

  .journey-card__number {

    top: 20px;
    left: 20px;

    font-size: 68px;
  }

  .journey-card__content {

    padding: 34px 22px;
  }

  .journey-card__icon {

    width: 82px;
    height: 82px;
  }

  .journey-card__icon img {

    width: 36px;
    height: 36px;
  }

  .journey-card__title {

    font-size: 26px;
  }

  .journey-card__gold-line {

    margin-bottom: 20px;
  }

  .journey-card__text {

    font-size: 15px;

    line-height: 1.8;
  }

}

/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce) {

  .journey * {

    animation: none !important;

    transition: none !important;
  }

}

/* ==========================================================
   GLOBAL MOBILE OVERRIDES (Logo & Nav-Hero Gap)
========================================================== */
@media (max-width: 999px) {
  /* Reduce gap between navbar and hero on mobile for all hero pages */
  .mainland-hero,
  .about-hero,
  .hero,
  .hero__container,
  .insights-hero {
    padding-top: 95px !important; /* reduced gap */
  }
}

@media (max-width: 480px) {
  .mainland-hero,
  .about-hero,
  .hero,
  .hero__container,
  .insights-hero {
    padding-top: 85px !important; /* reduced gap */
  }
}