/* ═══════════════════════════════════════════════════════════════════════════
   PyStatR+ RESPONSIVE DESIGN & MOBILE FIXES
   Add to: scss/responsive-mobile.css
   Include in _quarto.yml under format > html > css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. GLOBAL RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Container responsiveness */
.container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. HIDE ON MOBILE UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide "The Story Behind PyStatR+" and heritage sections on mobile */
@media (max-width: 768px) {
  .hide-on-mobile,
  .section-founder-wrapper.hide-on-mobile,
  .story-section-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-on-mobile,
  .section-founder-wrapper.hide-on-mobile,
  .story-section-hide-mobile {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. NAVBAR RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .navbar .container-fluid,
  #quarto-header .navbar .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .navbar .navbar-brand img,
  #quarto-header .navbar-brand img {
    height: 44px !important;
  }
  
  .navbar-nav {
    margin-left: 0 !important;
  }
  
  .navbar .nav-link,
  .navbar .navbar-nav .nav-link {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .navbar .navbar-brand img {
    height: 40px !important;
  }
  
  /* Mobile menu styling */
  .navbar-collapse {
    background: linear-gradient(180deg, #0B1120 0%, #1E293B 100%);
    padding: 1rem;
    border-radius: 0 0 12px 12px;
    margin-top: 0.5rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.1);
  }
  
  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. HERO SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero-section {
    min-height: 45vh;
    padding: 5rem 1.5rem 3rem !important;
    padding-top: calc(70px + 2rem) !important;
  }
  
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    text-align: center;
  }
  
  .hero-text {
    order: 1;
  }
  
  .hero-visual {
    order: 2;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 4rem 1rem 2.5rem !important;
    padding-top: calc(70px + 1.5rem) !important;
  }
  
  .hero-title,
  .hero-section h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
  
  .hero-description {
    font-size: 0.9rem !important;
    line-height: 1.6;
  }
  
  .hero-tagline-stack .tagline-top {
    font-size: 1.25rem;
  }
  
  .hero-tagline-stack .tagline-bottom {
    font-size: 0.85rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .hero-buttons .cta-button {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1.5rem;
  }
  
  .hero-secondary-link {
    margin-top: 1rem;
  }
  
  /* Hero image frame */
  .hero-image-frame {
    max-width: 280px;
    margin: 0 auto;
  }
  
  .hero-single-image {
    max-width: 300px;
  }
  
  .hero-static-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 3.5rem 0.75rem 2rem !important;
    padding-top: calc(70px + 1rem) !important;
  }
  
  .hero-title,
  .hero-section h1 {
    font-size: 1.75rem !important;
  }
  
  .hero-image-frame,
  .hero-single-image {
    max-width: 240px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FOUNDER/STORY SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .section-founder {
    padding: 3rem 1.5rem;
  }
  
  .founder-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  
  .founder-image-wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .section-founder {
    padding: 2rem 1rem;
  }
  
  .founder-title {
    font-size: 1.75rem !important;
  }
  
  .founder-narrative p {
    font-size: 0.9rem;
    line-height: 1.7;
  }
  
  .founder-quote {
    font-size: 1rem;
    padding: 1rem;
  }
  
  .founder-mission {
    padding: 1.5rem 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. JOURNEY TIMELINE RESPONSIVE (Already in journey files but enhanced)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .journey-section {
    padding: 2rem 0 0;
  }
  
  .journey-quote-header {
    padding: 1rem;
  }
  
  .journey-quote {
    font-size: 0.85rem !important;
    line-height: 1.6;
  }
  
  .journey-lightpath-container {
    display: none; /* Hide complex SVG path on mobile */
  }
  
  .journey-milestone-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem;
  }
  
  .journey-milestone {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SERVICES SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

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

@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .service-card {
    padding: 1.25rem;
  }
  
  .service-card h3 {
    font-size: 1.1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. VALUES SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

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

@media (max-width: 640px) {
  .values-grid {
    grid-template-columns: 1fr !important;
  }
  
  .value-card {
    padding: 1.5rem;
  }
  
  .value-card .icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .value-card h3 {
    font-size: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. TEAM SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

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

@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr !important;
  }
  
  .team-card {
    padding: 1.5rem;
  }
  
  .team-card img {
    width: 100px;
    height: 100px;
  }
  
  .team-card h3 {
    font-size: 1.125rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. COMMUNITY SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

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

@media (max-width: 640px) {
  .community-grid-modern {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .community-card-modern {
    padding: 1.25rem;
  }
  
  .community-card-inner h4 {
    font-size: 1rem;
  }
  
  .section-community-dark {
    padding: 3rem 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. ETHICS SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ethics-grid-light {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .ethics-item-light {
    padding: 1rem;
  }
  
  .ethics-item-light h4 {
    font-size: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. CTA SECTION RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .section-final-cta-v2 {
    padding: 3rem 1rem;
  }
  
  .cta-content-v2 h2 {
    font-size: 1.75rem !important;
  }
  
  .cta-subtitle {
    font-size: 0.9rem;
  }
  
  .cta-features {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .cta-buttons-v2 {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  
  .cta-btn-primary,
  .cta-btn-secondary {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. BLOG PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .blog-hero {
    padding: 3rem 1rem 2rem;
  }
  
  .blog-hero-title {
    font-size: 2rem !important;
  }
  
  .blog-hero-subtitle {
    font-size: 0.9rem;
  }
  
  .blog-hero-stats {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .blog-stat-divider {
    display: none;
  }
  
  /* Topics grid */
  .topics-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  
  .topic-card {
    padding: 1rem;
  }
  
  /* Blog listing */
  .quarto-listing-default {
    grid-template-columns: 1fr !important;
  }
  
  /* Resources grid */
  .resources-grid {
    grid-template-columns: 1fr !important;
  }
  
  .resource-card {
    padding: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. BLOG ARTICLE/POST RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .quarto-title-block {
    padding: 1rem;
  }
  
  .quarto-title {
    font-size: 1.5rem !important;
  }
  
  .quarto-categories {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* Article content */
  article,
  .quarto-post-content {
    padding: 0 0.5rem;
  }
  
  article h2 {
    font-size: 1.5rem !important;
    margin-top: 2rem;
  }
  
  article h3 {
    font-size: 1.25rem !important;
  }
  
  /* Code blocks */
  article pre,
  .quarto-post-content pre {
    padding: 1rem !important;
    font-size: 0.8rem;
    border-radius: 8px;
  }
  
  /* Tables */
  article table,
  .quarto-post-content table {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
  }
  
  /* Sidebar - hide on mobile */
  .sidebar,
  #quarto-sidebar,
  .margin-sidebar {
    display: none !important;
  }
  
  /* TOC - move to top on mobile */
  #TOC {
    position: relative !important;
    margin-bottom: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. FOOTER RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #quarto-footer,
  footer {
    padding: 2rem 1rem !important;
  }
  
  .footer-grid,
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    text-align: center;
  }
  
  footer .social-icons,
  .footer-social {
    justify-content: center;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. SECTION HEADERS RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .section-header,
  .section-header-dark {
    padding: 0 1rem;
  }
  
  .section-title,
  .section-title-gradient {
    font-size: 1.75rem !important;
  }
  
  .section-subtitle,
  .section-subtitle-dark {
    font-size: 0.9rem;
  }
  
  .section-label,
  .section-label-dark {
    font-size: 0.7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. BUTTONS & CTAs RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .cta-button,
  .btn-primary,
  .btn-secondary,
  .newsletter-cta-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    min-height: 44px; /* Touch-friendly */
  }
  
  /* Full-width buttons on mobile */
  .cta-button,
  .btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. LEGAL PAGES RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .legal-hero {
    padding: 3rem 1rem 2rem;
  }
  
  .legal-hero-title {
    font-size: 1.75rem !important;
  }
  
  .legal-content {
    padding: 0 0.5rem;
  }
  
  .legal-content h2 {
    font-size: 1.5rem;
  }
  
  .legal-content h3 {
    font-size: 1.15rem;
  }
  
  .legal-content table {
    font-size: 0.8rem;
  }
  
  .legal-content th,
  .legal-content td {
    padding: 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. DONATE PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .donate-hero {
    padding: 3rem 1rem 2rem;
  }
  
  .donate-hero-title {
    font-size: 1.75rem !important;
  }
  
  .donation-tiers-grid {
    grid-template-columns: 1fr !important;
  }
  
  .donation-tier-card {
    padding: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. QUARTO-SPECIFIC RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Column screen full-width on mobile */
  .column-screen,
  .column-screen-inset {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .column-screen-inset {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Quarto listing grid */
  .quarto-listing-cols-3,
  .quarto-listing-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* Quarto search */
  #quarto-search {
    width: 100%;
    max-width: none;
  }
  
  #quarto-search input {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. TOUCH-FRIENDLY IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Larger touch targets */
  a, button, .nav-link, .dropdown-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Better tap spacing */
  .nav-link,
  .dropdown-item {
    padding: 0.75rem 1rem !important;
  }
  
  /* Input fields - prevent zoom on iOS */
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. IMAGES RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

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

.founder-photo,
.hero-static-image,
.carousel-img {
  max-width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .navbar,
  #quarto-header,
  footer,
  #quarto-footer,
  .sidebar,
  #quarto-sidebar,
  .hero-section,
  .section-final-cta-v2 {
    display: none !important;
  }
  
  body {
    padding-top: 0 !important;
  }
  
  article,
  .quarto-post-content {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. REDUCED MOTION (Accessibility)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}