/* =====================================================================

   GREEN CITY SEZ — WEBSITE TUTORIAL POPUP

   CENTERED + FULLY RESPONSIVE

\===================================================================== */



.gc-tutorial-popup {

  position: fixed !important;

  inset: 0 !important;



  width: 100vw !important;

  height: 100dvh !important;



  z-index: 2200;



  display: none;



  align-items: center !important;

  justify-content: center !important;



  padding: 20px;



  margin: 0 !important;



  overflow: auto;



  box-sizing: border-box;

}





/* =========================================================

   OPEN STATE

\========================================================= */



.gc-tutorial-popup.is-open {

  display: flex !important;

}





/* =========================================================

   BACKDROP

\========================================================= */



.gc-tutorial-popup__backdrop {

  position: fixed;

  inset: 0;



  width: 100%;

  height: 100%;



  background: rgba(2, 18, 13, 0.82);



  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);



  z-index: 0;

}





/* =========================================================

   DIALOG — DESKTOP

\========================================================= */



.gc-tutorial-popup__dialog {

  position: relative !important;



  z-index: 1;



  /*

    760px normal width,

    but automatically shrinks if screen height/width is smaller.

  */

  width: min(

    760px,

    calc(100vw - 40px),

    calc((100dvh - 40px) * 16 / 9)

  ) !important;



  max-width: none !important;

  max-height: none !important;



  height: auto !important;



  aspect-ratio: 16 / 9;



  flex: 0 0 auto;



  margin: auto !important;



  top: auto !important;

  right: auto !important;

  bottom: auto !important;

  left: auto !important;



  overflow: auto;



  display: flex !important;



  align-items: center !important;

  justify-content: center !important;



  padding: 70px 90px;



  box-sizing: border-box;



  background-color: #0b2a20;



  background-image:

    linear-gradient(

      rgba(8, 40, 30, 0.08),

      rgba(8, 40, 30, 0.08)

    ),

    url("../assets/leather/leather-background-1920x1080.webp");



  background-size:

    100% 100%,

    100% 100%;



  background-position:

    center,

    center;



  background-repeat:

    no-repeat,

    no-repeat;



  border: 0;



  border-radius: 20px !important;



  box-shadow:

    0 30px 80px rgba(0, 0, 0, 0.55);



  animation:

    gcTutorialPopupIn 260ms ease both;

}





/* =========================================================

   CONTENT

\========================================================= */



.gc-tutorial-popup__content {

  width: 100%;

  max-width: 470px;



  display: flex;



  flex-direction: column;



  align-items: flex-start;

  justify-content: center;



  gap: 10px;

}





/* =========================================================

   EYEBROW

\========================================================= */



.gc-tutorial-popup__eyebrow {

  display: block;



  margin: 0;

  padding: 0;



  font-family:

    Inter,

    Arial,

    sans-serif;



  font-size: 14px;

  line-height: 20px;



  font-weight: 700;



  letter-spacing: 3px;



  text-transform: uppercase;



  color: #e8b4a8;

}





/* =========================================================

   TITLE

\========================================================= */



.gc-tutorial-popup__title {

  margin: 0;



  padding:

    0 60px 0 0;



  font-family:

    Georgia,

    "Times New Roman",

    serif;



  font-size: 40px;

  line-height: 46px;



  font-weight: 700;



  color: #ffffff;

}





/* =========================================================

   MESSAGE

\========================================================= */



.gc-tutorial-popup__message {

  margin:

    34px 0 0;



  padding: 0;



  font-family:

    Inter,

    Arial,

    sans-serif;



  font-size: 18px;

  line-height: 28px;



  font-weight: 400;



  color: #d7dfd9;

}





/* =========================================================

   CLOSE BUTTON

\========================================================= */



.gc-tutorial-popup__close {

  position: absolute;



  top: 58px;

  right: 58px;



  z-index: 3;



  width: 48px;

  height: 48px;



  display: flex;



  align-items: center;

  justify-content: center;



  padding: 0;



  border:

    1px solid rgba(231, 126, 147, 0.65);



  border-radius:

    50% !important;



  background: #0b3b2e;



  color: #e8b4a8;



  cursor: pointer;



  transition:

    transform 220ms ease,

    background 220ms ease,

    color 220ms ease;

}





.gc-tutorial-popup__close:hover {

  transform: rotate(90deg);



  background: #e8b4a8;



  color: #08362a;

}





.gc-tutorial-popup__close svg {

  width: 20px;

  height: 20px;

}





/* =========================================================

   OPEN ANIMATION

\========================================================= */



@keyframes gcTutorialPopupIn {



  from {

    opacity: 0;



    transform:

      translateY(18px)

      scale(0.98);

  }



  to {

    opacity: 1;



    transform:

      translateY(0)

      scale(1);

  }



}





/* =====================================================================

   900PX — 1300PX

   SQUARE POPUP

\===================================================================== */



@media (min-width: 900px) and (max-width: 1300px) {



  .gc-tutorial-popup {

    padding: 20px;

  }





  .gc-tutorial-popup__dialog {



    /*

      VERY IMPORTANT:

      Width also considers viewport HEIGHT.

      Therefore square popup will never get squashed.

    */



    width: min(

      560px,

      calc(100vw - 40px),

      calc(100dvh - 40px)

    ) !important;



    height: auto !important;



    aspect-ratio: 1 / 1;



    padding:

      72px 68px;



    background-image:

      linear-gradient(

        rgba(8, 40, 30, 0.08),

        rgba(8, 40, 30, 0.08)

      ),

      url("../assets/leather/leather-square-1200x1200.webp");

  }





  .gc-tutorial-popup__content {

    max-width: 390px;

  }





  .gc-tutorial-popup__title {

    padding-right: 54px;



    font-size: 36px;

    line-height: 42px;

  }





  .gc-tutorial-popup__message {

    margin-top: 26px;



    font-size: 17px;

    line-height: 26px;

  }





  .gc-tutorial-popup__close {

    top: 50px;

    right: 50px;



    width: 44px;

    height: 44px;

  }



}





/* =====================================================================

   600PX — 899PX

   SMALLER SQUARE POPUP

\===================================================================== */



@media (min-width: 600px) and (max-width: 899px) {



  .gc-tutorial-popup {

    padding: 16px;

  }





  .gc-tutorial-popup__dialog {



    width: min(

      500px,

      calc(100vw - 32px),

      calc(100dvh - 32px)

    ) !important;



    height: auto !important;



    aspect-ratio: 1 / 1;



    padding:

      64px 58px;



    background-image:

      linear-gradient(

        rgba(8, 40, 30, 0.08),

        rgba(8, 40, 30, 0.08)

      ),

      url("../assets/leather/leather-square-1200x1200.webp");

  }





  .gc-tutorial-popup__content {

    max-width: 360px;

  }





  .gc-tutorial-popup__eyebrow {

    font-size: 13px;

    line-height: 18px;



    letter-spacing: 2px;

  }





  .gc-tutorial-popup__title {

    padding-right: 48px;



    font-size: 32px;

    line-height: 38px;

  }





  .gc-tutorial-popup__message {

    margin-top: 22px;



    font-size: 16px;

    line-height: 24px;

  }





  .gc-tutorial-popup__close {

    top: 44px;

    right: 44px;



    width: 42px;

    height: 42px;

  }



}





/* =====================================================================

   UNDER 600PX

   PORTRAIT 3:4 POPUP

\===================================================================== */



@media (max-width: 599px) {



  .gc-tutorial-popup {

    padding: 10px;

  }





  .gc-tutorial-popup__dialog {



    /*

      Maintain 3:4 even on short-height phones.

    */



    width: min(

      390px,

      calc(100vw - 20px),

      calc((100dvh - 20px) * 3 / 4)

    ) !important;



    height: auto !important;



    aspect-ratio: 3 / 4;



    padding:

      58px 46px;



    background-image:

      linear-gradient(

        rgba(8, 40, 30, 0.08),

        rgba(8, 40, 30, 0.08)

      ),

      url("../assets/leather/leather-card-900x1200.webp");

  }





  .gc-tutorial-popup__content {

    max-width: 280px;



    align-items: center;



    text-align: center;

  }





  .gc-tutorial-popup__eyebrow {

    font-size: 12px;

    line-height: 18px;



    letter-spacing: 2px;

  }





  .gc-tutorial-popup__title {

    padding-right: 0;



    font-size: 30px;

    line-height: 36px;

  }





  .gc-tutorial-popup__message {

    margin-top: 20px;



    font-size: 15px;

    line-height: 23px;

  }





  .gc-tutorial-popup__close {

    top: 38px;

    right: 38px;



    width: 40px;

    height: 40px;

  }



}





/* =====================================================================

   VERY SMALL PHONES

\===================================================================== */



@media (max-width: 380px) {



  .gc-tutorial-popup__dialog {



    width: min(

      350px,

      calc(100vw - 20px),

      calc((100dvh - 20px) * 3 / 4)

    ) !important;



    padding:

      52px 40px;

  }





  .gc-tutorial-popup__title {

    font-size: 27px;

    line-height: 32px;

  }





  .gc-tutorial-popup__message {

    margin-top: 16px;



    font-size: 14px;

    line-height: 22px;

  }





  .gc-tutorial-popup__close {

    top: 34px;

    right: 34px;



    width: 38px;

    height: 38px;

  }



}





/* =====================================================================

   REDUCED MOTION

\===================================================================== */



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



  .gc-tutorial-popup__dialog {

    animation: none;

  }





  .gc-tutorial-popup__close {

    transition: none;

  }



}
/* =========================================================
   VIDEO MODE (a YouTube video is set in the CMS: Home → Banner)
   The video sits inside the leather frame; the close button
   moves into the frame's top-right corner, clear of the video.
\========================================================= */

.gc-tutorial-popup--video .gc-tutorial-popup__dialog {
  padding: clamp(46px, 6.5%, 54px) clamp(16px, 6.5%, 54px) clamp(18px, 4%, 36px);
  overflow: hidden;
  /* Hug a 16:9 video at every screen size (the text popup is squarer on phones). */
  aspect-ratio: auto !important;
}

.gc-tutorial-popup--video .gc-tutorial-popup__close {
  top: clamp(6px, 1.2vw, 10px);
  right: clamp(6px, 1.2vw, 10px);
  width: 36px;
  height: 36px;
}

.gc-tutorial-popup__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px #e8b4a8;
}

.gc-tutorial-popup__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gc-tutorial-popup__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}