/* Gateway layout: header, two doors, footer. Shared pieces live in site.css. */
body[data-site="gateway"] main{
  flex:1;
  display:grid;
  grid-template-columns:1fr;
  min-height:0;
}

.door{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--space-xl) var(--space-lg);
  text-decoration:none;
  overflow:hidden;
  min-height:min(78vw,416px);
}
.door .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.door .scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(20,20,19,.88) 0%,rgba(20,20,19,.72) 55%,rgba(20,20,19,.25) 100%);
}
.door > *:not(.bg):not(.scrim){position:relative}
.door-eyebrow{margin-bottom:var(--space-sm);color:var(--accent-text-on-ink)}
.door h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--display-size);
  line-height:var(--display-line);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--paper);
  margin-bottom:var(--space-md);
}
.door p{
  font-size:var(--body-size);
  line-height:var(--body-line);
  max-width:34ch;
  margin-bottom:var(--space-lg);
}
.door:hover .bg{transform:scale(1.045)}
.door:hover .chip .arrow{transform:translateX(4px)}

.door-tennis{background:var(--ink-soft)}
.door-tennis .chip{background:var(--chartreuse);color:var(--ink);border:2px solid var(--chartreuse)}
.door-tennis:hover .chip{background:var(--chartreuse-deep);border-color:var(--chartreuse-deep)}

.door-pickle{background:var(--ink);border-top:1px solid rgba(250,249,245,.12)}
.door-pickle .chip{border:2px solid var(--chartreuse);color:var(--chartreuse);background:transparent}
.door-pickle:hover .chip{background:var(--chartreuse);color:var(--ink)}

@media (min-width:768px){
  body[data-site="gateway"] main{grid-template-columns:1fr 1fr}
  .door{min-height:72dvh;padding:var(--space-2xl) var(--space-xl)}
  .door-pickle{border-top:0;border-left:1px solid rgba(250,249,245,.12)}
}

@media (prefers-reduced-motion:reduce){
  .door:hover .bg{transform:none}
}