/* ================================
   Fore The Youth — Global Styles
   ================================ */
:root{
  --brand-green-light:#9EDA48;   /* logo light green */
  --brand-green-dark:#588036;    /* logo dark green */
  --brand-mint:#D4E8B9;          /* soft accent/background */
  --paper:#FFFFFF;
  --ink:#0F1A10;

  --brand-primary: var(--brand-green-dark);
  --brand-accent:  var(--brand-green-light);
  --bg:            #F7FAFC;
}

/* Base / Typography */
body{
  font-family: Inter, system-ui,-apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
h1,h2,h3,.btn-brand{ font-family: Poppins, Inter, system-ui, Arial, sans-serif; }
.section-title{ color:var(--brand-primary); }
a{ text-decoration:none }

/* Navbar */
.navbar-brand img{height:40px}
.navbar .nav-link{color:var(--ink)}
.navbar .nav-link:hover{color:var(--brand-primary)}

/* Buttons */
.btn-brand{
  background: linear-gradient(90deg,var(--brand-accent),var(--brand-green-dark));
  color:#063; border:none; font-weight:700; padding:.65rem 1rem; border-radius:.8rem;
}
.btn-brand:hover{opacity:.92}
.btn-outline-secondary{border-color:#b9c7b3;color:var(--brand-primary)}
.btn-outline-secondary:hover{background:var(--brand-mint);}

/* Cards / Panels */
.kid-panel{background:var(--paper);border-radius:1rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.05)}
.card-tier{
  border:1px solid #e4ecd9;border-radius:1rem;transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; /* equal-height helpers */
}
.card-tier:hover{transform:translateY(-3px);box-shadow:0 .5rem 1.25rem rgba(0,0,0,.06)}
.badge-tier{background:#eef7e6;color:var(--brand-primary);border-radius:999px;padding:.25rem .6rem;font-size:.75rem}
.tier-price{color:var(--brand-primary)}
h2 .text-secondary, h3 .text-secondary { font-weight:600; opacity:.7; }
.card-tier .btn{ margin-top:auto; } /* push CTA to bottom for equal card heights */

/* Hero band */
.hero-band{
  position:relative; color:#fff;
  background: linear-gradient(90deg,var(--brand-accent),var(--brand-green-dark));
  overflow:hidden;
}
.hero-band .hero-bg{
  position:absolute; inset:0; opacity:.25;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:saturate(105%) contrast(105%);
}
.hero-band .container{ position:relative; z-index:2; }

/* Journey Map — base */
.map-wrap{
  background:var(--paper);
  border-radius:1rem;
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.05);
  padding:1rem;
}

/* Journey Map — GREEN map variant with subtle grid + contour */
.map-wrap--green{
  padding:1.25rem;
  color:#fff;
  background:
    radial-gradient(1200px 400px at 100% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-green-dark) 100%);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
}
.map-wrap--green::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px; /* grid */
  pointer-events:none;
}
.map-legend{
  position:absolute; right:14px; top:14px; z-index:2;
  background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:.75rem; padding:.4rem .6rem; font-size:.8rem;
}

/* Map SVG strokes/pins */
.route{stroke:rgba(255,255,255,.8);stroke-width:8;fill:none;stroke-linecap:round;stroke-dasharray:10 12}
.route.secondary{stroke:rgba(255,255,255,.55);stroke-width:6;stroke-dasharray:6 10}
.map-pin{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.map-pin circle{ fill:#fff; stroke:rgba(0,0,0,.12); }
.map-pin .flag{ fill:rgba(255,255,255,.92); }
.map-label{ fill:#fff; font-weight:700; }

/* Pin pulse animation (gentle attention) */
.pulse{
  transform-origin:center;
  animation: pinpulse 3s ease-in-out infinite;
}
@keyframes pinpulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.05); opacity:.95; }
}

/* Animated 3-Pillar Cards */
.pillar-card {
  background: var(--clr);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
  color:#fff;
}
.pillar-card::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: rgba(255,255,255,.2);
  transform: skewX(-25deg);
  transition: left .7s ease;
}
.pillar-card:hover::before { left: 125%; }
.pillar-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.25);
}
.pillar-icon {
  font-size: 2.5rem;
  animation: bounce 3s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Rewards chips */
.reward-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.85); color:#0b3b17;
  border-radius:999px; padding:.35rem .7rem; font-weight:700; font-size:.85rem;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
}
.reward-chip i{ font-size:1rem }

/* Utility */
.gradient-band{background:linear-gradient(90deg,var(--brand-accent),var(--brand-green-dark)); color:#fff;}
@media (max-width: 576px){
  .display-5{font-size:2rem}
}

/* Equal-height membership cards + fixed CTA position */
.membership-grid .col-card { display:flex; }              /* equalize column heights */
.card-tier{
  display:flex; flex-direction:column;                    /* vertical layout */
  position:relative;                                      /* for future ribbons if needed */
  border:1px solid #e4ecd9; border-radius:1rem;
  transition:transform .15s ease, box-shadow .15s ease;
  background: var(--paper);
}
.card-tier:hover{ transform:translateY(-3px); box-shadow:0 .5rem 1.25rem rgba(0,0,0,.06); }

.card-tier .tier-head{ display:flex; justify-content:space-between; align-items:center; }
.card-tier .tier-body{ margin-top:.75rem; }
.card-tier .tier-body ul{ padding-left:1.1rem; }
.card-tier .card-cta{ margin-top:auto; }                  /* pushes CTA section to the bottom */
.card-tier .card-cta .btn{ width:100%; }                  /* full width CTA */

/* Optional: make Champion visually pop a bit */
.card-tier.is-champion{
  border-color: rgba(245,180,0,.45);
  box-shadow: 0 .65rem 1.25rem rgba(245,180,0,.12);
}
.card-tier.is-champion .tier-price{ color:#B78100; }

/* Equal-height cards + fixed-bottom CTAs on homepage too */
.grid-cards .col-card { display:flex; }  /* stretch columns so cards match height */
.card-tier { display:flex; flex-direction:column; } /* already present, safe to repeat */
.card-tier .card-cta { margin-top:auto; } /* pins CTA to bottom inside the card */

/* Journey page: equal-height cards + fixed-bottom CTA */
.journey-grid .col-card { display: flex; }
.card-tier { display: flex; flex-direction: column; }
.card-tier .card-cta { margin-top: auto; }   /* pushes CTA to bottom */
.card-tier .card-cta .btn { width: 100%; }   /* full-width CTA */

/* ===== Programs Pillars (distinct palette + animations) ===== */
.pillar-card.programs{
  position: relative;
  color:#fff;
  border:0;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.12);
  transform-style: preserve-3d;
}
.pillar-card.programs:hover{
  transform: translateY(-10px) rotateX(2deg);
}

/* Gradient colorways (not used on index) */
.pillar-card--golf{
  background: linear-gradient(135deg,#00A86B 0%, #0FBF9F 100%);
}
.pillar-card--stem{
  background: linear-gradient(135deg,#4C6FFF 0%, #7B61FF 100%);
}
.pillar-card--life{
  background: linear-gradient(135deg,#FF7A59 0%, #FFC145 100%);
  color:#3b2a00;
}

/* Moving diagonal shimmer */
.pillar-card.programs::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg,rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 60%);
  background-size: 200% 200%;
  mix-blend-mode: soft-light;
  animation: shimmerDiag 6s linear infinite;
  pointer-events:none;
}
@keyframes shimmerDiag{
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

/* Icon micro-animations */
.icon-bob { animation: bob 3s ease-in-out infinite; }
@keyframes bob {
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.icon-spin-slow { animation: spin 10s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-tilt { animation: tilt 3.2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes tilt {
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-8deg); }
}

/* Subtle glossy top edge */
.pillar-card.programs .gloss{
  position:absolute; top:0; left:0; right:0; height:10px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  border-top-left-radius:1rem; border-top-right-radius:1rem;
  pointer-events:none;
}
/* --- Programs pillar icon animations: make them visible & smooth --- */
.pillar-card.programs i {
  display: inline-block;          /* allow transforms on font icons */
  will-change: transform;         /* hint to the browser */
  transform-origin: 50% 80%;      /* nicer pivot for flag/people icons */
}

/* Bigger, clearer motions */
.icon-tilt { animation: tilt 2.2s ease-in-out infinite; }
@keyframes tilt {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(-14deg); }  /* increased from -8deg */
}

.icon-spin-slow { animation: spin 6s linear infinite; } /* faster than 10s */
@keyframes spin { to { transform: rotate(360deg); } }

.icon-bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }  /* increased from -6px */
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .icon-tilt, .icon-spin-slow, .icon-bob { animation: none !important; }
}

/* ===== Gallery / Partners ===== */
.fty-marquee{
  overflow: hidden;
  position: relative;
}
.fty-marquee-track{
  display: flex; gap: 2.5rem;
  align-items: center;
  animation: marqueeScroll 28s linear infinite;
  will-change: transform;
}
.fty-marquee:hover .fty-marquee-track{ animation-play-state: paused; }

.logo-cell{
  flex: 0 0 auto;
  width: 140px; height: 70px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.8);
  border-radius: .75rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}
.logo-cell img{
  max-width: 110px; max-height: 46px; object-fit: contain; filter: saturate(105%);
}
.logo-cell.placeholder{
  font-weight:700; color:#5a6b55; background:rgba(255,255,255,.6);
}

@keyframes marqueeScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* because we duplicated the track */
}

/* Responsive Photo Grid */
.fty-gallery-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
@media (max-width: 1199px){ .fty-gallery-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 767px){  .fty-gallery-grid{ grid-template-columns: repeat(4, 1fr); } }

.fty-photo{
  grid-column: span 3; /* base size */
  overflow: hidden; border-radius: 12px; display:block;
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.08);
}
.fty-photo img{
  width:100%; height:100%; object-fit: cover; display:block;
  transform: scale(1); transition: transform .35s ease, filter .35s ease;
  filter: saturate(105%) contrast(102%);
}
.fty-photo:hover img{
  transform: scale(1.05);
}

/* Allow a few items to span larger for rhythm */
.fty-photo:nth-child(6n){ grid-column: span 4; }
.fty-photo:nth-child(10n){ grid-column: span 5; }

@media (max-width: 767px){
  .fty-photo{ grid-column: span 4; }
  .fty-photo:nth-child(6n), .fty-photo:nth-child(10n){ grid-column: span 4; }
}