/* Responsive — Jobs & Gigs */

/* Header — tablet/desktop */
@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
  }

  .site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-header__menu-btn,
  .site-header__mobile {
    display: none !important;
  }
}

/* Header — mobile */
@media (max-width: 767px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .site-header__menu-btn {
    grid-column: 2;
  }
}

/* Hero — tablet/desktop */
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }

  .hero__content {
    padding-top: clamp(20px, 2.2vw, 40px);
  }

  .hero__visual {
    max-width: none;
    margin-inline: 0;
    margin-top: 0;
  }

  .hero__title {
    font-size: var(--font-60px);
  }
}

@media (min-width: 1200px) {
  .hero__title {
    font-size: var(--font-64px);
  }

  .hero__circle--small {
    width: 58%;
    top: -2%;
  }

  .hero__circle--big {
    width: 84%;
  }
}

/* Hero — small screens */
@media (max-width: 899px) {
  .hero__content {
    max-width: none;
    text-align: left;
  }

  .hero__visual {
    width: 88%;
    max-width: 340px;
    margin-inline: auto;
    aspect-ratio: 1 / 0.95;
  }

  .hero__circle--small {
    width: 48%;
    top: 4%;
    left: 0;
  }

  .hero__circle--big {
    width: 68%;
    top: 2%;
    right: 0;
  }

  .hero__badge {
    left: 8%;
    bottom: 4%;
    min-width: 0;
    max-width: 78%;
    padding: 10px 12px;
    gap: 8px;
  }

  .hero__badge-icon {
    width: 36px;
    height: 36px;
  }

  .hero__badge-title {
    font-size: var(--font-14px);
  }

  .hero__badge-sub {
    font-size: 12px;
  }
}

/* Built for Local — tablet/desktop */
@media (min-width: 900px) {
  .buildForLocal__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
  }

  .buildForLocal__media {
    max-width: none;
    margin-inline: 0;
  }

  .buildForLocal__media img {
    border-radius: 0 32px 32px 0;
  }

  .buildForLocal__title {
    font-size: var(--font-45px);
  }
}

@media (min-width: 1200px) {
  .buildForLocal__title {
    font-size: var(--font-50px);
  }
}

/* Built for Local — small screens */
@media (max-width: 899px) {
  .buildForLocal__media img {
    border-radius: 20px;
  }

  .buildForLocal__content {
    max-width: none;
  }
}

/* Why Jobs & Gigs */
@media (min-width: 600px) {
  .whyJobsGigs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    gap: clamp(16px, 1.5vw, 24px);
  }

  .whyJobsGigs__card {
    flex: unset;
    scroll-snap-align: unset;
  }
}

@media (min-width: 900px) {
  .whyJobsGigs__title {
    font-size: var(--font-45px);
  }

  .whyJobsGigs__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .whyJobsGigs__title {
    font-size: var(--font-50px);
  }

  .hero__content {
    max-width: 580px;
  }

  .buildForLocal__content {
    max-width: 580px;
  }
}

/* Scale centered content up on large screens — avoid tiny strip */
@media (min-width: 1600px) {
  :root {
    --layout-max: 1520px;
    --header-pad-x: clamp(32px, 4vw, 96px);
  }
}

@media (min-width: 1920px) {
  :root {
    --layout-max: 1720px;
    --header-pad-x: clamp(40px, 4vw, 110px);
  }

  .hero__content {
    max-width: 640px;
  }

  .buildForLocal__content {
    max-width: 640px;
  }

  .hero__title {
    font-size: var(--font-72px);
  }

  .buildForLocal__title {
    font-size: var(--font-53px);
  }
}

@media (min-width: 2560px) {
  :root {
    --layout-max: min(2100px, 82vw);
    --header-pad-x: clamp(48px, 4vw, 130px);
    --logo-size: clamp(64px, 3vw, 96px);
  }

  .hero__content {
    max-width: 720px;
  }

  .buildForLocal__content {
    max-width: 720px;
  }
}

@media (min-width: 3440px) {
  :root {
    --layout-max: min(2400px, 70vw);
    --header-pad-x: clamp(56px, 3.5vw, 140px);
  }
}

@media (min-width: 4000px) {
  :root {
    --layout-max: min(2800px, 62vw);
  }

  .hero__content {
    max-width: 800px;
  }

  .buildForLocal__content {
    max-width: 800px;
  }
}

/* Built for Everyone */
@media (min-width: 768px) {
  .builtForEveryone__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    gap: clamp(16px, 1.5vw, 24px);
  }

  .builtForEveryone__card {
    flex: unset;
    scroll-snap-align: unset;
  }
}

@media (min-width: 900px) {
  .builtForEveryone__title {
    font-size: var(--font-45px);
  }

  .builtForEveryone__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .builtForEveryone__title {
    font-size: var(--font-50px);
  }
}

/* App Coming Soon */
@media (min-width: 900px) {
  .appComingSoon__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    min-height: clamp(460px, 48vw, 560px);
    padding-top: clamp(36px, 4vw, 60px);
    padding-bottom: clamp(36px, 4vw, 60px);
  }

  .appComingSoon__title {
    font-size: var(--font-50px);
  }

  .appComingSoon__content {
    padding-bottom: 0;
    align-self: center;
  }

  .appComingSoon__media {
    position: absolute;
    right: var(--header-pad-x);
    top: 50%;
    bottom: auto;
    margin: 0;
    transform: translateY(-42%);
    height: auto;
  }

  .appComingSoon__media img {
    width: clamp(420px, 36vw, 640px);
  }
}

@media (min-width: 1200px) {
  .appComingSoon__title {
    font-size: var(--font-53px);
  }

  .appComingSoon__content {
    max-width: 580px;
  }

  .appComingSoon__inner {
    min-height: clamp(500px, 46vw, 600px);
    padding-top: clamp(44px, 4.5vw, 72px);
    padding-bottom: clamp(44px, 4.5vw, 72px);
  }

  .appComingSoon__media img {
    width: clamp(460px, 38vw, 680px);
  }
}

@media (max-width: 899px) {
  .appComingSoon__inner {
    padding-top: clamp(32px, 4.5vw, 48px);
    padding-bottom: clamp(32px, 4.5vw, 48px);
  }

  .appComingSoon__title {
    white-space: normal;
  }

  .appComingSoon__media {
    max-width: 100%;
    margin-bottom: -40px;
  }

  .appComingSoon__media img {
    width: min(100%, 360px);
    height: auto;
  }
}

/* Get Early Access */
@media (max-width: 899px) {
  .earlyAccess__subtitle {
    white-space: normal;
  }
}

@media (min-width: 700px) {
  .earlyAccess__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .earlyAccess__title {
    font-size: var(--font-53px);
  }

  .earlyAccess__subtitle {
    font-size: var(--font-26px);
  }
}

@media (min-width: 1200px) {
  .earlyAccess__title {
    font-size: var(--font-60px);
  }

  .earlyAccess__subtitle {
    font-size: var(--font-30px);
  }

  .earlyAccess__form {
    max-width: 1320px;
    padding: 60px 64px;
  }
}

/* Footer */
@media (min-width: 900px) {
  .siteFooter__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .siteFooter__meta {
    align-items: flex-end;
    text-align: right;
  }
}

@media (max-width: 899px) {
  .siteFooter__brand {
    align-items: flex-start;
  }

  .siteFooter__title {
    font-size: var(--font-32px);
  }
}