/*==========================================================
  PRAISE AFLAME™ MINISTRIES
  gateway.css

  Page:
      connect.html

  Purpose:
      Styles used only by The Gateway page.

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


/*==========================================================
  1. PAGE LAYOUT
==========================================================*/

.gateway-page{
    width:100%;
    background:#050505;
    color:#f5f5f5;
}

.gateway-content{
    width:min(1100px,92%);
    margin:0 auto;
    padding:40px 0 80px;
    text-align:center;
}


/*==========================================================
  2. TYPOGRAPHY
==========================================================*/

.gateway-page .blog-meta{
    color:#d4af37;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:.95rem;
    margin-bottom:15px;
}

.gateway-page .page-title{
    font-size:clamp(2.5rem,5vw,4.4rem);
    color:#fff;
    margin-bottom:15px;
}

.gateway-tagline{
    font-size:1.3rem;
    color:#d4af37;
    font-style:italic;
    margin-bottom:35px;
}

.gateway-page .scripture{
    max-width:820px;
    margin:0 auto 50px;
    font-size:1.15rem;
    line-height:1.9;
    color:#ececec;
}

.gateway-page .scripture span{
    display:block;
    margin-top:12px;
    color:#d4af37;
    font-weight:bold;
}


/*==========================================================
  3. HERO IMAGE
==========================================================*/

.gateway-hero{
    margin:40px auto;
}

.gateway-hero-img{
    width:100%;
    max-width:1050px;
    display:block;
    margin:auto;
    border-radius:22px;
    box-shadow:
        0 25px 60px rgba(0,0,0,.65),
        0 0 25px rgba(212,175,55,.20);
}


/*==========================================================
  4. INTRODUCTION
==========================================================*/

.gateway-introduction,
.gateway-welcome{
    max-width:850px;
    margin:35px auto;
    font-size:1.18rem;
    line-height:1.9;
}

.gateway-introduction{
    color:#ffffff;
}

.gateway-welcome{
    color:#dddddd;
}


/*==========================================================
  5. MAIN BUTTON
==========================================================*/

.gateway-page .hero-btn{
    display:inline-block;
    margin:35px auto 55px;
}


/*==========================================================
  6. GATEWAY LINKS
==========================================================*/

.gateway-links{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
    margin-top:20px;
}

.gateway-btn{
    display:flex;
    justify-content:center;
    align-items:center;

    min-height:65px;

    padding:18px;

    text-decoration:none;

    background:#111;

    border:1px solid rgba(212,175,55,.35);

    border-radius:14px;

    color:white;

    transition:.30s;
}

.gateway-btn:hover{

    transform:translateY(-4px);

    background:#1b1b1b;

    border-color:#d4af37;

    box-shadow:0 10px 28px rgba(212,175,55,.18);

}


/*==========================================================
  7. BLESSING
==========================================================*/

.gateway-blessing{

    margin-top:70px;

    padding-top:50px;

    border-top:1px solid rgba(212,175,55,.25);

}

.gateway-blessing p{

    max-width:800px;

    margin:auto;

    line-height:1.8;

}

.gateway-final-line{

    margin-top:30px;

    color:#d4af37;

    font-weight:600;

    letter-spacing:1px;

}


/*==========================================================
  8. TABLET
==========================================================*/

@media(max-width:900px){

.gateway-content{

    width:94%;

}

.gateway-links{

    grid-template-columns:1fr 1fr;

}

}


/*==========================================================
  9. MOBILE
==========================================================*/

@media(max-width:640px){

.gateway-page .page-title{

    font-size:2.5rem;

}

.gateway-tagline{

    font-size:1.1rem;

}

.gateway-links{

    grid-template-columns:1fr;

}

.gateway-introduction,
.gateway-welcome,
.gateway-page .scripture{

    font-size:1rem;

}

.gateway-btn{

    min-height:60px;

}

}