/* ============================================================
   Edu2Future LLC — For Students
   Extends the "Editorial Prestige" system (study-usa.css).
   Page-specific components, .fs- prefixed.
   ============================================================ */

/* Hero trust bar -------------------------------------------- */
.fs-trustbar {
  position: relative;
  z-index: 1;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.fs-trustbar-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  font-weight: 500;
  color: #D7E1EC;
}
.fs-trustbar-item svg {
  width: 18px; height: 18px;
  color: var(--su-gold);
  flex: none;
}
.fs-trustbar-sep {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(212,175,55,.6);
}

/* Hero variant: single centered column for this page */
.fs-hero-grid {
  position: relative;
  z-index: 1;
  max-width: 820px;
}
.fs-hero-grid .su-display {
  color: #fff;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  margin: 22px 0 24px;
}

/* Intro band ------------------------------------------------ */
.fs-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.fs-intro .su-display { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.fs-intro-body p {
  color: var(--color-paragraph);
  font-size: 1.08rem;
  line-height: 1.75;
}
.fs-intro-body p + p { margin-top: 18px; }
.fs-intro-rule {
  width: 56px; height: 3px;
  background: var(--su-gold);
  border-radius: 2px;
  margin-bottom: 22px;
}

/* 4-up cards (Who We Help) ---------------------------------- */
.su-cards.is-4 { grid-template-columns: repeat(4, 1fr); }
.su-cards.is-4 .su-card { padding: 34px 26px 30px; }
.su-cards.is-4 .su-card h3 { font-size: 1.3rem; }

/* Services grid --------------------------------------------- */
.fs-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.fs-service {
  position: relative;
  background: #fff;
  border: 1px solid var(--su-line);
  border-radius: 18px;
  padding: 36px 34px;
  display: flex;
  gap: 22px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.fs-service:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 56px -34px rgba(11,31,58,.4);
}
.fs-service.is-wide { grid-column: 1 / -1; }
.fs-service-num {
  flex: none;
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--su-serif);
  font-size: 1.25rem;
  color: var(--su-gold);
  background: linear-gradient(160deg, #0d2444, var(--su-ink));
}
.fs-service h3 {
  font-family: var(--su-serif);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--su-ink);
  line-height: 1.2;
  margin-bottom: 10px;
}
.fs-service p {
  color: var(--color-paragraph);
  font-size: .97rem;
  line-height: 1.65;
}
.fs-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.fs-tag {
  font-size: .78rem;
  font-weight: 600;
  color: var(--su-navy);
  background: var(--su-ivory);
  border: 1px solid var(--su-line);
  padding: 6px 13px;
  border-radius: 999px;
}
.fs-scholar-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 22px;
  display: grid;
  gap: 10px;
}
.fs-scholar-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .96rem;
  color: var(--su-ink);
  font-weight: 500;
}
.fs-scholar-list svg {
  width: 17px; height: 17px;
  color: var(--su-gold);
  flex: none;
}

/* Sponsored band -------------------------------------------- */
.fs-sponsored {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 400px at 90% 10%, rgba(11,31,58,.18), transparent 60%),
    linear-gradient(135deg, #E8C94A 0%, var(--su-gold) 45%, #B8962E 100%);
  padding: clamp(60px, 9vw, 100px) 0;
}
.fs-sponsored::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(11,31,58,.05) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.fs-sponsored-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 40px;
  align-items: center;
}
.fs-sponsored .su-eyebrow { color: #5c4a12; }
.fs-sponsored .su-eyebrow::before { background: #5c4a12; }
.fs-sponsored h2 {
  font-family: var(--su-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  color: #1a1407;
  margin: 16px 0 16px;
}
.fs-sponsored p {
  color: #2c2409;
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 40em;
}
.su-btn-navy {
  background: var(--su-navy);
  color: #fff;
  box-shadow: 0 16px 36px -14px rgba(11,31,58,.6);
}
.su-btn-navy:hover {
  transform: translateY(-2px);
  background: #0d2444;
  box-shadow: 0 22px 46px -16px rgba(11,31,58,.7);
}

/* How it works — 5 steps ------------------------------------ */
.fs-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  counter-reset: step;
}
.fs-step {
  position: relative;
  text-align: center;
  padding-top: 14px;
}
/* connector line */
.fs-step::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(212,175,55,.5) 0 8px, transparent 8px 14px);
  z-index: 0;
}
.fs-step:last-child::before { display: none; }
.fs-step-num {
  position: relative;
  z-index: 1;
  width: 50px; height: 50px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--su-serif);
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(160deg, #0d2444, var(--su-ink));
  border: 2px solid var(--su-gold);
  box-shadow: 0 0 0 6px var(--su-ivory);
}
.fs-step h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--su-ink);
  line-height: 1.3;
}

/* Destinations — 5 cards ------------------------------------ */
.fs-dest {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.fs-dest-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 220px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: linear-gradient(160deg, #1A3A5C, var(--su-ink));
  border: 1px solid var(--su-line);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.fs-dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -28px rgba(11,31,58,.6);
}
.fs-dest-card.is-featured {
  background: linear-gradient(160deg, #0d2444, var(--su-ink));
  border: 1.5px solid var(--su-gold);
  grid-row: span 1;
}
.fs-dest-badge {
  position: absolute;
  top: 16px; right: 16px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1a1407;
  background: var(--su-gold);
  padding: 5px 11px;
  border-radius: 999px;
}
.fs-dest-flag { font-size: 2rem; margin-bottom: auto; }
.fs-dest-name {
  font-family: var(--su-serif);
  font-size: 1.4rem;
  font-weight: 500;
}
.fs-dest-go {
  font-size: .82rem;
  color: var(--su-gold);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Resources — 2 cards --------------------------------------- */
.fs-resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.fs-res-card {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--su-line);
  border-radius: 18px;
  padding: 30px 34px;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fs-res-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 52px -34px rgba(11,31,58,.4);
  border-color: rgba(212,175,55,.5);
}
.fs-res-ico {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--su-ivory);
  border: 1px solid var(--su-line);
  color: var(--su-gold);
}
.fs-res-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fs-res-card h3 {
  font-family: var(--su-serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--su-ink);
  margin-bottom: 4px;
}
.fs-res-card p { font-size: .9rem; color: var(--color-paragraph); }
.fs-res-go { margin-left: auto; color: var(--su-gold); font-size: 1.3rem; flex: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .su-cards.is-4 { grid-template-columns: repeat(2, 1fr); }
  .fs-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .fs-step::before { display: none; }
  .fs-dest { grid-template-columns: repeat(2, 1fr); }
  .fs-dest-card.is-featured { grid-column: 1 / -1; min-height: 180px; }
}
@media (max-width: 860px) {
  .fs-intro { grid-template-columns: 1fr; }
  .fs-services { grid-template-columns: 1fr; }
  .fs-service.is-wide { grid-column: auto; }
  .fs-sponsored-inner { grid-template-columns: 1fr; }
  .fs-resources { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .su-cards.is-4 { grid-template-columns: 1fr; }
  .fs-steps { grid-template-columns: 1fr; }
  .fs-dest { grid-template-columns: 1fr; }
  .fs-service { flex-direction: column; gap: 16px; }
}