/* ============================================================
   responsive.css — viewport-based responsive layer
   ------------------------------------------------------------
   style.css gates its entire mobile design behind
   "max-device-width + orientation: portrait". Those two
   conditions key off the physical screen and block landscape,
   so the layout never adapted to the viewport: desktop windows,
   landscape phones and tablets all fell back to desktop rules.

   This file re-emits those same rules against the VIEWPORT
   (max-width) with no orientation gate, so the original mobile
   design applies wherever it should. Design values are
   unchanged from style.css — only the query conditions differ.
   Loaded after style.css so it wins the cascade.
   ============================================================ */

/* Never let a wide element force horizontal scrolling */
html, body { max-width: 100%; overflow-x: hidden; }
img, picture, iframe, video { max-width: 100%; }


/* ---------- ≤ 1024px (from style.css: max-device-width 1024px) ---------- */
@media screen and (max-width: 1024px) {
    html, body{font-size: 22px;}
    ul.mini-subnav{ display: block;}
    
    .grid {height: calc(var(--vh, 1vh) * 100); position: fixed; }
    
    h1 { font-size: 3.3rem; line-height: 3rem;}
    .grid .grid-cell { width: 100vw; position: absolute; height: 33.3333%;}
    #grid-film{ top: 0; left: 0; background-position: 100% -13vw; background-size: 145vw;}
    #grid-involved{ top: 33.33%; left: 0; background-position: 100% -13vw; background-size: 166vw;}
    #grid-stories{ top: 66.66%; left: 0; background-position: 93% -23vw; background-size: 238vw;}
    
    .grid .grid-cell.grid-active { height: 55vh; }
    #grid-film.grid-active {top: 0;  left: 0; background-position: 55% 0vw; background-size: 143vw;}
    #grid-involved.grid-active {top: 0;  left: 0; background-position: 77% 0vw; background-size: 166vw;}
    #grid-stories.grid-active {top: 0;  left: 0; background-position: 66% 0vw; background-size: 145vw;}
    
    .watchtrailer-btn { width: 28vw;}
    .headercont {left: -190vw;}    
    #hamburger{ display: none;}
    
    #navBar { width: 92%; top: -100%; padding-top: 4.5rem; height: 100%; position: fixed;
        -webkit-transition: top .5s ease-out;
      -moz-transition: top .5s ease-out;
      -o-transition: top .5s ease-out;
      transition: top .5s ease-out;
    }
    #navBar.active{ top: 0;}
    
    /*#navBar.active.absolute-mobile{ position: fixed !important;} */
    
    #header-full{ padding-top: 0rem;} 
   
    .left-side { width: 100%; float: none; height: auto;}
    .right-side { width: 100%; float: none; height: auto;}
    .center-side { display: none;}
     #main-logo { position: fixed; width: 40%; top: 1rem; }
    .headercont { width: 86%; margin: 0% auto 0 auto;}
    .header-left { width: 76%; }
    .header-text-cont {margin-bottom: 2rem; padding-right: 2rem; }
    .header-bigtext {margin-bottom: 1rem;}
    
    #menu-bttn{ position: fixed; display: block; top: 1.25rem;}
    #close-bttn {position: fixed;}
    ul.mini-nav li:first-child{ margin-right: 0;}
    ul.mini-nav li{ margin-bottom: 5.5rem; float: none; width: 100%; text-align: center;}
    ul.mini-nav li a{ font-size: 2rem; color: #b91f1f; font-weight: 100; }
    .sides-cont { margin-top: 6rem;}
    
    div#social-box{ float: none; width: 100%; padding-top: 0; position: relative; bottom: auto; top: 0;}
    div#social-box ul li:first-child{ width: 100%;}
    div#social-box.social-column ul li{ /*float: none; width: 100%;*/ float: left; width: 33.333%; text-align: center; margin-bottom: 2.5rem; margin-right: 0;}
    div#social-box ul li a{ margin: 0 auto; width: 5.5rem; height:5.5rem;}
    div#social-box.social-column ul li:first-child {display: block; width: 100%;}
    div#social-box.social-column { width: 100%;}
    
    div#social-box ul {width: 18rem; margin: 0 auto; text-align: center;}
    
    #header-full.grid-mobile{ min-height: 55vh; }
    #header-full.grid-mobile .grid{ height: 55vh; }
    .section-content {  width: 88vw;}
    #section-involved article .BoxRiSide { width: calc(80% - 9rem); padding: 2rem 3rem 2rem 3rem; right: -10%;}
    #section-involved article .BoxLeSide { width: calc(80% - 9rem); padding: 2rem 3rem 2rem 3rem; left: -10%;}
    #section-involved article .textBox h2 { font-size: 2rem;  margin-bottom: 0.75rem; background-size: 8rem; background-position: 0rem 3.6rem; padding-bottom: 0.75rem; max-width: 70%;}
    
    #section-involved article .textBox p { line-height: 125%; font-size: .9rem;}
    
    #heroes-content { width: calc(100% - 0rem);}
    
    #heroes-content{ display: block;}
    .hero-box {width: calc(50% - 2rem); margin-right: 2%; margin-bottom: 3rem;}
    .more-videos { overflow: hidden; width: 102%;}
    
    .hero-cover {height: 55vh; background-size: cover; background-position: center;}
    .art-pic {float: none; width: 100%; margin-bottom: 1rem;}
    .art-text { float: none; width: 90%; margin: 0 auto; }
    .picleft .art-text {margin-left: auto;}
    .picright .art-text {margin-right: auto;}
    .art-text p { font-size: 1.2rem;line-height: 130%; text-align: justify; margin-top: 2rem;}
    .quote { width: calc( 100% - 4rem); margin: 2rem auto 4rem auto; overflow: hidden; padding: 2rem 1rem; text-align: center;}
    
    .art-text-full { width: 90%;  margin: 0 auto; text-align: justify;}
    .art-text-full p{ font-size: 1.2rem; }
    
    .pictext { margin-bottom: 2rem;}
    
    .quote h2 { font-size: 1.5rem; line-height: 1.5rem;}
    
    .donate-left{left: -70vw; }
    .donate-left.active { left: 0; right: 0; margin-top: 10rem;}
    .donate-right{ right: -150vw; }
    .donate-right.active { right: 38vw; }
    
    #section-involved article .BoxRiSide.active{ right: -130%;}
    #section-involved article .BoxLeSide.active{ left: -130%;}
    
    #section-involved article .textBox h2.active { background-position: 0rem 3.6rem;}
    
    .fix-mobile{ position: fixed !important;}
    .absolute-mobile{ position: absolute !important;}
    .relative-mobile{ position: relative !important;}
    .stories-heroes { margin-top: 5.5rem;}
}

/* ---------- ≤ 768px (from style.css: max-device-width 768px) ---------- */
@media screen and (max-width: 768px) {
    html, body{font-size: 16px;}
    
    #mc-embedded-subscribe { width: 14rem; background-size: 3rem;}
    
}

/* ---------- ≤ 428px (from style.css: max-device-width 428px) ---------- */
@media screen and (max-width: 428px) {
    html, body{font-size: 14px;}
    h4{padding-bottom: 0.15rem;}
    ul.mini-nav li a { font-size: 1.4rem;}
    h3 {font-size: 2.5rem;}
    #header-clear{height: 3.4rem;}
    ul.mini-nav {margin: .5rem 0;}
    
    #section-film h5 { margin-bottom: 3rem; }
    .sides-cont {margin-top: 7rem;}
    
    #main-logo {width: 52%; height: 3.4rem;}
    
    .img-bttn{ width: 1.5rem; height: 1.5rem; margin-top: 0.5rem;}
    
    div#social-box ul li a {margin: 0 auto; width: 4.5rem; height: 4.5rem;}
    
    .header-left {width: 100%;}
    .header-bigtext { margin-bottom: 1rem; width: 90%;}
    
    div#social-box ul li{ margin-bottom: 2rem; margin-right: 3.75rem;} 
    
    ul.mini-nav li {margin-bottom: 4.5rem;}
    
    div#social-box { bottom: 10rem; }
    div#social-box li {margin-bottom: 1rem; }
    
    .headercont {margin-top: 0%;}
    .header-text-cont p {line-height: 125%; font-size: .8rem;}
    
    ul.mini-nav li {margin-bottom: 3.5rem;}
    div#social-box ul li a {width: 3.5rem; height: 3.5rem;}
    
    #grid-film {background-position: 94% 0vw; background-size: 165vw;}
    #grid-involved {background-position: 100% 0vw; background-size: 175vw;}
    #grid-stories {background-position: 92% -16vw; background-size: 254vw;}
    
    #grid-involved.grid-active {background-size: 204vw;}
    #grid-stories.grid-active { background-size: 195vw;}
    
    .grid .grid-cell.grid-active {height: 50vh;}
    
    
    .section-content {width: 90vw; padding: 3rem 0 3rem 0;}
        
    #header-full.grid-mobile{ min-height: 50vh; }
    #header-full.grid-mobile .grid{ height: 50vh; }
    
    #grid-film.grid-active {background-position: 55% 0vw; background-size: 192vw;}
    .watchtrailer-btn span {font-size: 1rem;}
    .watchtrailer-btn{ background-size: 3rem; border-width: 2px;}
    .header-text-cont { margin-bottom: 1rem;}
    
    
    #section-involved article .BoxRiSide { width: calc(96% - 6rem);  padding: 2rem 2rem 2rem 2rem; right: 0%; position: relative; transform: translateY(-14%); margin: 0 auto;}
    #section-involved article .BoxLeSide { width: calc(100% - 6rem); padding: 2rem 2rem 2rem 2rem; left: 0%; position: relative; transform: translateY(-14%); margin: 0 auto;}
    #section-involved article .textBox h2 { font-size: 2rem; max-width: 80%;}
    #section-involved article .textBox p { line-height: 125%; font-size: .9rem;}
    #section-involved article section {width: 100%;}
    #section-involved article section.leftSide { margin-left: 0%;}
    
    .footer-cont .float-col{ float: none; width: 100%; text-align: center;  margin-left: 0;}
    
    
    .footer-cont .float-col.float-col.footer-menu-c1, .footer-cont .float-col.float-col.footer-menu-c2 { float: left; width: 50%;}
    
    .footer-logo img { width: 50%; margin-bottom: 2rem;}
    .footer-social ul li:last-child{ margin-right: 0;}
    .footer-social ul { width: 10.5rem; margin: 2rem auto; overflow: hidden; margin-top: 2rem;}
    
    .hero-box {width: 100%; margin-right: 0%;}
    .single-carousel { width: 100%; margin: 0 auto;  }
    #section-stories h3 { font-size: 2.5rem; line-height: 96%; padding-bottom: 0.4rem; width: 23rem; margin: 0 auto;}
    #section-stories h3 span.underline { content: "";  width: 10.5rem; height: 1.5rem; position: absolute; top: 1.9rem; left: 0;}
    .hero-cover { height: 60vh; background-position: center right;}
    
    .newsletter-box p { text-align: center; line-height: 120%;}
    
    .donate-left {left: -150vw;}
    .donate-left {left: -150vw;}
    .chicagoArt { width: 90%; margin: 0 auto 0rem auto; }
    .search-section { width: 100%; float: none; }
    
    .close-donate { top: .9rem;}
    .donate-left.active { left: 0;  margin-top: -12rem; position: relative;}
    .donate-right.active { right: 0;  margin-top: -12rem;  position: relative;}
    
    .stories-heroes { margin-top: 4.5rem;}
    
    .relsection:first-child{ float: none; width: 100%; }
    .relsection h2 {font-size: 2.3rem; margin-top: 0; background-size: 9rem; background-position: 13% 1.8rem; padding-bottom: 0.5rem; line-height: 2.5rem; text-align: center;}
    .relsection h5 { text-align: center; letter-spacing: .5rem; margin-bottom: 1rem;}
    .relsection { float: none; width: 64%; margin: 0 auto 2rem auto;}
    
    .hero-box:nth-child(odd) {margin-right: 0rem;}
    .hero-box:nth-child(even) {margin-left: 0rem;}
    
    #heroes-content { width: calc(90% - 2rem);}
    
    h3.chicago-blue{font-size: 1.75rem;}
    h3.chicago-blue span{ font-size: .75rem; }
}

/* ---------- ≤ 414px (from style.css: max-device-width 414px) ---------- */
@media screen and (max-width: 414px) {
    .grid .grid-cell.grid-active {height: 60vh;}
    
    #header-full.grid-mobile{ min-height: 60vh; }
    #header-full.grid-mobile .grid{ height: 60vh; }
    
    #grid-film.grid-active{background-size: 228vw;}
    #grid-involved.grid-active {background-size: 228vw;}
    #grid-stories.grid-active { background-size: 228vw;}
    
    .sides-cont {margin-top: 4rem;}
    .whereWatch { width: 100%; margin: 1rem auto;}
}

/* ---------- ≤ 375px (from style.css: max-device-width 375px) ---------- */
@media screen and (max-width: 375px) {
    html, body{font-size: 13px;}
    
    /*.grid-cell .sectionTitle h2 { font-size: 2.25rem;}*/
}

/* ---------- ≤ 320px (from style.css: max-device-width 320px) ---------- */
@media screen and (max-width: 320px) {
    html, body{font-size: 14px;}
    .headercont {margin-top: 0%;}
    .header-text-cont p {line-height: 115%;}
}

/* ============================================================
   Gap fixes — viewport ranges the original design never had
   rules for (it only ever targeted portrait phone/tablet
   screens, so these were left on desktop values).
   ============================================================ */

/* 1024–1279px: desktop rules applied with no scaling step between
   the mobile layer and the min-width:1280 layer. */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    html, body { font-size: 13px; }
    .footer-cont { width: 88vw; }
    .section-content { width: 90vw; }
}

/* "Related / more stories" is a rigid 4-up float down to 429px.
   Make it 2-up once the columns get too narrow to read. */
@media screen and (max-width: 900px) and (min-width: 429px) {
    .related { width: calc(100% - 2rem); padding: 1.5rem; }
    .relsection { width: calc(50% - .5rem); margin-left: 1rem; margin-bottom: 1.5rem; }
    .relsection:nth-child(odd) { margin-left: 0; }
    .relsection h2 { font-size: 2.2rem; line-height: 2.4rem; margin-top: 0; text-align: left; }
    .relsection h5 { letter-spacing: .4rem; }
}

/* Landscape phones and other short viewports: the header grid is a
   fixed 100vh split into thirds, so tall type overflowed its cell. */
@media screen and (max-width: 1024px) and (max-height: 520px) {
    html, body { font-size: 12px; }
    h1 { font-size: 2.4rem; line-height: 2.3rem; }
    .header-bigtext { margin-bottom: .5rem; }
    .header-text-cont { margin-bottom: 1rem; }
    .header-text-cont p { line-height: 120%; font-size: .8rem; }
    .sides-cont { margin-top: 3.5rem; }
    ul.mini-nav li { margin-bottom: 1.5rem; }
    div#social-box { bottom: auto; }
    div#social-box ul li a { width: 3rem; height: 3rem; }
    #main-logo { width: 30%; }
    .grid .grid-cell.grid-active { height: 75vh; }
    #header-full.grid-mobile, #header-full.grid-mobile .grid { min-height: 75vh; height: 75vh; }
    .hero-cover { height: 75vh; }
}

/* Keep the trailer/story video 16:9 and inside the viewport. */
@media screen and (max-width: 1024px) {
    #trailer-full-content { width: 94vw; left: 3vw; right: 3vw; }
    .video-responsive { padding-bottom: 56.25%; height: 0; position: relative; }
}

/* Very narrow phones: stop long words and the keyword-heavy headings
   from pushing the layout sideways. */
@media screen and (max-width: 360px) {
    h1, h2, h3, h6 { overflow-wrap: break-word; word-wrap: break-word; }
    .art-text p, .art-text-full p { text-align: left; }
    .relsection { width: 84%; }
}