/* Figma 2561:8153 — Building India Conclave UI revamp.
   Visual layer only: loaded last, it restyles the existing markup and leaves
   every animation, transition and script-driven interaction untouched. */
:root {
    --navy: #00123a;
    --navy-2: #073763;
    --gold: #f5b123;
    --body-copy: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --arimo: Arimo, Arial, sans-serif;
}
body { background: #faf8f7; }

/* Shared decorative dot map; sits behind each section's content. */
.map-pattern {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 426px;
    height: 530px;
    max-width: none;
    object-fit: cover;
    opacity: .05;
    pointer-events: none;
}

/* ===== Header ===== */
/* Logo and Contact Us follow the About page (site-shell.css + conclave-design.css). */
/* Same logo/navbar edge as site-shell.css --header-edge (this page doesn't load site-shell). */
:root { --header-edge: max(80px, calc((100% - 1280px) / 2)); }
@media (max-width: 1199px) { :root { --header-edge: 40px; } }
@media (max-width: 767px) { :root { --header-edge: 20px; } }
.site-header { left: var(--header-edge); width: calc(100% - 2 * var(--header-edge)); }
.site-header nav { padding-top: 16px; font-size: 14px; line-height: 1.48; font-weight: 500; }
#main-nav > a:not(.contact-button), #main-nav .work-toggle { color: #f2f2f7; }
.site-header #main-nav .contact-button { line-height: 21px; }
.site-header #main-nav .contact-button:hover { background: #e39e0e; }

/* ===== Hero ===== */
.hero {
    height: 640px;
    min-height: 640px;
    padding: 80px 0;
    align-items: center;
    background-position: center;
}
/* Each slide layer has two gradients plus the photo; size all three explicitly
   so the photo covers the hero like Figma's object-cover. */
.hero-background { background-size: cover; background-position: center; }
.hero .hero-back-link { top: 169px; }
/* Same back link as the Impact Chapter page (impact-chapter.css) */
.hero-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 14px/21px Helvetica, 'Helvetica Neue', Arial, sans-serif;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease, transform 0.2s ease;
}
.hero-back-link a:hover {
    color: var(--gold);
    transform: translateX(-3px);
}
.hero h1 { font: 400 55px/1.1 'DM Serif Display', Georgia, serif; color: #fff; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-tagline {
    margin-top: 16px;
    font: italic 400 18px/1.48 var(--text-serif);
    letter-spacing: .18px;
    color: #d1d1d6;
}
.hero-tagline em,
.hero[data-active-slide] .hero-tagline em { margin: 0; color: inherit; font-style: inherit; }
.hero-description { margin-top: 24px; font-size: 18px; line-height: 1.5; font-weight: 500; color: #fff; }

/* ===== Building India Conclave 2027 ===== */
.overview.container {
    position: relative;
    isolation: isolate;
    max-width: 1206px;
    padding: 59px 0 42px;
}
/* Figma 2561:8164 background, full-bleed behind the 1206px container (main clips the overflow). */
.overview.container::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: linear-gradient(129.03deg, #fdf8f6 0.96%, #d6e4f2 98.42%), #faf8f7;
    pointer-events: none;
}
.overview > .map-pattern { left: calc(50% - 50vw); top: -2px; }
.overview > :not(.map-pattern) { position: relative; z-index: 1; }
.overview h2 {
    margin: 0 0 10px;
    font: 400 38px/46px var(--text-serif);
    color: #18212d;
}
.overview .intro {
    max-width: 860px;
    font-size: 18px;
    line-height: 1.48;
    font-weight: 500;
    color: #627185;
}
.conclave-timeline-scroll { margin-top: 44px; padding: 0; }
.conclave-timeline { grid-template-columns: 558fr 584fr; gap: 64px; }
.conclave-timeline-step { gap: 23px; }
.conclave-timeline-marker {
    width: 42px;
    height: 42px;
    background: var(--navy);
    font: 400 16px/1.2 var(--text-serif);
}
.conclave-timeline-step article { gap: 16px; }
.conclave-timeline-step .date { font: 400 13px/20px var(--arimo); color: #14243a; }
.conclave-timeline-step .date span { color: #808080; }
.conclave-timeline-step h3 { font: 400 28px/34px var(--text-serif); color: #e7470b; }
.conclave-timeline-step article > p:not(.date) { font: 400 15px/23px var(--arimo); color: #14243a; }

/* ===== Conclave 2026: The Inaugural Edition ===== */
.looking-back { background: var(--navy); padding: 64px 0; }
.recap { grid-template-columns: 580px minmax(0, 1fr); gap: 64px; }
.recap h2 { margin: 0 0 24px; font: 400 45px/1.2 var(--text-serif); color: #fff; }
.recap > div > p:last-child { font-size: 16px; line-height: 1.6; color: #a0aec0; }
.stats { gap: 16px; }
.stats > div { gap: 8px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.stats .stat-icon { display: block; width: 24px; height: 24px; }
.stats strong { font: 400 32px/1.3 var(--text-serif); color: #0d1b2a; }
.stats strong[data-suffix]::after { content: attr(data-suffix); color: #f34a16; }
.stats small { font-size: 11px; font-weight: 500; line-height: normal; color: #718096; }

/* ===== Panel Discussions ===== */
.conclave-panels {
    padding: 115px 0 120px;
    overflow: hidden;
    background: linear-gradient(113.42deg, #fdf8f6 0.96%, #d6e4f2 98.42%);
}
.conclave-panels::before { content: none; }
.conclave-panels > .map-pattern { left: auto; right: 0; top: -8px; width: 536px; height: 668px; z-index: -1; }
.panel-glow { position: absolute; z-index: -1; max-width: none; pointer-events: none; }
.panel-glow-orange { left: -250px; top: 0; width: 700px; height: 700px; }
.panel-glow-teal { left: calc(50% + 160px); top: 180px; width: 840px; height: 840px; }
.conclave-panels .panel > .row:first-child { margin-bottom: 40px; }
.panel-heading { font: 400 45px/1.2 var(--text-serif); color: #151c28; }
.panel-subheading2 {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.48;
    font-weight: 500;
    letter-spacing: .18px;
    color: #8e8e93;
}
.panel-tabs-container { gap: 32px; }
.panel-tab-card {
    min-height: 131px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 18px rgba(18, 37, 73, .06);
}
.panel-tab-card > .d-flex { align-items: center; }
.panel-tab-arrow svg { display: block; }
.panel-tab-num { font: 400 30px/1.2 var(--text-serif); color: #6a7181; }
.panel-tab-title { margin-top: 16px; font-size: 16px; line-height: 1.2; font-weight: 500; color: #122549; }
.panel-detail-card { height: auto; min-height: 620px; border-radius: 20px; }
.panel-detail-img-wrapper { height: 236px; }
.panel-detail-img-wrapper::after {
    background: linear-gradient(180deg, rgba(0, 7, 12, 0) 22.881%, #052c50 108.26%), rgba(0, 0, 0, .2);
}
#panel-detail-image { object-fit: cover; object-position: center; }
.panel-detail-body { padding: 20px 45px 48px; }
.panel-badge {
    min-width: 89px;
    margin-bottom: 20px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .48px;
    text-align: center;
    color: #073763;
    background: #d6e6f5;
}
.panel-detail-heading {
    margin-bottom: 12px;
    font: italic 400 28px/1.2 var(--text-serif);
    color: #1b1c1e;
}
.panel-detail-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .32px;
    text-align: justify;
    color: #6a7181;
}
.panel-divider { margin: 20px 0 40px; border: 0; border-top: 1px solid #e2e4e9; opacity: 1; }
.moderator-section { display: flex; align-items: center; gap: 16px; }
.moderator-avatar {
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    object-fit: cover;
    border: 1px solid #6081a4;
    border-radius: 50%;
    background: #fff;
}
.moderator-label {
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 3.22px;
    color: #6a7181;
}
.moderator-info { font-size: 18px; line-height: 1.2; font-weight: 500; color: #151c28; }
.moderator-info .fw-bold { font-weight: inherit; }

/* ===== Gallery ===== */
.snapshots { padding: 80px 0; background: linear-gradient(90deg, var(--navy), var(--navy-2)); }
.snapshots h2 { margin: 0 0 12px; font: 400 40px/normal var(--text-serif); }
.snapshots h2 + p { font-size: 16px; line-height: normal; color: #a0aec0; }
.gallery { margin-top: 40px; }
.gallery .snapshot-frame:nth-child(n) { height: 320px; background: #e7e5e4; }
.gallery .snapshot-frame img { object-fit: cover; object-position: center top; }
/* Figma crops this photo 557×344 inside its 409×320 frame, offset -105.7px. */
.gallery .snapshot-frame.snapshot-zoomed img {
    width: 136.14%;
    height: 107.5%;
    max-width: none;
    margin-left: -25.84%;
}

/* ===== What Students Took Back Home ===== */
.testimonials {
    position: relative;
    isolation: isolate;
    min-height: 759px;
    padding: 80px 24px;
    background: linear-gradient(119.41deg, #fdf8f6 0.96%, #d6e4f2 98.42%);
}
.testimonials > .map-pattern { z-index: -1; width: 434px; height: 541px; }
.testimonials h2 { margin-top: 19px; font: 400 50px/1.2 var(--text-serif); color: #151c28; }
.testimonial-track { margin-top: 40px; gap: 24px; }
.testimonial-card {
    width: 680px;
    height: 480px;
    padding: 32px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.229%, #000 97.717%), var(--navy);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}
.testimonial-card > img { width: 42px; height: 42px; filter: none; opacity: 1; transform: rotate(180deg); }
.testimonial-card blockquote {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    color: #fff;
    opacity: .9;
}
.testimonial-card > div { display: flex; flex-direction: column; gap: 6px; }
.testimonial-card h3 { font: 400 22px/normal var(--text-serif); color: #fff; text-transform: uppercase; }
.testimonial-card small {
    font-size: 13px;
    line-height: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    opacity: .9;
}
.testimonial-side {
    justify-content: space-between;
    gap: 0;
    width: 72px;
    height: 440px;
    padding: 32px 12px 24px;
    border: 0;
    border-radius: 6px;
    background: rgba(8, 8, 8, .8) url('../assets/conclave/figma/testimonial-network.svg') center / 100% 100% no-repeat;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
    color: #fff;
    font: 800 20px/normal Geist, var(--body-copy);
    letter-spacing: 0;
}
/* Vertical name: text-align centres it along the card's vertical axis. */
.testimonial-side b {
    display: block;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    font-weight: inherit;
    letter-spacing: 4px;
}
.testimonial-side .side-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
}
.testimonial-side .side-arrow img { display: block; width: 16px; height: 20px; }
.testimonial-side .side-arrow.next img { transform: rotate(-90deg); }
.testimonial-side .side-arrow.previous img { transform: rotate(-90deg) scaleY(-1); }

/* ===== Footer: identical to index.html's about-footer ===== */
.about-footer { min-height: 304px; padding: 40px 32px; background: var(--navy); }
.about-footer .footer-top { grid-template-columns: 2fr 1.5fr 1fr; gap: 30px; }
.foundation { gap: 16px; }
.foundation img { flex: none; }
.foundation h4 { margin-bottom: 13px; font: 400 20px/1.2 var(--text-serif); }
.foundation p { max-width: none; font-size: 14px; line-height: 21px; letter-spacing: normal; color: #cecece; }
.footer-top h3 { font-weight: 400; letter-spacing: 1.2px; }
.about-footer .footer-top a { font-size: 14px; line-height: 23.68px; letter-spacing: .16px; }
.about-footer .footer-top h3 + a { margin-top: 0; }
.about-footer .subscribe { justify-self: auto; min-width: auto; }
.subscribe button { font-weight: 400; color: var(--navy); background: var(--gold); }
.subscribe button:hover { background: #e5a210; }
.about-footer .socials svg, .about-footer .footer-bottom .round, .about-footer .footer-bottom svg { flex-shrink: 1; }
.about-footer .socials a { margin-top: 28px; }
.about-footer .footer-bottom { grid-template-columns: 1fr auto 45px; gap: 30px; margin-top: 36px; }
.about-footer .footer-bottom .round { border: 0; }

@media (min-width: 1101px) {
    .about-footer { padding: 50px 80px 22px; }
    .about-footer .footer-top { grid-template-columns: 396fr 283fr 117fr 404fr; }
    .about-footer .subscribe { grid-column: auto; width: 100%; max-width: none; }
    .about-footer .footer-bottom { margin-top: 40px; }
}

@media (min-width: 1200px) {
    .about-footer .socials { margin-left: 9px; }
    .about-footer .socials a { margin-top: 10px; }
}

@media (max-width: 1199px) {
    .recap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
    .overview.container { max-width: none; }
    .conclave-timeline { gap: 40px; }
    .panel-glow-teal { left: auto; right: -400px; }
}

@media (max-width: 767px) {
    .hero { height: 600px; min-height: 600px; padding: 150px 0 60px; }
    .hero .hero-back-link { top: 124px; }
    .hero-back-link a { font-size: 14px; }
    .hero h1 { font-size: 38px; }
    .hero-tagline, .hero-description { font-size: 16px; }
    .overview.container { padding: 48px 0 56px; }
    .overview h2 { font-size: 30px; line-height: 38px; }
    .overview .intro { font-size: 16px; }
    .conclave-timeline { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .conclave-timeline-step h3 { font-size: 24px; line-height: 30px; }
    .conclave-timeline-step { align-items: center; }
    .conclave-timeline-step article { align-items: center; text-align: center; }
    .looking-back { padding: 48px 0; }
    .recap { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .recap h2, .panel-heading { font-size: 32px; }
    .stats > div { padding: 20px; justify-items: center; }
    .conclave-panels { padding: 56px 0; }
    .panel-subheading2 { font-size: 16px; }
    .panel-tabs-container { gap: 12px; }
    .panel-tab-card { min-height: 0; padding: 16px; border-radius: 12px; }
    .panel-tab-num { font-size: 26px; }
    .panel-tab-title { font-size: 14px; margin-top: 12px; }
    .panel-detail-card { min-height: 0; }
    .panel-detail-img-wrapper { height: 210px; }
    .panel-detail-body { padding: 20px; }
    .panel-detail-heading { font-size: 24px; }
    .panel-detail-desc { text-align: left; }
    .moderator-avatar { flex-basis: 56px; width: 56px; height: 56px; }
    .moderator-label { font-size: 12px; letter-spacing: 2px; margin-bottom: 8px; }
    .moderator-info { font-size: 15px; }
    .snapshots { padding: 56px 0; }
    .snapshots h2 { font-size: 32px; }
    .gallery .snapshot-frame:nth-child(n) { height: 240px; }
    .testimonials { min-height: 0; padding: 56px 16px; }
    .testimonials h2 { margin-top: 0; font-size: 32px; }
    .testimonial-card { width: calc(100% - 72px); height: auto; min-height: 540px; padding: 24px 16px; }
    .testimonial-card blockquote { font-size: 13px; }
    .testimonial-side { width: 28px; height: 360px; padding: 12px 2px; font-size: 11px; }
    .testimonial-side b { line-height: 16px; letter-spacing: 2px; }
    .testimonial-side .side-arrow { width: 16px; height: 16px; }
    .testimonial-side .side-arrow img { width: 12px; height: 15px; }
    .about-footer { padding: 40px 20px 24px; }
    .about-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
    .about-footer .footer-bottom { grid-template-columns: 1fr 45px; margin-top: 36px; }
    .about-footer .footer-bottom .round { grid-column: 2; grid-row: 2; }
}