/*
  vanessa-responsive.css
  Shared responsive styles for vanessamadu.com
  Link this in every page: <link rel="stylesheet" href="/assets/css/vanessa-responsive.css">
  Place AFTER your page's own <style> block so it can override correctly.
*/

/* ══════════════════════════════════════════
   1. BODY CAP — prevents too-wide layouts
══════════════════════════════════════════ */
.section,
.hero-content,
.about-section,
.sessions-wrapper,
.sessions-inner,
.research-section,
.collab-inner,
.press-inner,
.form-inner,
.scicomm-section,
.writing-inner,
.posts-wrapper,
.header-inner,
.page-header-inner,
.filters-bar,
.results-count,
.footer-inner,
.post-header,
.post-body,
.post-footer-inner,
.breadcrumb,
.stats-inner {
  max-width: min(1200px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

.cv-content,
.cv-layout {
  min-width: 0;
}

/* ══════════════════════════════════════════
   2. NAV — mobile hamburger
══════════════════════════════════════════ */

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #F4F2EC;
  font-size: 1.3rem;
  padding: 0.4rem;
  transition: opacity 0.2s;
}
.nav-hamburger:hover { opacity: 0.7; }

@media (max-width: 768px) {
  .nav-hamburger { display: block; }

  .site-nav .nav-links {
    display: none;
    position: absolute;
    top: 56px; left: 0; right: 0;
    background: #4558C8;
    flex-direction: column;
    padding: 0.8rem 1.5rem 1.2rem;
    gap: 0.2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 199;
  }
  .site-nav .nav-links.open { display: flex; }

  .nav-links a {
    padding: 0.6rem 0.5rem;
    font-size: 0.88rem;
    border-radius: 6px;
  }
  .nav-book {
    margin-top: 0.4rem;
    text-align: center;
  }
}

/* ══════════════════════════════════════════
   3. HOMEPAGE HERO
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    background-position: 70% top;
  }

  .hero-content {
    padding: 4rem 2rem 5rem;
    max-width: 100%;
  }

  .hero-h1 { font-size: clamp(2.2rem, 7vw, 4rem); }
  .hero-h1 .wonderland { font-size: clamp(2.2rem, 7vw, 4rem); }
  .hero-note { max-width: 100%; }
}

@media (max-width: 600px) {
  .hero {
    background-image: none !important;
    background-color: #4558C8 !important;
    min-height: auto;
  }

  .hero::before { background: none !important; }

  .hero-content {
    padding: 3rem 1.5rem 2rem;
    max-width: 100%;
    margin-left: 0;
    background: none !important;
  }

  .hero-h1 { font-size: clamp(2.4rem, 11vw, 3.5rem); }
  .hero-h1 .wonderland { font-size: clamp(2.4rem, 11vw, 3.5rem); }
  .hero-note { max-width: 100%; }
}

/* ══════════════════════════════════════════
   4. HOMEPAGE ABOUT SECTION
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .about-section {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
    padding: 3rem 2rem;
  }
}

@media (max-width: 640px) {
  .fact-card { transform: none !important; }
}

/* ══════════════════════════════════════════
   5. SESSIONS GRID (homepage + sessions page)
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .sessions-heading-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 1024px) {
  .sessions-scatter,
  .sessions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .sessions-scatter,
  .sessions-grid {
    grid-template-columns: 1fr !important;
  }
  .s-card { transform: none !important; }
}

/* ══════════════════════════════════════════
   6. STATS ROW
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5rem;
  }
}

@media (max-width: 500px) {
  .stats-inner { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════
   7. SCI COMM GRID
══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .scicomm-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  .scicomm-grid { grid-template-columns: 1fr !important; }
  .sc-card { transform: none !important; }
}

/* ══════════════════════════════════════════
   8. WRITING LIST (homepage + writing page)
══════════════════════════════════════════ */

@media (max-width: 640px) {
  .w-item {
    grid-template-columns: 60px 1fr !important;
    gap: 0.8rem;
  }
  .w-tag { display: none; }
  .post-tag { display: none; }
}

/* ══════════════════════════════════════════
   9. ABOUT PAGE HERO
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .about-hero-inner {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }
  .about-photo-col {
    height: 60vw;
    max-height: 400px;
  }
  .about-text-col { padding: 3rem 2rem 4rem; }
}

/* ══════════════════════════════════════════
   10. RESEARCH GRID
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .research-grid { grid-template-columns: 1fr !important; }
  .project-details { grid-template-columns: 1fr !important; }
  .collab-inner { grid-template-columns: 1fr !important; gap: 2.5rem; }
}

/* ══════════════════════════════════════════
   11. CV LAYOUT
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .cv-layout { grid-template-columns: 1fr !important; }
  .cv-sidebar {
    position: static;
    padding-right: 0; padding-bottom: 1.5rem;
    border-right: none;
    border-bottom: 1px dashed rgba(69,88,200,0.15);
  }
  .cv-nav { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
  .cv-nav a { font-size: 0.8rem; }
  .cv-content { padding-left: 0; padding-top: 2rem; }
  .cv-entry { grid-template-columns: 80px 1fr; }
}

@media (max-width: 500px) {
  .cv-entry { grid-template-columns: 1fr !important; gap: 0.3rem; }
  .cv-date { padding-top: 0; font-size: 0.8rem; }
}

/* ══════════════════════════════════════════
   12. POST TEMPLATE
══════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root { --prose-width: 100%; }

  .post-header,
  .post-body,
  .post-footer-inner {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .post-sidebar { position: static; margin-bottom: 2rem; }
  .toc-card { transform: none; }
  .post-header { padding-bottom: 0; }
  .post-body { padding-top: 2rem; }
}

@media (max-width: 640px) {
  .post-header, .post-body { padding: 1.5rem; }
  .prose pre { padding: 1rem; font-size: 0.78rem; }
  .prose h2 { font-size: 1.4rem; }
  .post-footer-nav { flex-direction: column; gap: 1rem; }
  .nav-post { max-width: 100%; }
}

/* ══════════════════════════════════════════
   13. SESSIONS PAGE SPECIFIC
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .page-header-inner { grid-template-columns: 1fr !important; }
  .header-note { text-align: left; transform: none; }
  .filter-group { gap: 0.4rem; }
  .filter-clear { margin-left: 0; margin-top: 0.3rem; }
}

@media (max-width: 640px) {
  .filter-pill { font-size: 0.7rem; padding: 0.3rem 0.7rem; }
  .s-card.expanded { grid-column: span 1 !important; }
  .card-detail { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════
   14. ENQUIRY FORM
══════════════════════════════════════════ */

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .form-field.full { grid-column: span 1 !important; }
  .form-inner { padding: 3rem 1.5rem; }
}

/* ══════════════════════════════════════════
   15. PRESS LIST
══════════════════════════════════════════ */

@media (max-width: 640px) {
  .press-item {
    grid-template-columns: 1fr auto !important;
    gap: 0.5rem;
  }
  .press-outlet { display: none; }
}

/* ══════════════════════════════════════════
   16. FEATURE CARD (sci comm video)
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .feature-card { grid-template-columns: 1fr !important; }
  .fc-visual { min-height: 160px; }
  .ep-list { max-width: 100%; }
}

/* ══════════════════════════════════════════
   17. WRITING INDEX PAGE
══════════════════════════════════════════ */

@media (max-width: 640px) {
  .filter-bar { padding: 0 1.5rem; }
  .posts-wrapper { padding: 1.5rem 1.5rem 4rem; }
  .post-item {
    grid-template-columns: 60px 1fr !important;
    gap: 0.7rem;
  }
}

/* ══════════════════════════════════════════
   18. OUTREACH + WRITING GRIDS
══════════════════════════════════════════ */

@media (max-width: 900px) {
  .outreach-grid,
  .writing-grid {
    grid-template-columns: 1fr !important;
  }
  .outreach-card,
  .writing-card { transform: none !important; }
}

/* ══════════════════════════════════════════
   19. GENERAL MOBILE PADDING + MISC
══════════════════════════════════════════ */

@media (max-width: 640px) {
  .section { padding: 3rem 1.5rem; }
  .page-header { padding: 3rem 1.5rem; }
  nav { padding: 0 1.5rem; }
  footer { padding: 2.5rem 1.5rem 1.5rem; }
  .footer-inner { grid-template-columns: 1fr !important; gap: 2rem; }
  .footer-nav { text-align: left; }

  .contact-band { padding-left: 1.5rem; padding-right: 1.5rem; }
  .cta-section  { padding-left: 1.5rem; padding-right: 1.5rem; }

  .role-chips { gap: 0.4rem; }
  .role-chip { font-size: 0.8rem; }

  .talks-grid { grid-template-columns: 1fr !important; }
  .talk-card { transform: none !important; }
  .art-grid { grid-template-columns: 1fr !important; }
  .art-card { transform: none !important; }
}

/* ══════════════════════════════════════════
   20. ULTRAWIDE CAP
══════════════════════════════════════════ */

@media (min-width: 1400px) {
  .page-header > *,
  .header-inner { padding-left: 0; padding-right: 0; }
}

/* ══════════════════════════════════════════
   21. HERO CONTENT ALIGNMENT (desktop)
══════════════════════════════════════════ */

.hero-content {
  width: 100%;
  max-width: 560px;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 900px) {
  .hero-content {
    margin-left: 0;
    max-width: 100%;
  }
}