/* =========================================================
   IIMA Alumni Connect — single global stylesheet
   Clean · minimal · institutional
   ========================================================= */

:root{
  --navy:   #1B2F6E;      /* IIMA institutional blue  */
  --navy-2: #14245a;
  --red:    #A40000;      /* IIMA brick red — used sparingly */
  --ink:    #101828;
  --muted:  #667085;
  --line:   #e7eaf0;
  --bg:     #f7f8fb;
  --card:   #ffffff;
  --radius: 14px;
}

*{ box-sizing:border-box; }

body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--navy); text-decoration:none; }
a:hover{ color:var(--navy-2); }

/* ---------- Navbar ---------- */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:1030;
}
.topbar .navbar-brand img{ height:44px; }
.topbar .brand-text{ line-height:1.1; }
.topbar .brand-text .t1{ font-weight:800; font-size:15px; color:var(--navy); letter-spacing:.2px; }
.topbar .brand-text .t2{ font-size:11px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; }
.topbar .nav-link{
  color:#3a4356; font-weight:600; font-size:13.5px;
  padding:.55rem .8rem !important; border-radius:8px;
}
.topbar .nav-link:hover{ color:var(--navy); background:#f2f5fb; }
.topbar .nav-link.active{ color:var(--navy); background:#eef2fa; }
.btn-login{
  background:var(--navy); color:#fff !important; font-weight:700;
  border-radius:9px; padding:.5rem 1.15rem; font-size:13.5px; border:0;
}
.btn-login:hover{ background:var(--navy-2); }

/* ---------- Buttons ---------- */
.btn-navy{ background:var(--navy); border:0; color:#fff; font-weight:600; border-radius:10px; }
.btn-navy:hover{ background:var(--navy-2); color:#fff; }
.btn-soft{ background:#eef2fa; border:0; color:var(--navy); font-weight:600; border-radius:10px; }
.btn-soft:hover{ background:#e0e8f6; color:var(--navy-2); }
.btn-outline-navy{ border:1.5px solid var(--navy); color:var(--navy); font-weight:600; border-radius:10px; background:transparent; }
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff;
  background:linear-gradient(rgba(16,24,40,.62), rgba(27,47,110,.72)), url('../../images/IIMA-BG.jpg') center/cover no-repeat;
  padding:110px 0 120px;
}
.hero h1{ font-weight:800; font-size:clamp(2rem, 4.4vw, 3.3rem); letter-spacing:-.5px; line-height:1.12; }
.hero p.lead{ color:#dbe2f2; font-size:1.06rem; max-width:640px; }
.hero .stat-strip{ margin-top:42px; }
.hero .stat{ border-left:3px solid rgba(255,255,255,.35); padding-left:16px; }
.hero .stat b{ display:block; font-size:1.7rem; font-weight:800; }
.hero .stat span{ color:#c4cee8; font-size:.83rem; letter-spacing:.4px; text-transform:uppercase; }

/* ---------- Sections ---------- */
.section{ padding:72px 0; }
.section.alt{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kicker{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--red); margin-bottom:10px;
}
.section-title{ font-weight:800; font-size:1.75rem; letter-spacing:-.4px; margin-bottom:6px; }
.section-sub{ color:var(--muted); max-width:620px; }

/* ---------- Cards ---------- */
.cardx{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  transition:box-shadow .18s ease, transform .18s ease;
}
.cardx:hover{ box-shadow:0 12px 32px rgba(16,24,40,.08); transform:translateY(-2px); }

/* Event card */
.event-card .date-chip{
  min-width:58px; text-align:center; background:#eef2fa; border-radius:10px; padding:8px 6px;
}
.event-card .date-chip .d{ font-size:1.35rem; font-weight:800; color:var(--navy); line-height:1; }
.event-card .date-chip .m{ font-size:.72rem; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:1px; }
.event-card h6{ font-weight:700; margin-bottom:2px; }
.event-card .meta{ color:var(--muted); font-size:.83rem; }

/* Horizontal scroller (events & reunions) */
.hscroll{ display:flex; gap:18px; overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x mandatory; }
.hscroll::-webkit-scrollbar{ height:8px; }
.hscroll::-webkit-scrollbar-thumb{ background:#d5dbe8; border-radius:8px; }
.hscroll > *{ flex:0 0 330px; scroll-snap-align:start; }

/* Announcement list */
.ann-item{ padding:18px 0; border-bottom:1px solid var(--line); }
.ann-item:last-child{ border-bottom:0; }
.ann-item .badge-cat{
  font-size:.68rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  background:#fdf0f0; color:var(--red); border-radius:6px; padding:4px 9px;
}
.ann-item .badge-cat.news{ background:#eef2fa; color:var(--navy); }
.ann-item h6{ font-weight:700; margin:8px 0 4px; }
.ann-item p{ color:var(--muted); font-size:.88rem; margin:0; }
.ann-item .when{ color:#98a2b3; font-size:.78rem; }

/* Distinguished alumni */
.dist-section{ background:var(--navy); color:#fff; }
.dist-section .kicker{ color:#ffb4b4; }
.dist-section .section-sub{ color:#c4cee8; }
/* auto-scrolling strip: the track holds the card list twice and slides
   half its own width, so the loop is seamless; hover pauses it */
.dist-scroller{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dist-track{
  display:flex; gap:22px; width:max-content;
  animation:dist-slide 40s linear infinite;
}
.dist-track:hover{ animation-play-state:paused; }
@keyframes dist-slide{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 11px)); }   /* half the track + half one gap */
}
.dist-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); text-align:center; padding:28px 20px;
  flex:0 0 250px;
}
.dist-card img{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,.85); margin-bottom:16px;
}
.dist-card .nm{ font-weight:700; font-size:1.02rem; }
.dist-card .cap{ color:#c4cee8; font-size:.84rem; margin-top:3px; }

/* Chapters */
.chapter-card{ overflow:hidden; }
.chapter-card img{ width:100%; height:150px; object-fit:cover; }
.chapter-card .body{ padding:16px 18px; }
.chapter-card .nm{ font-weight:700; }
.chapter-card .rg{ color:var(--muted); font-size:.83rem; }

/* FAQ */
.accordion-item{ border:1px solid var(--line) !important; border-radius:12px !important; margin-bottom:10px; overflow:hidden; }
.accordion-button{ font-weight:600; font-size:.95rem; background:#fff; box-shadow:none !important; }
.accordion-button:not(.collapsed){ background:#eef2fa; color:var(--navy); }

/* Get in touch */
.contact-card{ padding:22px; height:100%; }
.contact-card .role{ font-size:.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--red); }
.contact-card .nm{ font-weight:700; margin:6px 0 2px; }
.contact-card .dt{ color:var(--muted); font-size:.87rem; }

/* ---------- Page header band (inner pages) ---------- */
.page-band{
  background:var(--navy); color:#fff; padding:44px 0 40px;
}
.page-band h2{ font-weight:800; letter-spacing:-.4px; margin:0; }
.page-band p{ color:#c4cee8; margin:6px 0 0; }

/* ---------- Directory ---------- */
.person-card{ padding:20px; display:flex; gap:14px; align-items:center; }
.person-card img{ width:58px; height:58px; border-radius:50%; object-fit:cover; }
.person-card .nm{ font-weight:700; }
.person-card .sub{ color:var(--muted); font-size:.84rem; }

/* ---------- Corner (feed) ---------- */
.post-card{ padding:20px 22px; margin-bottom:18px; }
.post-card img.avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.post-card .who{ font-weight:700; }
.post-card .when{ color:#98a2b3; font-size:.78rem; }
.post-card .content{ margin:12px 0; white-space:pre-wrap; }
.post-card img.attach{ max-width:100%; border-radius:12px; border:1px solid var(--line); }
.post-actions button{
  background:none; border:0; color:var(--muted); font-weight:600; font-size:.85rem;
}
.post-actions button:hover{ color:var(--navy); }
.post-actions button.liked{ color:var(--red); }

/* ---------- Profile ---------- */
.profile-hero{ background:var(--navy); padding:40px 0 88px; }
.profile-card{ margin-top:-64px; }
.avatar-wrap{ position:relative; width:132px; }
.avatar-wrap img{
  width:132px; height:132px; border-radius:50%; object-fit:cover;
  border:4px solid #fff; box-shadow:0 6px 18px rgba(16,24,40,.15);
}
.avatar-wrap .cam{
  position:absolute; right:2px; bottom:6px; width:36px; height:36px; border-radius:50%;
  background:var(--navy); color:#fff; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.info-row{ display:flex; padding:9px 0; border-bottom:1px dashed var(--line); font-size:.92rem; }
.info-row:last-child{ border-bottom:0; }
.info-row .k{ width:150px; color:var(--muted); flex-shrink:0; }
.info-row .v{ font-weight:600; word-break:break-word; }

.entry-row .entry-actions{ opacity:.35; transition:opacity .15s; }
.entry-row:hover .entry-actions{ opacity:1; }

.gallery-tabs .nav-link{
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
  font-weight:600; font-size:.83rem; padding:.35rem 1rem; margin-right:8px; background:#fff;
}
.gallery-tabs .nav-link.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.gallery-grid img{
  width:100%; height:170px; object-fit:cover; border-radius:12px;
  border:1px solid var(--line); cursor:pointer; transition:transform .15s;
}
.gallery-grid img:hover{ transform:scale(1.02); }

/* I-Card */
.icard{
  width:340px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:#fff; margin:0 auto; box-shadow:0 10px 30px rgba(16,24,40,.12);
}
.icard .head{ background:var(--navy); color:#fff; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.icard .head img{ height:30px; background:#fff; border-radius:6px; padding:2px; }
.icard .head .t{ font-size:.8rem; font-weight:700; letter-spacing:.4px; }
.icard .bd{ display:flex; gap:14px; padding:16px; }
.icard .bd img.ph{ width:92px; height:92px; border-radius:10px; object-fit:cover; border:1px solid var(--line); }
.icard .bd .nm{ font-weight:800; font-size:1rem; }
.icard .bd .dt{ font-size:.8rem; color:var(--muted); }
.icard .ft{ border-top:1px dashed var(--line); padding:10px 16px; font-size:.72rem; color:var(--muted); display:flex; justify-content:space-between; align-items:center; }
.icard .ft .strip{ height:8px; width:70px; background:var(--red); border-radius:4px; }

/* ---------- Accommodation ---------- */
.acc-card img.ph{ width:100%; height:170px; object-fit:cover; border-radius:12px 12px 0 0; }
.acc-card .body{ padding:16px 18px; }
.acc-card .rent{ font-weight:800; color:var(--navy); }
.badge-offer{ background:#e8f5ee; color:#177245; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.6px; border-radius:6px; padding:4px 9px; }
.badge-need{ background:#fdf0f0; color:var(--red); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.6px; border-radius:6px; padding:4px 9px; }

/* ---------- Map ---------- */
#worldmap{ height:420px; border-radius:var(--radius); border:1px solid var(--line); z-index:1; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  border-radius:10px; border:1px solid #d7dce6; padding:.6rem .85rem; font-size:.92rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--navy); box-shadow:0 0 0 .2rem rgba(27,47,110,.12);
}
label.form-label{ font-weight:600; font-size:.85rem; color:#344054; }

/* ---------- Footer ---------- */
footer.site{
  background:#101828; color:#98a2b3; padding:54px 0 24px; margin-top:0;
}
footer.site h6{ color:#fff; font-weight:700; font-size:.9rem; letter-spacing:.6px; text-transform:uppercase; margin-bottom:16px; }
footer.site a{ color:#98a2b3; display:block; padding:4px 0; font-size:.88rem; }
footer.site a:hover{ color:#fff; }
footer.site .bottom{ border-top:1px solid #1f2937; margin-top:36px; padding-top:18px; font-size:.8rem; }

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height:calc(100vh - 260px); display:flex; align-items:center; padding:60px 0; }
.auth-card{ max-width:440px; margin:0 auto; padding:36px; }

/* ---------- Misc ---------- */
.empty{ text-align:center; color:var(--muted); padding:46px 0; }
.modal-content{ border-radius:16px; border:0; }
.modal-header{ border-bottom:1px solid var(--line); }
.modal-title{ font-weight:700; font-size:1.02rem; }

@media (max-width: 576px){
  .section{ padding:52px 0; }
  .hero{ padding:80px 0 90px; }
  .hscroll > *{ flex-basis:290px; }
}

/* =========================================================
   v5 additions
   ========================================================= */

/* Navbar dropdowns */
.topbar .dropdown-menu{
  border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 14px 34px rgba(16,24,40,.12); font-size:.88rem;
}
.topbar .dropdown-item{ border-radius:8px; padding:.5rem .8rem; font-weight:600; color:#3a4356; }
.topbar .dropdown-item:hover{ background:#eef2fa; color:var(--navy); }

/* Beta version badge in the top menu */
.beta-badge{
  display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.09em;
  color:#8a6d00; background:#fff3cd; border:1px solid #f0d98a;
  padding:3px 9px; border-radius:999px; text-transform:uppercase; line-height:1;
}

/* Progress bar shown while an OTP / password-reset email is being sent */
.mail-progress{ height:6px; background:#e6ebf5; border-radius:6px; overflow:hidden; }
.mail-progress .bar{ height:100%; width:0; background:var(--navy); animation:mailfill 2.4s ease-out forwards; }
@keyframes mailfill{ 0%{ width:0; } 75%{ width:85%; } 100%{ width:95%; } }

/* Hero video frame (auto-plays on load, muted, loops) */
.hero-video{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 18px 44px rgba(0,0,0,.35);
  aspect-ratio:16/9; background:#000;
}
.hero-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.hero-video .vposter{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(rgba(16,24,40,.35), rgba(27,47,110,.55)), url('../../images/IIMA-BG.jpg') center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#fff; text-align:center; transition:opacity .4s ease;
}
.hero-video .vposter .play{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.hero-video .vposter b{ font-size:.95rem; letter-spacing:.3px; }
.hero-video .vposter span{ font-size:.75rem; color:#dbe2f2; }
/* poster fades out as soon as the video is ready (it now auto-plays, no hover needed) */
.hero-video.ready .vposter{ opacity:0; pointer-events:none; }

/* Horizontal scroller with arrow controls (events / chapters / YAAA) */
.scroller-wrap{ position:relative; }
.scroller-wrap .hscroll{ scroll-behavior:smooth; outline:none; }
.scroll-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--navy); font-size:1.05rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 22px rgba(16,24,40,.14); transition:background .15s;
}
.scroll-arrow:hover{ background:var(--navy); color:#fff; }
.scroll-arrow.left{ left:-14px; }
.scroll-arrow.right{ right:-14px; }
.scroller-hint{ font-size:.74rem; color:#98a2b3; }

/* chapter cards inside a scroller */
.hscroll .chapter-card{ width:100%; }
.hscroll-sm > *{ flex:0 0 250px; }

/* YAAA strip cards */
.yaaa-card{ text-align:center; padding:22px 16px; }
.yaaa-card img{
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid #eef2fa; margin-bottom:12px;
}
.yaaa-card .nm{ font-weight:700; font-size:.95rem; }
.yaaa-card .ct{ display:inline-block; margin-top:6px; font-size:.68rem; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; background:#fdf0f0; color:var(--red); border-radius:6px; padding:3px 9px; }
.yaaa-card .bt{ color:var(--muted); font-size:.8rem; margin-top:4px; }
.yaaa-year-chip{
  display:inline-block; background:#eef2fa; color:var(--navy); font-weight:800;
  border-radius:999px; padding:6px 18px; font-size:.9rem;
}

/* Event category badges (Campus Summit / Chapter / SARC) */
.badge-summit { background:var(--navy); color:#fff;    font-size:.65rem; font-weight:700; letter-spacing:.6px; border-radius:6px; padding:4px 9px; text-transform:uppercase; }
.badge-chapev { background:#e8f5ee;    color:#177245; font-size:.65rem; font-weight:700; letter-spacing:.6px; border-radius:6px; padding:4px 9px; text-transform:uppercase; }
.badge-sarcev { background:#fff8e0;    color:#8a6d00; font-size:.65rem; font-weight:700; letter-spacing:.6px; border-radius:6px; padding:4px 9px; text-transform:uppercase; }

/* Dashboard (post-login home) */
.dash-cover{ height:64px; border-radius:14px 14px 0 0; background:linear-gradient(120deg, var(--navy), #2b80d0); }
.dash-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid #fff; margin-top:-32px; }
.dash-quick a{ font-size:.9rem; }

/* Résumé view */
.resume-sheet{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:44px 48px; max-width:860px; margin:0 auto; }
.resume-sheet h3{ font-weight:800; letter-spacing:-.4px; margin-bottom:2px; }
.resume-sheet .rs-head{ display:flex; gap:24px; align-items:flex-start; border-bottom:2px solid var(--navy); padding-bottom:22px; margin-bottom:22px; }
.resume-sheet .rs-head img{ width:110px; height:130px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.resume-sheet h6.rs-sec{ font-weight:800; text-transform:uppercase; letter-spacing:1.2px; font-size:.78rem; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:6px; margin:22px 0 12px; }
@media print{
  .topbar, footer.site, .no-print{ display:none !important; }
  .resume-sheet{ border:0; padding:0; max-width:100%; }
  body{ background:#fff; }
}