/* /css/layout/hero.css */

/* ===== Hero ===== */
.hero h1{
  background: linear-gradient(
    130deg,
    var(--ink) 5%,
    var(--brand-600) 20%,
    var(--brand-purp) 45%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.panel h2{
  margin:0 0 6px;
  background: linear-gradient(
    130deg,
    var(--ink) 5%,
    var(--brand-600) 8%,
    var(--brand-purp) 15%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.hero p{
  margin:0;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--muted);
}

.hero .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:18px;
  gap:20px;
  margin-top:22px;
}

/* Hero divider */
.hero .row::before{
  content:"";
  grid-column:1 / -1;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  margin-bottom:14px;
}

/* Hero login panel tweaks */
.hero .login-panel{
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.hero .login-panel strong{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.hero .login-panel .muted{
  position:relative;
  padding-left:16px;
  line-height:1.55;
}

.hero .login-panel .muted.bulleted::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:2px;
  background: var(--brand-600);
  opacity:.6;
}

/* Responsive hero */
@media (max-width: 820px){
  .hero .row{
    grid-template-columns:1fr;
  }

}

@media (max-width: 640px) {
  .hero .btnContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero .btnContainer > .cta,
  .hero .btnContainer > .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .hero .btnContainer > .cta[hidden],
  .hero .btnContainer > .cta.is-hidden {
    display: none;
  }

  .hero .btnContainer:has(.cta[hidden]),
  .hero .btnContainer:has(.cta.is-hidden) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .hero .btnContainer {
    grid-template-columns: 1fr;
  }
}