/* ============================================================
   ICNC 2016 – Frank Ford Award Plenary Page
   Stylesheet  |  Bootstrap 5 compatible
   ============================================================ */

/* ── Google Fonts import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --navy:        #0c1a27;
  --navy-mid:    #132333;
  --gold:        #c8913a;
  --gold-light:  #e6b86a;
  --gold-pale:   #f5e8cc;
  --cream:       #f7f2ea;
  --white:       #ffffff;
  --text:        #1c2b38;
  --muted:       #5a6a78;
  --rule:        rgba(200,145,58,.35);

  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Crimson Pro', 'Georgia', serif;

  --shadow-card: 0 6px 40px rgba(12,26,39,.13);
  --shadow-soft: 0 2px 18px rgba(12,26,39,.07);
}

/* ── Base reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }


/* ============================================================
   HEADER BANNER
   ============================================================ */
.award-banner {
  background-color: var(--navy);
  color: var(--white);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}

/* Fine diagonal line texture */
.award-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -52deg,
    transparent,
    transparent 34px,
    rgba(200,145,58,.055) 34px,
    rgba(200,145,58,.055) 36px
  );
  pointer-events: none;
}

/* Bottom gold line accent */
.award-banner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, transparent);
}

.banner-eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .6rem;
}

.banner-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: .4rem;
}

.banner-title em {
  color: var(--gold);
  font-style: italic;
}

.banner-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,.6);
  letter-spacing: .04em;
}

.gold-rule {
  border: none;
  border-top: 1px solid var(--gold);
  width: 72px;
  margin: 1.4rem 0 1.2rem;
  opacity: .8;
}


/* ============================================================
   SHARED SECTION UTILITIES
   ============================================================ */
.section-label {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Inverse version (on dark bg) */
.section-title--light {
  color: var(--white);
}
.section-title--light::after {
  background: rgba(200,145,58,.25);
}


/* ============================================================
   SPEAKER HERO SECTION
   ============================================================ */
.speaker-hero {
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.speaker-photo-col {
  background: var(--navy-mid);
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.speaker-photo-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  inset: 0;
  display: block;
}

/* Gradient overlay at bottom of photo */
.speaker-photo-col::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, var(--navy) 0%, transparent 100%);
  pointer-events: none;
}

.speaker-details-col {
  padding: 2.8rem 3rem 0 3rem;
  display: flex;
  flex-direction: column;
}

.award-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .32rem 1rem;
  margin-bottom: 1.2rem;
  width: fit-content;
}

.speaker-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: .6rem;
}

.speaker-affiliation {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.6;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  margin-bottom: 0;
}

/* Talk title panel — flush to bottom of card */
.talk-panel {
  background: var(--navy);
  color: var(--white);
  padding: 2rem 3rem;
  margin-top: 2.5rem;
  position: relative;
  overflow: hidden;
}

.talk-panel::before {
  content: '\201C';
  position: absolute;
  top: -1.5rem;
  left: 1.8rem;
  font-family: var(--font-display);
  font-size: 10rem;
  color: var(--gold);
  opacity: .1;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.talk-panel-label {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: .6rem;
  display: block;
}

.talk-panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 0;
}


/* ============================================================
   BIO SECTION
   ============================================================ */
.bio-section {
  padding: 4rem 0;
  background: var(--cream);
}

.bio-text p {
  margin-bottom: 1rem;
  color: var(--text);
}

.bio-text p:last-child { margin-bottom: 0; }

/* Video card */
.video-card {
  background: var(--white);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}

.video-card-header {
  background: var(--navy);
  padding: .9rem 1.4rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.video-card-header span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-family: var(--font-body);
}

.video-card-header::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.video-card .ratio { display: block; }

.video-caption {
  padding: .9rem 1.4rem;
  font-size: .88rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
  border-top: 1px solid rgba(0,0,0,.06);
}


/* ============================================================
   ABSTRACT SECTION
   ============================================================ */
.abstract-section {
  background: var(--white);
  padding: 3.5rem 0;
  border-top: 3px solid var(--gold);
}

.abstract-body {
  border-left: 4px solid var(--gold-pale);
  padding-left: 1.8rem;
}

.abstract-body p {
  color: var(--text);
  margin-bottom: 1rem;
}

.abstract-body p:last-child { margin-bottom: 0; }


/* ============================================================
   FRANK FORD AWARD SECTION
   ============================================================ */
.ford-section {
  background: var(--navy);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern */
.ford-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(200,145,58,.04) 40px,
    rgba(200,145,58,.04) 42px
  );
  pointer-events: none;
}

.ford-card {
  background: var(--navy-mid);
  border: 1px solid rgba(200,145,58,.2);
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,.35);
  position: relative;
}

/* Ford photo column */
.ford-photo-col {
  background: #0a1520;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  min-height: 300px;
}

.ford-photo-col img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid rgba(200,145,58,.55);
  display: block;
  flex-shrink: 0;
}

/* Ford text column */
.ford-info {
  padding: 2.8rem 3rem;
  color: rgba(255,255,255,.82);
}

.ford-award-badge {
  display: inline-block;
  border: 1px solid rgba(200,145,58,.55);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .28rem .9rem;
  margin-bottom: 1rem;
}

.ford-name {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: .2rem;
}

.ford-dates {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-light);
  font-size: 1rem;
  margin-bottom: 1.4rem;
}

.ford-info p {
  font-size: 1rem;
  line-height: 1.78;
  margin-bottom: .9rem;
  color: rgba(255,255,255,.75);
}

.ford-info p:last-child { margin-bottom: 0; }

.ford-legacy {
  border-top: 1px solid rgba(200,145,58,.25);
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  font-style: italic;
  color: var(--gold-light) !important;
}


/* ============================================================
   PAGE FOOTER
   ============================================================ */
.page-footer {
  background: #07111b;
  color: rgba(255,255,255,.4);
  text-align: center;
  padding: 1.6rem 1rem;
  font-size: .82rem;
  letter-spacing: .06em;
  font-family: var(--font-body);
  font-weight: 300;
  border-top: 1px solid rgba(200,145,58,.2);
}

.page-footer strong {
  color: var(--gold);
  font-weight: 600;
}


/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 991px) {
  .speaker-photo-col {
    min-height: 300px;
  }

  .speaker-details-col {
    padding: 2rem 2rem 0 2rem;
  }

  .talk-panel {
    padding: 1.8rem 2rem;
    margin-top: 2rem;
  }

  .ford-info {
    padding: 2rem 2rem;
  }

  .ford-photo-col {
    min-height: 220px;
    padding: 2rem;
  }
}

@media (max-width: 767px) {
  .speaker-photo-col {
    min-height: 260px;
  }

  .speaker-details-col {
    padding: 1.6rem 1.4rem 0;
  }

  .talk-panel {
    padding: 1.5rem 1.4rem;
    margin-top: 1.5rem;
  }

  .ford-photo-col img {
    width: 130px;
    height: 130px;
  }

  .bio-section { padding: 2.5rem 0; }
  .abstract-section { padding: 2.5rem 0; }
  .ford-section { padding: 2.5rem 0 3rem; }
}