/* ==========================================================================
   RESPONSIVE
   Global responsive rules for Dusk & Olive
   Breakpoints: 360 / 768 / 1024 / 1440
   ========================================================================== */

/* ==========================================================================
   <= 1440px
   ========================================================================== */

@media (max-width: 1440px) {
  :root {
    --container-wide: 1240px;
  }
}

/* ==========================================================================
   <= 1024px
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --container: 920px;
    --container-padding: 24px;
    --header-height: 78px;
  }

  body {
    font-size: 15.5px;
  }

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

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

  .section {
    padding-block: clamp(68px, 10vw, 112px);
  }

  .section-sm {
    padding-block: clamp(44px, 8vw, 82px);
  }

  h1 {
    font-size: clamp(3.1rem, 10vw, 6.8rem);
  }

  h2 {
    font-size: clamp(2.35rem, 7vw, 4.8rem);
  }

  h3 {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
  }
}

/* ==========================================================================
   <= 768px
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --container-padding: 18px;
    --header-height: 72px;
    --radius-lg: 28px;
    --radius-xl: 36px;
  }

  body {
    font-size: 15px;
    line-height: 1.65;
  }

  body::before {
    background-size: 34px 34px;
  }

  .section {
    padding-block: 72px;
  }

  .section-sm {
    padding-block: 52px;
  }

  .section-top {
    padding-top: 92px;
  }

  .section-bottom {
    padding-bottom: 92px;
  }

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

  .grid {
    gap: 18px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.038em;
  }

  h1 {
    font-size: clamp(3rem, 16vw, 5.2rem);
  }

  h2 {
    font-size: clamp(2.25rem, 11vw, 4rem);
  }

  h3 {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }

  h4 {
    font-size: clamp(1.35rem, 6vw, 2rem);
  }

  .eyebrow {
    margin-bottom: 14px;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
  }

  .eyebrow::before {
    width: 26px;
  }

  .surface {
    border-radius: var(--radius-md);
  }

  .image-frame {
    border-radius: var(--radius-md);
  }

  .btn {
    min-height: 48px;
    padding-inline: 20px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: initial;
  }
}

/* ==========================================================================
   <= 520px
   ========================================================================== */

@media (max-width: 520px) {
  :root {
    --container-padding: 16px;
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 24px;
  }

  body {
    font-size: 14.5px;
  }

  .section {
    padding-block: 62px;
  }

  .section-sm {
    padding-block: 44px;
  }

  h1 {
    font-size: clamp(2.85rem, 17vw, 4.35rem);
  }

  h2 {
    font-size: clamp(2.1rem, 12vw, 3.45rem);
  }

  h3 {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
  }

  .btn {
    width: 100%;
  }

  .btn-ghost {
    width: auto;
  }

  .form-input,
  .form-textarea,
  .form-select {
    min-height: 52px;
    border-radius: 14px;
  }
}

/* ==========================================================================
   <= 360px
   ========================================================================== */

@media (max-width: 360px) {
  :root {
    --container-padding: 14px;
  }

  body {
    font-size: 14px;
  }

  h1 {
    font-size: 2.7rem;
  }

  h2 {
    font-size: 2rem;
  }

  .section {
    padding-block: 54px;
  }

  .section-sm {
    padding-block: 40px;
  }

  .btn {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 0.68rem;
  }
}