/* fellowship.css — page-specific styles for fellowship.html */

/* ================================================================
   SHARED UTILITIES
   ================================================================ */

.fp-section { padding: var(--section-py) 0; }

.fp-inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

.fp-eyebrow {
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  color: var(--c-kicker);
  letter-spacing: var(--ls-kicker);
  margin-bottom: 4px;
  display: block;
}

.fp-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  line-height: 1.15;
  margin-bottom: clamp(20px, 2.8vw, 40px);
}

/* Thin section dividers */
.fp-rule {
  height: 1px;
  background: #E4E4E4;
  margin: 0 var(--page-px);
}

/* ================================================================
   HERO  (grey bg #f7f5f5, two-column: text left, illustration right)
   ================================================================ */

.fp-hero {
  background: var(--c-bg-light);
  padding-top: clamp(32px, 4.0vw, 58px);
}

.fp-hero-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 30px);
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

.fp-hero-left {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: clamp(12px, 3.75vw, 54px);
}

/* Amber dot + org name + programme title row */
.fp-hero-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(14px, 3.5vw, 50px);
}

.fp-hero-dot {
  /* intentionally hidden; amber dot via ::before */
}

.fp-hero-org {
  font-size: 44px;
  font-weight: var(--fw-regular);
  color: var(--c-primary);
  line-height: 1.2;
  position: relative;
  z-index: 0;
}

/* Amber dot overlapping behind the 'D' in "Dr Kasturirangan Trust".
   Figma: dot rx=75 vs text rx=87 → left=−12px; dot ry=221 vs text ry=213 → top=8px. */
.fp-hero-org::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-accent);
  z-index: -1;
  pointer-events: none;
}

.fp-hero-prog {
  font-size: 44px;
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  line-height: 1.2;
}

.fp-hero-bullets {
  list-style: disc;
  padding-left: 28px;
  max-width: 613px;
}

.fp-hero-bullets li {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: #202020;
  line-height: 1.5;
  margin-bottom: 12px;
}

.fp-hero-illus {
  flex: 0 0 clamp(240px, 41.9vw, 603px);
  max-width: clamp(240px, 41.9vw, 603px);
  height: clamp(300px, 33.06vw, 476px);
  align-self: flex-end;
  margin-left: clamp(20px, 3vw, 48px);
}

.fp-hero-illus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

/* Navy full-width banner at bottom of hero */
.fp-hero-banner {
  background: var(--c-primary);
  margin-top: 8px;
  padding: clamp(14px, 1.5vw, 21px) var(--page-px);
}

.fp-hero-banner p {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: var(--fw-bold);
  color: #fff;
  text-align: center;
  max-width: var(--max-w-content);
  margin: 0 auto;
}

/* ================================================================
   NOMINATIONS
   ================================================================ */

.fp-nominations {
  padding: clamp(14px, 1.8vw, 26px) 0 clamp(30px, 3.9vw, 56px);
  background: #f6f6f6;
}

.fp-noms-intro {
  font-size: var(--fs-body-lg);
  color: #202020;
  text-align: center;
  line-height: 1.6;
  /* Figma text box is 1440px (full canvas) — the second line
     "those who knew Dr. Kasturirangan well, and those from selected
     central universities." must fit unbroken at desktop width.
     max-w-content (1324px) gives it room at 1440px. */
  max-width: var(--max-w-content);
  margin: 0 auto clamp(30px, 3.9vw, 56px);
  padding: 0 var(--page-px);
}

/* Two staggered amber pills + connector */
.fp-pills-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--page-px) clamp(30px, 4vw, 56px);
  gap: 0;
  position: relative;
}

.fp-pill {
  background: #e9a22d;
  border-radius: 36px;
  width: fit-content;
  min-height: clamp(60px, 7.5vw, 108px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6px, 0.8vw, 12px) clamp(18px, 2.5vw, 36px);
  flex-shrink: 0;
}

.fp-pill-label {
  font-size: clamp(14px, 1.39vw, 20px);
  font-weight: var(--fw-regular);
  color: #fff;
  line-height: 1.4;
}

.fp-pill-date {
  font-size: clamp(18px, 1.94vw, 28px);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.2;
}

/* Right pill offset downward */
.fp-pill-right {
  margin-top: clamp(28px, 5.2vw, 75px);
}

/* Dashed connector between pills */
.fp-conn-wrap {
  flex: 0 0 clamp(100px, 21.4vw, 308px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(16px, 2.4vw, 36px);
}

.fp-conn-wrap img {
  width: 100%;
  height: auto;
  transform: rotate(-6.89deg);
}

/* ================================================================
   SECTION SUBNAV
   ================================================================ */

.fp-subnav {
  padding: clamp(10px, 1.6vw, 23px) var(--page-px);
}

.fp-subnav-inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  border: 3px solid rgba(217, 217, 217, 0.7);
  border-radius: var(--r-tab-bar);
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: clamp(80px, 7.9vw, 114px);
  padding: 0;
  overflow-x: auto;
}

.fp-snav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px clamp(6px, 1.5vw, 20px);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
  text-align: center;
  line-height: 1.2;
  flex-shrink: 0;
  transition: color 0.15s;
}

.fp-snav-item:hover { color: var(--c-kicker); }

.fp-snav-icon {
  width: clamp(24px, 2.64vw, 38px);
  height: clamp(24px, 2.64vw, 38px);
  object-fit: contain;
}

.fp-snav-div {
  display: block;
  width: 3px;
  min-height: clamp(50px, 5.5vw, 79px);
  background: rgba(217, 217, 217, 0.7);
  flex-shrink: 0;
}

/* ================================================================
   OBJECTIVES
   ================================================================ */

.fp-obj-grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(30px, 3.9vw, 56px);
}

.fp-obj-left {
  flex: 1 1 auto;
  min-width: 0;
}

.fp-text-bullets {
  list-style: disc;
  padding-left: 28px;
}

.fp-text-bullets li {
  font-size: var(--fs-body-lg);
  color: #202020;
  line-height: 1.5;
  margin-bottom: 16px;
}

.fp-obj-photo {
  flex: 0 0 clamp(240px, 33.1vw, 477px);
  max-width: clamp(240px, 33.1vw, 477px);
  border-radius: 45px 45px 0 0;
  overflow: hidden;
}

.fp-obj-photo img {
  width: 100%;
  height: clamp(180px, 22.1vw, 318px);
  object-fit: cover;
  display: block;
}

/* ================================================================
   BENEFITS  (3 amber circles with SVG textPath + white body text)
   ================================================================ */

.fp-circles-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 8.5vw, 120px);
  flex-wrap: nowrap;
}

/* Each circle: label above SVG + body text overlaid via absolute */
.fp-circ {
  position: relative;
  width: clamp(200px, 22vw, 370px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-circ-img { display: block; width: 100%; height: auto; }



.fp-circ-body {
  position: absolute;
  top: 16%;
  left: 16%;
  right: 16%;
  bottom: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  font-family: var(--font-main);
}

.fp-circ-body p { margin: 0; }

/* Mentorship PNG has more label-text height (~19% vs ~15%), so push body down */
.fp-circ:nth-child(2) .fp-circ-body { top: 23%; }

/* ================================================================
   EXPECTATIONS
   ================================================================ */

.fp-exp-grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.9vw, 56px);
}

/* Fellow photo column */
.fp-exp-photo {
  flex: 0 0 clamp(180px, 27.4vw, 394px);
  border-radius: var(--r-exp-port);
  overflow: hidden;
  align-self: stretch;
  min-height: clamp(240px, 39.7vw, 572px);
}

.fp-exp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Right column: header + 4 rows */
.fp-exp-right { flex: 1 1 auto; min-width: 0; }

/* Each row: amber bullet circle (relative-positioned) + cream text box */
.fp-exp-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(8px, 1.2vw, 16px);
}

.fp-exp-bullet {
  position: relative;
  flex-shrink: 0;
  width: clamp(55px, 9.44vw, 136px);
  height: clamp(55px, 9.44vw, 136px);
  margin-right: clamp(-42px, -2.9vw, -17px);
  z-index: 2;
}

.fp-exp-circ { display: block; width: 100%; height: auto; }

.fp-exp-icon {
  position: absolute;
  inset: 0;
  width: 42%;
  height: 42%;
  margin: auto;
  object-fit: contain;
  display: block;
}

.fp-exp-text {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  background: var(--c-bg-cream);
  border-radius: var(--r-exp-row);
  padding: clamp(10px, 1.4vw, 20px) clamp(12px, 2vw, 28px) clamp(10px, 1.4vw, 20px) clamp(30px, 4vw, 57px);
  font-size: var(--fs-body-lg);
  color: #202020;
  line-height: 1.45;
}

/* ================================================================
   ELIGIBILITY  (3 cream boxes, proportional widths 490:317:396)
   ================================================================ */

.fp-elig-row {
  display: flex;
  gap: clamp(12px, 1.7vw, 24px);
  flex-wrap: wrap;
  align-items: stretch;
}

.fp-elig-box {
  background: var(--c-bg-cream);
  border-radius: var(--r-elig-box);
  padding: clamp(16px, 2.5vw, 36px) clamp(14px, 1.9vw, 28px);
  font-size: var(--fs-body-lg);
  color: #202020;
  line-height: 1.5;
  flex: 317 1 160px;   /* base ratio = narrowest box */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: break-word;
}

.fp-elig-box:nth-child(1) { flex: 490 1 200px; }  /* widest */
.fp-elig-box:nth-child(3) { flex: 396 1 180px; }  /* medium */
.fp-elig-box strong { font-weight: var(--fw-bold); }

.fp-elig-row-b { margin-top: clamp(12px, 1.7vw, 24px); justify-content: center; }
.fp-elig-row-b .fp-elig-box { flex: 490 1 200px; max-width: 530px; }

/* ================================================================
   REVIEW PROCESS  (4 navy circles, arrows between)
   ================================================================ */

/* Wider container for the review row so 4×280px circles + 3×39px arrows fit at 1440px */
.fp-review-inner {
  max-width: var(--max-w-page);
  margin: 0 auto;
  padding: 0 21px;
}

.fp-review-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* clamp tracks container: at 1440px = 310px; scales below so row never overflows.
   No overflow:hidden/border-radius on the wrapper — the PNG already looks circular
   (navy circle on white bg); white corners blend with the white section background.
   Text body overlays the navy zone without being clipped to the circle edge. */
.fp-rcirc {
  position: relative;
  width: clamp(220px, calc(25vw - 35px), 310px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-rcirc-img { display: block; width: 100%; height: auto; }

/* Anchored at navy circle center (175.1px / 310px = 56.5%) so text always
   centers on the circle regardless of line count. left/right 13% keeps lines
   short enough that the first wrapped line of "A distinguished…" stays within
   the navy zone at that y position. */
.fp-rcirc-body {
  position: absolute;
  top: 56.5%;
  transform: translateY(-50%);
  left: 13%;
  right: 13%;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  font-family: var(--font-main);
}

@media (max-width: 1439px) {
  .fp-rcirc-body { font-size: 19px; line-height: 1.3; }
}
@media (max-width: 1323px) {
  .fp-rcirc-body { font-size: 17px; line-height: 1.3; }
}

.fp-rcirc-body p { margin: 0; width: 100%; }

/* Announcement date: inline amber badge that travels with the text */
.fp-announce-date {
  display: inline-block;
  background: #ffb338;
  border-radius: 6px;
  padding: 1px 8px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.fp-review-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ================================================================
   TIMELINE
   ================================================================ */

/* Grid: date-col | dot-col | label-col, repeated per row */
.fp-tl-wrap {
  display: grid;
  grid-template-columns: clamp(80px, 20.8vw, 300px) clamp(22px, 2.4vw, 35px) 1fr;
  grid-auto-rows: auto;
  column-gap: clamp(14px, 2.5vw, 36px);
  row-gap: clamp(36px, 5vw, 72px);
  position: relative;
}

/* Vertical line runs through the dot column */
.fp-tl-wrap::before {
  content: '';
  position: absolute;
  /* Center of dot column = left-col + (dot-col / 2) */
  left: calc(clamp(80px, 20.8vw, 300px) + clamp(14px, 2.5vw, 36px) + calc(clamp(22px, 2.4vw, 35px) / 2));
  top: calc(clamp(22px, 2.4vw, 35px) / 2);
  bottom: calc(clamp(22px, 2.4vw, 35px) / 2);
  width: 6px;
  background: #FFB338;
  transform: translateX(-50%);
  z-index: 0;
}

.fp-tl-date {
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: #2A427E;
  text-align: right;
  line-height: 1.2;
  align-self: center;
}

.fp-tl-dot {
  width: clamp(22px, 2.4vw, 35px);
  height: clamp(22px, 2.4vw, 35px);
  border-radius: 50%;
  background: #FFB338;
  justify-self: center;
  align-self: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Play icon replaces dot on last item */
.fp-tl-dot-play {
  background: none;
  border-radius: 0;
  width: clamp(22px, 2.4vw, 35px);
  height: clamp(22px, 2.4vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  margin-left: calc(clamp(22px, 2.4vw, 35px) / 2 - 6px);
}

.fp-tl-dot-play img { width: 100%; height: auto; object-fit: contain; }

.fp-tl-label {
  font-size: 24px;
  font-weight: var(--fw-regular);
  color: #202020;
  line-height: 1.3;
  align-self: center;
}

/* ================================================================
   APPLICATION
   ================================================================ */

/* Navy left banner (rounded only on right side) */
.fp-app-banner {
  background: var(--c-primary);
  border-radius: 0 26px 26px 0;
  width: fit-content;
  max-width: clamp(300px, 90vw, 1100px);
  padding: clamp(12px, 1.5vw, 22px) clamp(20px, 3.2vw, 46px);
  margin-bottom: clamp(20px, 2.8vw, 40px);
}

.fp-app-banner p {
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.3;
}

/* Amber-bordered box */
.fp-app-box {
  border: 4px solid var(--c-amber-border);
  border-radius: 27px;
  max-width: clamp(300px, 66.8vw, 962px);
  margin: 0 auto;
  padding: clamp(20px, 3.5vw, 50px) clamp(16px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
}

.fp-app-intro {
  font-size: 24px;
  font-weight: var(--fw-medium);
  color: #202020;
  text-align: center;
  line-height: 1.5;
  max-width: 710px;
  margin: 0 auto clamp(16px, 2.5vw, 36px);
}

.fp-app-intro strong { font-weight: var(--fw-bold); }

/* Carousel wrapper: arrows outside the card on each side */
.fp-app-carousel-wrap {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
  background: #F6F6F6;
}

.fp-app-carousel-wrap .fp-app-box { flex: 1 1 auto; min-width: 0; }

/* Dots row below the card */
.fp-carousel-dots {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  justify-content: center;
  margin-top: clamp(14px, 2vw, 28px);
}

/* Documents: carousel — one slide at a time */
.fp-app-docs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fp-app-doc-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
}

.fp-doc-hidden { display: none; }

/* Tip/note text below icon+text row */
.fp-doc-tip {
  font-style: italic;
  font-size: 24px;
  color: #202020;
  margin: clamp(12px, 1.5vw, 24px) 0 0;
  line-height: 1.5;
}

.fp-doc-img {
  width: clamp(160px, 21.7vw, 313px);
  height: clamp(120px, 17.4vw, 250px);
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.fp-doc-text {
  flex: 1 1 auto;
  font-size: 24px;
  font-weight: var(--fw-medium);
  color: #D9982E;
  line-height: 1.4;
}

.fp-doc-sub { color: var(--c-amber-border); }

.fp-carousel-btn {
  width: clamp(36px, 4.24vw, 61px);
  height: clamp(36px, 4.24vw, 61px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.fp-carousel-btn img { width: 100%; height: auto; }

.fp-dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(42, 66, 126, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.fp-dot-active { background: var(--c-primary); }

/* CTA area: graphic + button */
.fp-app-cta-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
  margin: clamp(24px, 3.5vw, 50px) auto 0;
}

.fp-disclaimer {
  position: relative;
  width: 481px;
  height: 153px;
  margin: 0 auto;
}
.fp-disclaimer-rocket {
  position: absolute;
  left: 0;
  top: 0;
  width: 222px;
  height: 153px;
  object-fit: contain;
}
.fp-disclaimer-text {
  position: absolute;
  left: 31px;
  top: 70px;
  width: 450px;
  margin: 0;
  font-family: var(--font-main);
  font-size: 24px;
  color: #2A427E;
  line-height: 1.35;
  text-align: center;
}

.fp-cta-btn {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  font-size: clamp(16px, 1.6vw, 23px);
  font-weight: var(--fw-regular);
  font-family: var(--font-main);
  border-radius: var(--r-cta-btn);
  padding: clamp(8px, 0.8vw, 12px) clamp(20px, 2.5vw, 36px);
  min-width: clamp(160px, 16vw, 230px);
  text-align: center;
  transition: background 0.15s;
}

.fp-cta-btn:hover { background: var(--c-primary-dark); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {
  .fp-hero-grid { flex-direction: column-reverse; align-items: center; }
  .fp-hero-illus { flex: none; max-width: 380px; width: 80%; }
  .fp-obj-grid { flex-direction: column-reverse; }
  .fp-obj-photo { max-width: 100%; flex: none; }
  .fp-exp-grid { flex-direction: column; }
  .fp-exp-photo { max-width: 280px; flex: none; min-height: 320px; }
  .fp-review-arrow svg { width: 28px; height: 28px; }
}

@media (max-width: 680px) {
  .fp-pills-wrap { flex-direction: column; align-items: center; }
  .fp-pill-right { margin-top: 0; }
  .fp-conn-wrap { transform: rotate(90deg); flex: none; width: 100px; height: 80px; }
  .fp-review-row { flex-direction: column; align-items: center; }
  .fp-review-arrow { transform: rotate(90deg); }
  .fp-circles-row { justify-content: center; }
  .fp-snav-item { font-size: 14px; padding: 8px 5px; }
  .fp-snav-icon { width: 22px; height: 22px; }
  .fp-snav-div { min-height: 44px; }
  .fp-tl-wrap { grid-template-columns: clamp(70px, 15vw, 120px) 24px 1fr; }
  .fp-tl-date { font-size: clamp(14px, 3vw, 24px); }
  .fp-tl-label { font-size: clamp(14px, 3vw, 24px); }
  .fp-app-doc-row { flex-direction: column; align-items: flex-start; }
  .fp-doc-img { width: 100%; height: 180px; }
  .fp-elig-row { flex-direction: column; }
}