/**
 * Large Screen Optimization
 * Improves layout and spacing for screens wider than 1440px
 */

/* Hide all footers site-wide */
.footer-wrap {
  display: none !important;
}

/* Ensure full-width elements stay 100vw on all screen sizes */
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

/* Fix video position on large screens */
@media screen and (min-width: 1440px) {
  .introembed {
    top: -3vw !important;
  }
}

@media screen and (min-width: 1920px) {
  .introembed {
    top: -2vw !important;
  }
}

@media screen and (min-width: 2560px) {
  .introembed {
    top: -1vw !important;
  }
}

.background {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

.introsection.intro {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}


/* Base improvements for larger screens (1440px+) */
@media screen and (min-width: 1440px) {
  /* Only apply to containers that aren't part of special sections */
  .w-layout-blockcontainer:not(.otherproject):not(.otherlink) {
    max-width: 1280px;
  }

  .container {
    max-width: 1400px;
  }

  .container.intro-text {
    max-width: 1400px;
  }

  .container.biocontainer {
    max-width: 1400px;
  }

  /* Keep othersgrid centered */
  .othersgrid {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ultra-wide screens (1920px+) */
@media screen and (min-width: 1920px) {
  .w-layout-blockcontainer:not(.otherproject):not(.otherlink) {
    max-width: 1600px;
  }

  .container {
    max-width: 1800px;
  }

  .container.intro-text {
    max-width: 1800px;
  }

  .container.biocontainer {
    max-width: 1600px;
  }

  /* Better spacing for navigation on large screens */
  .navigation {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .introsection.intro {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  /* Keep othersgrid centered */
  .othersgrid {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Extra-wide screens (2560px+) */
@media screen and (min-width: 2560px) {
  .w-layout-blockcontainer:not(.otherproject):not(.otherlink) {
    max-width: 2200px;
  }

  .container {
    max-width: 2400px;
  }

  .container.intro-text {
    max-width: 2200px;
  }

  .container.biocontainer {
    max-width: 2000px;
  }

  /* Maintain reasonable padding on very large screens */
  .navigation {
    padding-left: 15vw;
    padding-right: 15vw;
  }

  .introsection.intro {
    padding-left: 15vw;
    padding-right: 15vw;
  }

  /* Keep othersgrid centered */
  .othersgrid {
    max-width: 2400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Prevent content from becoming too wide on extreme screens */
@media screen and (min-width: 3840px) {
  .w-layout-blockcontainer:not(.otherproject):not(.otherlink),
  .container,
  .container.intro-text {
    max-width: 3000px;
  }

  .container.biocontainer {
    max-width: 2800px;
  }

  .othersgrid {
    max-width: 3000px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ensure images and media scale properly */
@media screen and (min-width: 1440px) {
  img {
    max-width: 100%;
    height: auto;
  }

  /* Make sure embedded content is responsive */
  .w-embed-youtubevideo,
  iframe {
    max-width: 100%;
  }
}

/* Timeline page specific improvements */
@media screen and (min-width: 1440px) {
  .container {
    max-width: 1800px;
  }

  body {
    padding-left: 100px;
    padding-right: 60px;
  }
}

@media screen and (min-width: 1920px) {
  .timeline-sidebar {
    left: -80px;
  }

  body {
    padding-left: 120px;
  }
}

/* Text scaling for better readability on large screens */
@media screen and (min-width: 1920px) {
  body {
    font-size: 18px;
    line-height: 1.8;
  }

  h1 {
    font-size: 52px;
    line-height: 1.4;
  }

  h2 {
    font-size: 42px;
    line-height: 1.4;
  }

  h3 {
    font-size: 32px;
    line-height: 1.5;
  }

  .paragraph-light {
    font-size: clamp(16px, 2vh, 22px);
    line-height: clamp(24px, 3vh, 32px);
  }
}

/* Grid improvements for large screens */
@media screen and (min-width: 1440px) {
  .w-layout-grid {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
}

@media screen and (min-width: 1920px) {
  .w-layout-grid {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
}