/* =====================================================
   SCRIPTURE BANNER MOUNT
===================================================== */

#scriptureBannerMount{
  position:relative;
  z-index:5;

  display:block;

  width:100%;
  min-height:150px;

  margin:0;
  padding:0;

  background:#07120d;
}

#scriptureBannerMount:empty{
  min-height:0;
}



/* =====================================================
   HOMEPAGE SCRIPTURE BANNER
===================================================== */

.scripture-banner{
  position:relative;

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(232,190,79,.13),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #101813,
      #07120d 58%,
      #030806
    );

  border-top:1px solid rgba(218,155,24,.28);
  border-bottom:1px solid rgba(218,155,24,.28);
}

.scripture-banner::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.16;

  background-image:
    linear-gradient(
      rgba(255,255,255,.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.03) 1px,
      transparent 1px
    );

  background-size:42px 42px;
}

.scripture-banner-inner{
  position:relative;
  z-index:1;

  width:min(1320px, 100%);

  min-height:150px;

  margin:auto;
  padding:30px 28px;

  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:24px;

  box-sizing:border-box;
}

.scripture-banner-mark{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border:1px solid rgba(240,196,91,.38);
  border-radius:16px;

  color:#f0c45b;

  background:rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 30px rgba(0,0,0,.2);

  font-size:1.1rem;
}

.scripture-banner-copy{
  min-width:0;
}

.scripture-banner-kicker{
  margin:0 0 8px;

  color:#f0c45b;

  font-size:.66rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.scripture-banner blockquote{
  margin:0;
}

.scripture-banner blockquote p{
  max-width:900px;

  margin:0;

  color:rgba(255,255,255,.93);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(1.12rem, 2vw, 1.55rem);
  font-weight:500;
  line-height:1.45;
}

.scripture-banner cite{
  display:block;

  margin-top:9px;

  color:rgba(240,196,91,.88);

  font-size:.7rem;
  font-style:normal;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.scripture-banner-refresh{
  min-height:44px;

  padding:0 17px;

  border:1px solid rgba(240,196,91,.35);
  border-radius:11px;

  color:#f7d77d;
  background:rgba(255,255,255,.05);

  font:inherit;
  font-size:.69rem;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease;
}

.scripture-banner-refresh:hover{
  transform:translateY(-2px);

  color:#171006;
  background:#f0c45b;
}

.scripture-banner-copy.is-changing{
  animation:scriptureBannerChange .35s ease;
}

@keyframes scriptureBannerChange{

  0%{
    opacity:1;
    transform:translateY(0);
  }

  50%{
    opacity:0;
    transform:translateY(5px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }

}

@media(max-width:760px){

  .scripture-banner-inner{
    grid-template-columns:auto minmax(0, 1fr);
  }

  .scripture-banner-refresh{
    grid-column:1 / -1;

    width:100%;
  }

}

@media(max-width:500px){

  .scripture-banner-inner{
    padding:26px 18px;

    grid-template-columns:1fr;
  }

  .scripture-banner-mark{
    width:46px;
    height:46px;
  }

}

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

  .scripture-banner-copy.is-changing{
    animation:none;
  }

  .scripture-banner-refresh{
    transition:none;
  }

}