/* ======================================
   STREETKEEPER GEAR PAGE
====================================== */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  width:100%;
  min-height:100%;
}

body{
  background:#f4f7f8;
  font-family:Georgia, serif;
}


/* ======================================
   PAGE
====================================== */

.streetkeeperGearPage{
  position:relative;
  transform:translateY(-35px);

  width:100vw;
  min-height:100vh;

  overflow-x:hidden;
}


/* ======================================
   ESTABLISHED PRAYER COVER
   DESKTOP BACKGROUND TREATMENT
====================================== */

@media (min-width:900px) and (min-aspect-ratio:4/3){

  .streetkeeperGearPage{
    background-image:
      linear-gradient(
        rgba(12,65,96,0.28),
        rgba(12,65,96,0.28)
      ),
      url("desktop-card-overlay.png"),
      linear-gradient(
        to bottom,
        #0C3045 0%,
        #0C4160 48%,
        #1F6F8B 100%
      );

    background-size:
      cover,
      cover,
      cover;

    background-position:
      center center,
      center center,
      center center;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat;
  }

}


/* ======================================
   BACK TO HOME
====================================== */

.streetkeeperGearBackHomeLink{
  position:absolute;

  top:28px;
  right:52px;

  z-index:20;

  font-family:Georgia, serif;
  font-size:22px;
  font-weight:600;

  color:#1f6f8b;

  text-decoration:none;
}


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

.streetkeeperGearContent{
  display:flex;

  align-items:center;
  justify-content:center;

  width:100%;
  min-height:100vh;

  padding:
    70px 50px;

  box-sizing:border-box;
}


/* ======================================
   DESKTOP CARD OVERLAY
====================================== */

.streetkeeperGearCard{
  position:relative;

  display:flex;

  align-items:center;
  justify-content:center;

  width:
    calc(100% - 100px);

  max-width:1000px;

  min-height:500px;

  padding:
    60px 70px;

  box-sizing:border-box;

background:
  rgba(255,255,255,0.24);

border:
  1px solid
  rgba(255,255,255,0.38);

box-shadow:
  0 8px 24px
  rgba(0,0,0,0.10);

backdrop-filter:
  blur(2px);

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

/* ======================================
   CARD TEXT
====================================== */

.streetkeeperGearText{
  position:relative;

  width:82%;

  text-align:center;

  color:#124A58;

  z-index:2;
}


.streetkeeperGearText h1{
  margin:0;

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size:
    clamp(58px, 5.5vw, 108px);

  line-height:1.12;

  font-weight:700;
}


.streetkeeperGearComingSoon{
  margin-top:52px;

  font-family:Georgia, serif;

  font-size:
    clamp(30px, 2.5vw, 48px);

  line-height:1.3;

  font-weight:700;
}


.streetkeeperGearMessage{
  margin-top:32px;

  font-family:Georgia, serif;

  font-size:
    clamp(27px, 2.2vw, 42px);

  line-height:1.55;
}


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

@media (max-width:700px){

  .streetkeeperGearPage{
    min-height:100vh;
  }


  .streetkeeperGearBackHomeLink{
    top:10px;
    right:10px;
    left:auto;

    font-size:10px;
  }


  .streetkeeperGearContent{
    min-height:100vh;

    padding:
      55px 12px 30px 12px;
  }


  .streetkeeperGearCard{
    width:
      calc(100vw - 24px);

    min-height:650px;

    padding:
      65px 32px;

    background-size:
      100% 100%;
  }


  .streetkeeperGearText{
    width:90%;
  }


  .streetkeeperGearText h1{
    font-size:
      clamp(36px, 10vw, 54px);

    line-height:1.15;
  }


  .streetkeeperGearComingSoon{
    margin-top:38px;

    font-size:
      clamp(22px, 6vw, 30px);
  }


  .streetkeeperGearMessage{
    margin-top:26px;

    font-size:
      clamp(20px, 5.4vw, 27px);

    line-height:1.5;
  }

}