/* ====================================================================
   sponsors.css
   Styles for the Current Members / Sponsors tier layout
   (Legend, Champion, MVP/Captain/Varsity, Name Recognition).

   Relies on tokens already defined site-wide in business.css:
   --base-color, --dark-gray, --medium-gray, --alt-font, --primary-font
   Load this file alongside vendors.min.css / style.css / responsive.css
   / business.css — after business.css so nothing here gets overridden.
==================================================================== */

.section-title{
  text-align:center;
  max-width:680px;
  margin:0 auto 55px;
}
.section-title .eyebrow{
  font-family:var(--alt-font);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:13px;
  font-weight:700;
  color:var(--base-color);
  display:block;
  margin-bottom:10px;
}
.section-title h2{
  font-size:2.4rem;
  margin-bottom:14px;
  color:var(--base-color);
  font-weight:800;
}
.section-title p{
  color:var(--medium-gray);
  margin:0;
}
.bg-light-gray{
  background:#f4f6f8;
}

/* ---- Legend tier ---- */
.legend-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px;
}
.legend-card{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:14px;
  padding:50px 40px;
  text-align:center;
  box-shadow:0 20px 45px rgba(8,56,99,0.08);
}
.tier-tag{
  display:inline-block;
  font-family:var(--alt-font);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:12px;
  font-weight:700;
  color:var(--base-color);
  background:rgba(8,56,99,0.08);
  padding:6px 16px;
  border-radius:50px;
  margin-bottom:22px;
}
.legend-card .logo-wrap{
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
}
.legend-card .logo-wrap img{
  max-height:110px;
  max-width:100%;
}
.legend-card h3{
  margin-bottom:0;
  font-size:1.4rem;
}

/* ---- Champion tier ---- */
.champion-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.champion-card{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:12px;
  padding:36px 28px;
  text-align:center;
}
.champion-card .logo-wrap{
  height:85px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}
.champion-card .logo-wrap img{
  max-height:75px;
  max-width:100%;
}
.champion-card h4{
  margin-bottom:0;
  font-size:1.1rem;
}

/* ---- MVP / Captain / Varsity grid ---- */
.tier-block{
  margin-bottom:60px;
}
.tier-block:last-child{
  margin-bottom:0;
}
.tier-block-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:26px;
  border-bottom:2px solid #e4e7ec;
  padding-bottom:14px;
}
.tier-block-head h3{
  margin:0;
  font-size:1.5rem;
  color:var(--base-color);
  font-weight:800;
}
.tier-block-head span{
  color:var(--medium-gray);
  font-size:14px;
}
.mvp-grid{
  display:grid;
  /* auto-fit + minmax: rows fill up to 5 columns wide (site container
     tops out at 1320px), stepping down to 4/3/2/1 as the container
     shrinks — and since it's auto-fit (not auto-fill), a row with
     fewer cards than the max still stretches to fill the width
     instead of leaving empty tracks. */
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
}
.mvp-card{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:10px;
  padding:26px 20px;
  text-align:center;
}
.mvp-card.size-mvp{
  padding:32px 24px;
}
.mvp-card .logo-wrap{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.mvp-card.size-mvp .logo-wrap{
  height:75px;
}
.mvp-card .logo-wrap img{
  max-height:55px;
  max-width:100%;
}
.mvp-card.size-mvp .logo-wrap img{
  max-height:70px;
}
.mvp-card h5{
  margin-bottom:0;
  font-size:0.95rem;
}

/* ---- Name Recognition (Silver / Blue / Booster) ---- */
.name-rec-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.name-rec-col h4{
  font-size:1.15rem;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:2px solid var(--base-color);
  color:var(--base-color);
  font-weight:800;
}
.name-rec-col ul{
  list-style:none;
  margin:0;
  padding:0;
}
.name-rec-col li{
  padding:9px 0;
  border-bottom:1px solid #e4e7ec;
  font-size:15px;
  line-height:24px;
  color:var(--dark-gray);
}
.name-rec-col li:last-child{
  border-bottom:none;
}

@media(max-width:991px){
  .name-rec-columns{
    grid-template-columns:1fr;
    gap:0;
  }
  .name-rec-col{
    margin-bottom:30px;
  }
}

/* ---- News cards (Crafto "Blog Simple" style) ----
   Wrapped in <figure class="news-card-figure box-hover"> inside a
   .blog-simple row so the theme's real, already-shipped behavior
   drives everything — nothing invented:
     .blog-simple figure:hover .blog-hover-icon   -> icon scales/fades in
     .blog-simple figure:hover .blog-image img    -> image blurs
     .blog-simple figure:hover .blog-image .box-overlay -> dims to 30%
     (all confirmed live in style.css — NOTE: .card-title itself has
     no real base color rule site-wide, every .card-title rule in
     style.css is scoped to other blog-* variants we're not using, so
     color:#fff is set explicitly below instead of relying on it)
     $('.box-hover').on('mouseenter'/'mouseleave', ...).find('.hover-text')
       .slideDown(400) / .slideUp(400)
     (confirmed live in main.js — this is what reveals the "Continue
     Reading" link; the class names box-hover / hover-text are real
     and already wired, so the <div class="hover-text"> in the markup
     above needs no extra JS, it Just Works on page load.)
   The rules below only handle the parts the real theme classes don't
   cover for us: sizing the card, growing the dark caption panel on
   hover, and basic text styling. */
.news-card-figure{
  position:relative;
  margin:0;
  border-radius:6px;
  overflow:hidden;
}
.news-card-figure a{
  text-decoration:none;
  display:block;
  color:inherit;
}
.news-card-figure .blog-image{
  position:relative;
  overflow:hidden;
  height:380px;
}
.news-card-figure .blog-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news-card-figure .blog-hover-icon{
  position:absolute;
  top:50%;
  left:50%;
  width:50px;
  height:50px;
  margin:-25px 0 0 -25px;
  border-radius:100px;
  background:#fff;
  color:var(--dark-gray);
  display:flex;
  align-items:center;
  justify-content:center;
}
.news-card-figure .news-caption{
  position:relative;
  margin-top:-110px;
  z-index:2;
  padding:24px 24px 20px;
  background:linear-gradient(to top, rgba(8,15,20,.92) 40%, rgba(8,15,20,0) 100%);
  transition:margin-top .35s ease, background-color .35s ease;
}
.news-card-figure .news-caption .blog-date{
  display:block;
  color:rgba(255,255,255,.7);
  font-size:12px;
  letter-spacing:1px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:8px;
}
.news-card-figure .news-caption .card-title{
  display:block;
  color:#fff;
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  text-decoration:none;
}
.news-card-figure .news-continue-reading{
  display:block;
  color:#fff;
  font-size:13px;
  letter-spacing:1px;
  font-weight:600;
  text-transform:uppercase;
  text-decoration:underline;
  margin-top:14px;
}
.blog-simple figure:hover .news-caption{
  background:#0b1720;
}

/* ---- About page: Our Mission square photo ---- */
.mission-photo-square{
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
}
.mission-photo-square img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---- About page: Our Mission bullet points ---- */
.mission-point{
  gap:22px;
  align-items:center;
}
.mission-point-icon{
  width:72px;
  height:72px;
  min-width:72px;
  border-radius:100px;
  background:var(--base-color);
  border:2px solid var(--base-color);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
}

/* ---- About page: Meet the Board cards ---- */
.board-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.board-card{
  background:#fff;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(8,56,99,0.12);
  padding:32px 24px;
  text-align:center;
}
.board-card-name{
  display:block;
  font-weight:700;
  color:#000;
  font-size:1.15rem;
  margin-bottom:6px;
}
.board-card-role{
  display:block;
  font-weight:400;
  color:var(--medium-gray);
  font-size:0.95rem;
}

/* ---- Board cards: float-down entrance on scroll ---- */
.board-card{
  opacity:0;
  transform:translateY(-40px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.board-card.in-view{
  opacity:1;
  transform:translateY(0);
}
.board-grid .board-card:nth-child(4n+1) { transition-delay: 0s; }
.board-grid .board-card:nth-child(4n+2) { transition-delay: 0.12s; }
.board-grid .board-card:nth-child(4n+3) { transition-delay: 0.24s; }
.board-grid .board-card:nth-child(4n+4) { transition-delay: 0.36s; }

/* ---- News section: cards float down + CTA fade-up on scroll ---- */
.news-card-reveal{
  opacity:0;
  transform:translateY(-40px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.news-card-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.row.blog-simple .news-card-reveal:nth-child(1){transition-delay:0s;}
.row.blog-simple .news-card-reveal:nth-child(2){transition-delay:0.12s;}
.row.blog-simple .news-card-reveal:nth-child(3){transition-delay:0.24s;}
.row.blog-simple .news-card-reveal:nth-child(4){transition-delay:0.36s;}

.news-cta-reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
.news-cta-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ---- Current Members page: cards + name lists float down on scroll ---- */
.legend-card, .champion-card, .mvp-card, .name-rec-col li{
  opacity:0;
  transform:translateY(-30px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.legend-card.in-view, .champion-card.in-view, .mvp-card.in-view, .name-rec-col li.in-view{
  opacity:1;
  transform:translateY(0);
}
.legend-grid .legend-card:nth-child(1){transition-delay:0s;}
.legend-grid .legend-card:nth-child(2){transition-delay:0.1s;}
.legend-grid .legend-card:nth-child(3){transition-delay:0.2s;}
.legend-grid .legend-card:nth-child(4){transition-delay:0.3s;}
.champion-grid .champion-card:nth-child(1){transition-delay:0s;}
.champion-grid .champion-card:nth-child(2){transition-delay:0.1s;}
.champion-grid .champion-card:nth-child(3){transition-delay:0.2s;}
.champion-grid .champion-card:nth-child(4){transition-delay:0.3s;}
.mvp-grid .mvp-card:nth-child(1){transition-delay:0s;}
.mvp-grid .mvp-card:nth-child(2){transition-delay:0.08s;}
.mvp-grid .mvp-card:nth-child(3){transition-delay:0.16s;}
.mvp-grid .mvp-card:nth-child(4){transition-delay:0.24s;}
.mvp-grid .mvp-card:nth-child(5){transition-delay:0.32s;}
.mvp-grid .mvp-card:nth-child(6){transition-delay:0.4s;}
.mvp-grid .mvp-card:nth-child(n+7){transition-delay:0.48s;}
.name-rec-col li:nth-child(1){transition-delay:0s;}
.name-rec-col li:nth-child(2){transition-delay:0.06s;}
.name-rec-col li:nth-child(3){transition-delay:0.12s;}
.name-rec-col li:nth-child(4){transition-delay:0.18s;}
.name-rec-col li:nth-child(5){transition-delay:0.24s;}
.name-rec-col li:nth-child(n+6){transition-delay:0.3s;}