/* =========================================================
   SIX NINE — PRIVATE SPACES RESPONSIVE
   File: assets/css/responsive/private-spaces-responsive.css
   ========================================================= */


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

@media (max-width: 1280px) {
  /* =======================================================
     HERO
     ======================================================= */

  .private-hero__content {
    padding:
      160px
      0
      58px;
  }

  .private-hero__title {
    font-size:
      clamp(
        5.5rem,
        11vw,
        10rem
      );
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .private-intro {
    padding:
      108px
      0
      180px;
  }

  .private-intro__grid {
    gap: 100px;
  }


  /* =======================================================
     PRIVATE SPACE
     ======================================================= */

  .private-space {
    padding:
      100px
      0
      180px;
  }

  .private-space__media--large {
    min-height: 700px;
  }

  .private-space__media--portrait {
    min-height: 390px;
  }

  .private-space__statement {
    min-height: 300px;
  }


  /* =======================================================
     VVIP
     ======================================================= */

  .private-vvip__media--wide {
    min-height: 650px;
  }

  .private-vvip__editorial {
    min-height: 580px;
  }

  .private-vvip__media--portrait,
  .private-vvip__quote {
    min-height: 580px;
  }


  /* =======================================================
     SUPPORT
     ======================================================= */

  .private-support-item {
    min-height: 300px;

    padding: 24px;
  }


  /* =======================================================
     CHOOSE
     ======================================================= */

  .private-choice {
    min-height: 390px;
  }


  /* =======================================================
     BEYOND
     ======================================================= */

  .private-beyond-card {
    min-height: 590px;
  }
}


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

@media (max-width: 1024px) {
  /* =======================================================
     HERO
     ======================================================= */

  .private-hero {
    min-height: 92svh;
  }

  .private-hero__content {
    padding:
      145px
      0
      54px;
  }

  .private-hero__title {
    font-size:
      clamp(
        4.8rem,
        10vw,
        7.8rem
      );
  }

  .private-hero__footer {
    gap: 40px;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .private-intro {
    padding:
      96px
      0
      145px;
  }

  .private-intro__grid {
    grid-template-columns:
      1fr
      0.85fr;

    gap: 62px;
  }


  /* =======================================================
     SHARED PRIVATE SPACE
     ======================================================= */

  .private-space {
    padding:
      90px
      0
      150px;
  }

  .private-space__header {
    grid-template-columns:
      1fr
      0.5fr;

    gap: 56px;
  }


  /* =======================================================
     MEETING ROOM
     ======================================================= */

  .private-space__gallery {
    grid-template-columns:
      1.3fr
      0.7fr;
  }

  .private-space__media--large {
    min-height: 620px;
  }

  .private-space__media--portrait {
    min-height: 340px;
  }

  .private-space__statement {
    min-height: 270px;

    padding: 28px;
  }


  /* =======================================================
     DETAILS
     ======================================================= */

  .private-details {
    padding:
      92px
      0
      140px;
  }

  .private-details__layout {
    grid-template-columns:
      0.7fr
      1.3fr;

    gap: 72px;
  }

  .private-detail {
    min-height: 170px;
  }


  /* =======================================================
     VVIP
     ======================================================= */

  .private-vvip__media--wide {
    min-height: 560px;
  }

  .private-vvip__editorial {
    grid-template-columns:
      0.72fr
      1.28fr;

    min-height: 520px;
  }

  .private-vvip__media--portrait,
  .private-vvip__quote {
    min-height: 520px;
  }


  /* =======================================================
     VVIP DETAILS
     ======================================================= */

  .private-vvip-details {
    padding:
      92px
      0
      140px;
  }

  .private-vvip-details__grid {
    grid-template-columns:
      1fr
      0.5fr;

    gap: 70px;
  }


  /* =======================================================
     SUPPORT
     ======================================================= */

  .private-support {
    padding:
      92px
      0
      140px;
  }

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

  .private-support-item {
    min-height: 260px;
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .private-photo-break {
    min-height: 74svh;
  }


  /* =======================================================
     CHOOSE
     ======================================================= */

  .private-choose {
    padding:
      96px
      0
      145px;
  }

  .private-choice {
    min-height: 350px;

    padding: 25px;

    grid-template-columns:
      36px
      minmax(0, 1fr)
      40px;
  }


  /* =======================================================
     BEYOND
     ======================================================= */

  .private-beyond {
    padding:
      92px
      0
      140px;
  }

  .private-beyond-card {
    min-height: 520px;
  }
}


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

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


  /* =======================================================
     HERO
     ======================================================= */

  .private-hero {
    min-height: 100svh;
  }

  .private-hero__media img {
    inset:
      -3%
      0;

    height: 106%;

    object-position: center;
  }

  .private-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(12, 12, 13, 0.14) 0%,
        rgba(12, 12, 13, 0.22) 35%,
        rgba(12, 12, 13, 0.64) 72%,
        rgba(12, 12, 13, 0.94) 100%
      );
  }

  .private-hero__content {
    min-height: 100svh;

    align-content: end;

    gap: 20px;

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

  .private-hero__title {
    font-size:
      clamp(
        4.1rem,
        19vw,
        6rem
      );

    line-height: 0.81;
  }

  .private-hero__footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 24px;

    margin-top: 2px;
  }

  .private-hero__footer > p {
    max-width: 300px;

    font-size:
      clamp(
        1.55rem,
        8vw,
        2.2rem
      );
  }

  .private-hero__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .private-hero__actions
  .btn {
    width: 100%;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .private-intro {
    padding:
      78px
      0
      100px;
  }

  .private-intro__grid {
    grid-template-columns: 1fr;

    gap: 36px;
  }

  .private-intro__heading {
    gap: 20px;
  }

  .private-intro__copy {
    max-width: 100%;
  }


  /* =======================================================
     PRIVATE SPACE SHARED
     ======================================================= */

  .private-space {
    padding:
      76px
      0
      100px;
  }

  .private-space__header {
    grid-template-columns: 1fr;

    gap: 28px;

    margin-bottom: 42px;
  }

  .private-space__intro-copy {
    max-width: 100%;

    gap: 24px;
  }


  /* =======================================================
     MEETING GALLERY
     ======================================================= */

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

    grid-template-rows: auto;

    gap: 6px;
  }

  .private-space__media--large {
    grid-column:
      1
      / -1;

    grid-row: auto;

    min-height: 430px;
  }

  .private-space__media--portrait {
    min-height: 300px;
  }

  .private-space__statement {
    min-height: 300px;

    padding: 22px;
  }

  .private-space__statement span {
    font-size:
      clamp(
        2rem,
        9vw,
        3rem
      );
  }


  /* =======================================================
     DETAILS
     ======================================================= */

  .private-details {
    padding:
      78px
      0
      98px;
  }

  .private-details__layout {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .private-details__heading {
    gap: 18px;
  }

  .private-detail {
    grid-template-columns:
      32px
      minmax(0, 1fr);

    gap: 14px;

    min-height: 160px;

    padding:
      22px
      0;
  }

  .private-detail strong {
    font-size:
      clamp(
        1.9rem,
        8vw,
        2.6rem
      );
  }

  .private-detail p {
    max-width: 100%;
  }


  /* =======================================================
     VVIP GALLERY
     ======================================================= */

  .private-vvip__media--wide {
    min-height: 440px;
  }

  .private-vvip__editorial {
    grid-template-columns:
      0.8fr
      1.2fr;

    min-height: 440px;

    gap: 6px;
  }

  .private-vvip__media--portrait,
  .private-vvip__quote {
    min-height: 440px;
  }

  .private-vvip__quote {
    gap: 18px;

    padding: 24px;
  }

  .private-vvip__quote blockquote {
    font-size:
      clamp(
        3rem,
        12vw,
        4.8rem
      );
  }


  /* =======================================================
     VVIP DETAILS
     ======================================================= */

  .private-vvip-details {
    padding:
      78px
      0
      98px;
  }

  .private-vvip-details__grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .private-vvip-details__copy {
    gap: 20px;
  }

  .private-vvip-details__actions {
    max-width: 100%;

    justify-self: stretch;
  }


  /* =======================================================
     SUPPORT
     ======================================================= */

  .private-support {
    padding:
      78px
      0
      98px;
  }

  .private-support__header {
    margin-bottom: 42px;
  }

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

  .private-support-item {
    min-height: 230px;

    gap: 22px;

    padding: 20px;
  }

  .private-support-item strong {
    font-size:
      clamp(
        1.8rem,
        7vw,
        2.3rem
      );
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .private-photo-break {
    min-height: 64svh;
  }

  .private-photo-break > img {
    inset:
      -2%
      0;

    height: 104%;
  }

  .private-photo-break__content {
    padding-bottom: 34px;
  }

  .private-photo-break__content > div {
    gap: 18px;
  }


  /* =======================================================
     CHOOSE
     ======================================================= */

  .private-choose {
    padding:
      78px
      0
      98px;
  }

  .private-choose__header {
    margin-bottom: 42px;
  }

  .private-choose__grid {
    grid-template-columns: 1fr;
  }

  .private-choice {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      38px;

    gap: 14px;

    min-height: 310px;

    padding: 22px;
  }

  .private-choice__copy strong {
    font-size:
      clamp(
        2.4rem,
        11vw,
        3.7rem
      );
  }

  .private-choice__arrow {
    width: 38px;
    height: 38px;
  }


  /* =======================================================
     BEYOND
     ======================================================= */

  .private-beyond {
    padding:
      78px
      0
      98px;
  }

  .private-beyond__header {
    margin-bottom: 42px;
  }

  .private-beyond__grid {
    grid-template-columns: 1fr;

    gap: 7px;
  }

  .private-beyond-card {
    min-height: 470px;
  }

  .private-beyond-card__content {
    left: 22px;
    right: 70px;
    bottom: 22px;
  }

  .private-beyond-card__content strong {
    font-size:
      clamp(
        2.5rem,
        11vw,
        3.7rem
      );
  }

  .private-beyond-card__arrow {
    right: 20px;
    bottom: 22px;

    width: 42px;
    height: 42px;
  }


  /* =======================================================
     FINAL CTA
     ======================================================= */

  .private-final {
    padding:
      100px
      0;
  }

  .private-final__inner {
    gap: 24px;
  }

  .private-final__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .private-final__actions
  .btn {
    width: 100%;
  }


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

  .private-mobile-cta {
    display: grid;
  }
}


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

@media (max-width: 480px) {
  /* =======================================================
     HERO
     ======================================================= */

  .private-hero__content {
    padding-top:
      calc(
        96px +
        env(safe-area-inset-top)
      );

    padding-bottom: 30px;
  }

  .private-hero__title {
    font-size:
      clamp(
        3.7rem,
        19vw,
        5.1rem
      );
  }

  .private-hero__footer > p {
    font-size:
      clamp(
        1.45rem,
        7.5vw,
        1.95rem
      );
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .private-intro {
    padding:
      68px
      0
      86px;
  }


  /* =======================================================
     MEETING
     ======================================================= */

  .private-space {
    padding:
      68px
      0
      88px;
  }

  .private-space__gallery {
    gap: 5px;
  }

  .private-space__media--large {
    min-height: 360px;
  }

  .private-space__media--portrait {
    min-height: 250px;
  }

  .private-space__statement {
    min-height: 250px;

    padding: 18px;
  }


  /* =======================================================
     DETAILS
     ======================================================= */

  .private-details {
    padding:
      68px
      0
      86px;
  }

  .private-detail {
    min-height: 145px;
  }

  .private-detail strong {
    font-size:
      clamp(
        1.7rem,
        8vw,
        2.2rem
      );
  }


  /* =======================================================
     VVIP
     ======================================================= */

  .private-vvip__media--wide {
    min-height: 360px;
  }

  .private-vvip__editorial {
    grid-template-columns: 1fr;

    min-height: auto;
  }

  .private-vvip__media--portrait {
    min-height: 400px;
  }

  .private-vvip__quote {
    min-height: 330px;

    padding: 20px;
  }

  .private-vvip__quote blockquote {
    font-size:
      clamp(
        2.8rem,
        14vw,
        4rem
      );
  }


  /* =======================================================
     VVIP DETAILS
     ======================================================= */

  .private-vvip-details {
    padding:
      68px
      0
      86px;
  }


  /* =======================================================
     SUPPORT
     ======================================================= */

  .private-support {
    padding:
      68px
      0
      86px;
  }

  .private-support__grid {
    grid-template-columns: 1fr;
  }

  .private-support-item {
    min-height: 190px;

    padding: 18px;
  }

  .private-support-item strong {
    font-size:
      clamp(
        1.7rem,
        8vw,
        2.2rem
      );
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .private-photo-break {
    min-height: 58svh;
  }


  /* =======================================================
     CHOOSE
     ======================================================= */

  .private-choose {
    padding:
      68px
      0
      86px;
  }

  .private-choice {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      34px;

    gap: 11px;

    min-height: 280px;

    padding: 18px;
  }

  .private-choice__copy strong {
    font-size:
      clamp(
        2.15rem,
        11vw,
        3rem
      );
  }

  .private-choice__copy p {
    font-size: 0.72rem;
  }

  .private-choice__meta {
    font-size: 0.54rem;
  }

  .private-choice__arrow {
    width: 34px;
    height: 34px;
  }


  /* =======================================================
     BEYOND
     ======================================================= */

  .private-beyond {
    padding:
      68px
      0
      86px;
  }

  .private-beyond-card {
    min-height: 410px;
  }

  .private-beyond-card__content {
    left: 18px;
    right: 60px;
    bottom: 18px;
  }

  .private-beyond-card__content strong {
    font-size:
      clamp(
        2.25rem,
        11vw,
        3.2rem
      );
  }

  .private-beyond-card__arrow {
    right: 16px;
    bottom: 18px;

    width: 38px;
    height: 38px;
  }


  /* =======================================================
     FINAL
     ======================================================= */

  .private-final {
    padding:
      88px
      0;
  }


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

  .private-mobile-cta {
    grid-template-columns:
      1.3fr
      0.7fr;

    gap: 6px;

    padding:
      8px
      10px
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
  }

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

    padding-inline: 10px;

    font-size: 0.58rem;
  }
}


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

@media (max-width: 360px) {
  .private-hero__title {
    font-size: 3.4rem;
  }

  .private-space__media--large {
    min-height: 330px;
  }

  .private-space__media--portrait {
    min-height: 220px;
  }

  .private-space__statement {
    min-height: 220px;
  }

  .private-vvip__media--wide {
    min-height: 330px;
  }

  .private-vvip__media--portrait {
    min-height: 360px;
  }

  .private-vvip__quote {
    min-height: 300px;
  }

  .private-choice {
    grid-template-columns:
      26px
      minmax(0, 1fr)
      32px;

    padding:
      16px
      14px;
  }

  .private-beyond-card {
    min-height: 380px;
  }
}


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

@media (
  max-width: 768px
) and (
  max-height: 700px
) {
  .private-hero__content {
    padding-top: 90px;
  }

  .private-hero__title {
    font-size:
      clamp(
        3.3rem,
        14vw,
        4.5rem
      );
  }

  .private-hero__footer {
    gap: 18px;
  }

  .private-hero__footer > p {
    font-size: 1.55rem;
  }
}


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

@media (
  max-width: 900px
) and (
  orientation: landscape
) {
  /* =======================================================
     HERO
     ======================================================= */

  .private-hero {
    min-height: 100svh;
  }

  .private-hero__content {
    min-height: 100svh;

    padding:
      90px
      0
      30px;
  }

  .private-hero__title {
    font-size:
      clamp(
        3.8rem,
        9vw,
        5.4rem
      );
  }

  .private-hero__footer {
    flex-direction: row;

    align-items: flex-end;
  }

  .private-hero__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .private-intro__grid {
    grid-template-columns:
      1fr
      0.85fr;

    gap: 44px;
  }


  /* =======================================================
     MEETING
     ======================================================= */

  .private-space__gallery {
    grid-template-columns:
      1.35fr
      0.65fr;
  }

  .private-space__media--large {
    grid-column: auto;

    grid-row:
      1
      / 3;

    min-height: 520px;
  }

  .private-space__media--portrait {
    min-height: 280px;
  }

  .private-space__statement {
    min-height: 230px;
  }


  /* =======================================================
     DETAILS
     ======================================================= */

  .private-details__layout {
    grid-template-columns:
      0.75fr
      1.25fr;
  }


  /* =======================================================
     VVIP
     ======================================================= */

  .private-vvip__editorial {
    grid-template-columns:
      0.72fr
      1.28fr;
  }

  .private-vvip__media--portrait,
  .private-vvip__quote {
    min-height: 430px;
  }


  /* =======================================================
     SUPPORT
     ======================================================= */

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

  .private-support-item {
    min-height: 230px;
  }


  /* =======================================================
     CHOOSE
     ======================================================= */

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

  .private-choice {
    min-height: 320px;
  }


  /* =======================================================
     BEYOND
     ======================================================= */

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

  .private-beyond-card {
    min-height: 440px;
  }


  /* =======================================================
     FINAL
     ======================================================= */

  .private-final__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }
}


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

@media (hover: none) {
  .private-space__media img,
  .private-vvip__media img,
  .private-beyond-card__media img {
    transform: none !important;
  }

  .private-support-item:hover {
    background:
      transparent;

    color:
      var(--color-black);
  }

  .private-support-item:hover p {
    color:
      var(--text-secondary);
  }

  .private-choice:hover {
    background:
      var(--color-ivory);

    color:
      var(--color-black);
  }

  .private-choice:hover::after {
    transform:
      scale(0.8);
  }

  .private-choice:hover
  .private-choice__copy p {
    color:
      var(--text-secondary);
  }

  .private-choice:hover
  .private-choice__meta {
    color:
      var(--text-muted);
  }

  .private-choice:hover
  .private-choice__arrow {
    background:
      transparent;

    border-color:
      var(--border-light);

    color:
      var(--color-black);

    transform: none;
  }

  .private-beyond-card:hover
  .private-beyond-card__arrow {
    background:
      transparent;

    color:
      var(--color-white);

    transform: none;
  }
}


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

@media (
  prefers-reduced-motion: reduce
) {
  .private-hero__media img,
  .private-space__media img,
  .private-vvip__media img,
  .private-photo-break > img,
  .private-support-item,
  .private-choice,
  .private-choice::after,
  .private-choice__arrow,
  .private-beyond-card__media img,
  .private-beyond-card__arrow {
    transform:
      none !important;

    transition:
      none !important;
  }
}