/* ============================================================
   /teams (Operate) — page-specific styling.
   A proper hero: one of the hand-drawn illustrations behind a
   dark opacity layer so "Let a team count together" reads big
   and legible. Uses v2-editorial tokens for everything else.
   ============================================================ */

.v2-teams-hero{
    position:relative;
    /* Full-screen hero on every device (below the ~64px in-flow header). */
    min-height:calc(100svh - 64px);
    display:flex;align-items:center;
    /* Little League watercolor behind a near-black base; ::before adds the layer. */
    background:#0a0a0a url('/images/personas/teams-baseball.webp') center / cover no-repeat;
    padding:clamp(3rem,7vw,6rem) 1.5rem;
    overflow:hidden;
}
.v2-teams-hero::before{
    content:"";
    position:absolute;inset:0;z-index:0;
    /* Darker on the left (under the copy), lighter on the right so the coach +
       iPad show through the illustration. */
    background:linear-gradient(100deg, rgba(8,8,8,.9) 0%, rgba(8,8,8,.74) 44%, rgba(8,8,8,.48) 100%);
}
.v2-teams-hero-inner{
    position:relative;z-index:1;width:100%;
    max-width:1160px;margin:0 auto;
    display:flex;flex-direction:column;align-items:flex-start;
}
.v2-teams-hero .v2-eyebrow{color:var(--accent)}
.v2-teams-hero .v2-eyebrow::before{background:var(--accent)}

.v2-teams-hero-title{
    font-family:'Fraunces','Source Serif Pro',Georgia,serif;
    font-size:clamp(2.5rem,6.5vw,4.75rem);
    line-height:1;letter-spacing:-.03em;font-weight:800;
    color:#fdfbf7;
    margin:1.35rem 0 0;
}
.v2-teams-hero-title em{font-style:italic;font-weight:400;color:var(--accent)}

.v2-teams-hero-deck{
    font-size:clamp(1.05rem,1.5vw,1.3rem);
    line-height:1.55;
    color:rgba(253,251,247,.9);
    max-width:620px;
    margin:1.6rem 0 0;
}

/* THE fix for the "buttons touching the copy" note — clear breathing room. */
.v2-teams-hero-cta{
    display:flex;flex-wrap:wrap;gap:.75rem;
    margin-top:2.5rem;
}

/* Buttons need a solid readable treatment on the photographic overlay. */
.v2-teams-hero-cta .v2-btn-cream{background:#fdfbf7;color:#0a0a0a}
.v2-teams-hero-cta .v2-btn-cream:hover{background:var(--accent);color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.v2-teams-hero-cta .v2-btn-outline-cream{background:rgba(253,251,247,.06);color:#fdfbf7;border-color:rgba(253,251,247,.5)}
.v2-teams-hero-cta .v2-btn-outline-cream:hover{border-color:#fdfbf7;background:rgba(253,251,247,.14)}

@media (max-width:768px){
    .v2-teams-hero{min-height:calc(100svh - 56px)}
}
@media (max-width:640px){
    .v2-teams-hero{background-position:58% center}
    .v2-teams-hero-cta{gap:.6rem;flex-direction:column;align-items:stretch;width:100%;max-width:340px}
    .v2-teams-hero-cta .v2-btn{justify-content:center;text-align:center}
}