/* =========================================================
   SIX NINE — PILATES RESPONSIVE
   File: assets/css/responsive/pilates-responsive.css
   ========================================================= */


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1280px) {
  .pilates-coming-soon {
    min-height:
      max(
        100svh,
        800px
      );
  }

  .pilates-coming-soon__content {
    padding:
      160px
      0
      144px;
  }

  .pilates-coming-soon__title {
    font-size:
      clamp(
        5rem,
        9.5vw,
        8.8rem
      );
  }

  .pilates-orbit {
    width:
      clamp(
        260px,
        32vw,
        480px
      );
  }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1024px) {
  .pilates-coming-soon {
    min-height:
      max(
        100svh,
        760px
      );
  }

  .pilates-coming-soon__content {
    padding:
      145px
      0
      138px;
  }

  .pilates-coming-soon__title {
    font-size:
      clamp(
        4.6rem,
        9.5vw,
        7.4rem
      );
  }

  .pilates-coming-soon__bottom {
    gap: 36px;
  }

  .pilates-coming-soon__copy {
    max-width: 420px;
  }

  .pilates-coming-soon__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .pilates-orbit {
    top: 150px;
    right: -40px;

    width:
      clamp(
        240px,
        34vw,
        420px
      );
  }

  .pilates-coming-soon__meta-grid span {
    min-height: 68px;

    padding-inline: 16px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .pilates-page main {
    overflow: hidden;
  }


  /* =======================================================
     MAIN SECTION
     ======================================================= */

  .pilates-coming-soon {
    min-height: 100svh;
  }

  .pilates-coming-soon__media img {
    inset:
      -2%
      0;

    height: 104%;

    object-position: center;
  }

  .pilates-coming-soon__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(12, 12, 13, 0.22) 0%,
        rgba(12, 12, 13, 0.3) 32%,
        rgba(12, 12, 13, 0.66) 70%,
        rgba(12, 12, 13, 0.96) 100%
      );
  }

  .pilates-coming-soon__sage {
    background:
      radial-gradient(
        circle at 74% 18%,
        rgba(169, 178, 154, 0.2),
        transparent 30%
      ),
      radial-gradient(
        circle at 18% 72%,
        rgba(169, 178, 154, 0.1),
        transparent 38%
      );
  }


  /* =======================================================
     CONTENT
     ======================================================= */

  .pilates-coming-soon__content {
    min-height: 100svh;

    align-content: end;

    gap: 24px;

    padding:
      calc(
        108px +
        env(safe-area-inset-top)
      )
      0
      142px;
  }


  /* =======================================================
     TOP
     ======================================================= */

  .pilates-coming-soon__top {
    gap: 16px;
  }

  .pilates-coming-soon__status {
    min-height: 30px;

    padding-inline: 11px;

    font-size: 0.54rem;
  }


  /* =======================================================
     TITLE
     ======================================================= */

  .pilates-coming-soon__title {
    max-width: 100%;

    font-size:
      clamp(
        4rem,
        18vw,
        5.8rem
      );

    line-height: 0.81;
  }


  /* =======================================================
     BOTTOM
     ======================================================= */

  .pilates-coming-soon__bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 24px;
  }


  /* =======================================================
     COPY
     ======================================================= */

  .pilates-coming-soon__copy {
    max-width: 100%;
  }

  .pilates-coming-soon__copy p {
    font-size:
      clamp(
        1.45rem,
        7vw,
        2rem
      );
  }

  .pilates-coming-soon__copy span {
    font-size: 0.68rem;
  }


  /* =======================================================
     ACTIONS
     ======================================================= */

  .pilates-coming-soon__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .pilates-coming-soon__actions
  .btn {
    width: 100%;
  }


  /* =======================================================
     ORBIT
     ======================================================= */

  .pilates-orbit {
    top:
      clamp(
        120px,
        18vw,
        150px
      );

    right: -90px;

    width:
      clamp(
        220px,
        60vw,
        320px
      );

    opacity: 0.5;
  }

  .pilates-orbit__dot {
    width: 9px;
    height: 9px;

    box-shadow:
      0
      0
      0
      9px
      rgba(
        169,
        178,
        154,
        0.08
      );
  }


  /* =======================================================
     META
     ======================================================= */

  .pilates-coming-soon__meta {
    background:
      rgba(
        12,
        12,
        13,
        0.72
      );
  }

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

  .pilates-coming-soon__meta-grid span {
    min-height: 56px;

    padding:
      0
      12px;

    font-size: 0.54rem;
  }

  .pilates-coming-soon__meta-grid span:first-child {
    padding-left: 12px;
  }

  .pilates-coming-soon__meta-grid span:nth-child(2) {
    border-right: 0;
  }

  .pilates-coming-soon__meta-grid span:nth-child(-n + 2) {
    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.08
      );
  }


  /* =======================================================
     MOBILE CTA
     ======================================================= */

  .pilates-mobile-cta {
    display: block;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .pilates-coming-soon__content {
    padding:
      calc(
        98px +
        env(safe-area-inset-top)
      )
      0
      134px;
  }

  .pilates-coming-soon__top {
    align-items: flex-start;
  }

  .pilates-coming-soon__title {
    font-size:
      clamp(
        3.65rem,
        18vw,
        5rem
      );
  }

  .pilates-coming-soon__copy p {
    font-size:
      clamp(
        1.35rem,
        7vw,
        1.8rem
      );
  }

  .pilates-orbit {
    top: 112px;
    right: -100px;

    width:
      clamp(
        210px,
        64vw,
        290px
      );
  }

  .pilates-coming-soon__meta-grid span {
    min-height: 52px;

    padding-inline: 10px;

    font-size: 0.51rem;
  }

  .pilates-mobile-cta {
    padding:
      8px
      10px
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
  }

  .pilates-mobile-cta
  .btn {
    min-height: 44px;

    font-size: 0.6rem;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
  .pilates-coming-soon__content {
    padding-bottom: 130px;
  }

  .pilates-coming-soon__title {
    font-size: 3.35rem;
  }

  .pilates-coming-soon__copy p {
    font-size: 1.25rem;
  }

  .pilates-coming-soon__status {
    padding-inline: 9px;

    font-size: 0.5rem;
  }

  .pilates-coming-soon__meta-grid span {
    min-height: 48px;

    font-size: 0.48rem;
  }
}


/* =========================================================
   SHORT MOBILE VIEWPORT
   ========================================================= */

@media (
  max-width: 768px
) and (
  max-height: 700px
) {
  .pilates-coming-soon__content {
    padding-top: 88px;
    padding-bottom: 126px;

    gap: 18px;
  }

  .pilates-coming-soon__title {
    font-size:
      clamp(
        3.25rem,
        14vw,
        4.4rem
      );
  }

  .pilates-coming-soon__bottom {
    gap: 18px;
  }

  .pilates-coming-soon__copy p {
    font-size: 1.3rem;
  }

  .pilates-orbit {
    top: 96px;

    opacity: 0.38;
  }
}


/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media (
  max-width: 900px
) and (
  orientation: landscape
) {
  .pilates-coming-soon {
    min-height: 100svh;
  }

  .pilates-coming-soon__content {
    min-height: 100svh;

    padding:
      92px
      0
      88px;

    gap: 18px;
  }

  .pilates-coming-soon__title {
    font-size:
      clamp(
        3.7rem,
        9vw,
        5.2rem
      );
  }

  .pilates-coming-soon__bottom {
    flex-direction: row;

    align-items: flex-end;
  }

  .pilates-coming-soon__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }

  .pilates-orbit {
    top: 90px;
    right: -20px;

    width:
      clamp(
        200px,
        28vw,
        300px
      );
  }

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

  .pilates-coming-soon__meta-grid span {
    min-height: 50px;

    border-bottom: 0 !important;
  }

  .pilates-coming-soon__meta-grid span:nth-child(2) {
    border-right:
      1px solid
      rgba(
        255,
        255,
        255,
        0.08
      );
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {
  .pilates-coming-soon__actions
  .btn-outline-light:hover {
    border-color:
      rgba(
        255,
        255,
        255,
        0.28
      );

    background:
      transparent;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .pilates-coming-soon__media img,
  .pilates-orbit,
  .pilates-orbit__ring,
  .pilates-orbit__dot {
    transform:
      none !important;

    animation:
      none !important;

    transition:
      none !important;
  }
}