/**
 * Discovery of Nature 0.3.31 — Homepage responsive regression fix.
 * Final owner for hero/search flow, audio mobile/tablet cards and featured continuation rail.
 */

/* Structural ownership: the hero has three real flow rows on every viewport.
 * Search may visually overlap the lead, but its row still reserves layout space. */
body.dn-dark-home .home-main--responsive-cinematic .home-hero.home-hero--editorial{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  row-gap:0!important;
}
body.dn-dark-home .home-main--responsive-cinematic .home-hero.home-hero--editorial>.home-hero__lead{
  grid-column:1/-1!important;
  grid-row:1!important;
}
body.dn-dark-home .home-main--responsive-cinematic .home-hero.home-hero--editorial>.home-hero-search{
  grid-column:1/-1!important;
  grid-row:2!important;
  align-self:start;
}
body.dn-dark-home .home-main--responsive-cinematic .home-hero.home-hero--editorial>.home-topics.home-photo-topics{
  grid-column:1/-1!important;
  grid-row:3!important;
}

/* Desktop/tablet keep the intentional overlap while the dedicated row prevents collision. */
@media (min-width:768px){
  body.dn-dark-home .home-main--responsive-cinematic .home-hero-search--overlap{
    margin-bottom:14px!important;
  }
}

/* Tablet portrait: separate audio presentation and genuine horizontal continuation rails. */
@media (min-width:768px) and (max-width:899px){
  body.dn-dark-home .home-main--responsive-cinematic .home-hero-search--overlap{
    margin-top:-38px!important;
    margin-bottom:14px!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__heading h3{
    font-size:clamp(1.72rem,4.2vw,2.12rem)!important;
    line-height:1.04!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature{
    display:block!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#0b2215!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__visual{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    border-radius:14px 14px 0 0!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__visual::after{
    background:linear-gradient(180deg,rgba(3,15,8,.02),rgba(3,15,8,.18))!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__copy{
    position:relative!important;
    z-index:1!important;
    margin:0!important;
    padding:14px 15px 16px!important;
    background:linear-gradient(180deg,#0d2819,#092014)!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__rail{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 10% 2px 0!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__rail>.home-media-mini{
    flex:0 0 46%!important;
    width:46%!important;
    min-width:46%!important;
    min-height:0!important;
  }

  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact{
    display:block!important;
    grid-template-columns:none!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__media{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/10!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__body{
    display:block!important;
    padding:11px 12px 13px!important;
  }
}

/* Phones: Hero -> Search -> Discovery cards. No absolute collision. */
@media (max-width:767px){
  body.dn-dark-home .home-main--responsive-cinematic .home-hero-search--overlap{
    width:auto!important;
    margin:-24px 14px 10px!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-hero.home-hero--editorial>.home-topics.home-photo-topics{
    margin-top:0!important;
  }

  /* Audio is intentionally different from documentary: artwork first, metadata second. */
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__heading{
    margin-bottom:13px!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__heading h3{
    max-width:14ch!important;
    font-size:clamp(1.78rem,8vw,2.12rem)!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__intro>p{
    max-width:42ch!important;
    margin-top:7px!important;
    font-size:.78rem!important;
    line-height:1.43!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature{
    display:block!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:14px!important;
    background:#0b2215!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__visual{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    border-radius:14px 14px 0 0!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__visual::after{
    background:linear-gradient(180deg,rgba(3,15,8,.01),rgba(3,15,8,.14))!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__copy{
    position:relative!important;
    z-index:1!important;
    margin:0!important;
    padding:12px 13px 14px!important;
    background:linear-gradient(180deg,#0d2819,#092014)!important;
    pointer-events:auto!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__copy h4{
    font-size:1.08rem!important;
    line-height:1.13!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-feature__tag{
    margin-bottom:5px!important;
    font-size:.58rem!important;
  }

  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__rail{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    padding:0 18% 2px 0!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__rail::-webkit-scrollbar{display:none}
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__rail>.home-media-mini{
    flex:0 0 76%!important;
    width:76%!important;
    min-width:76%!important;
    min-height:0!important;
    display:block!important;
    overflow:hidden!important;
    border-radius:13px!important;
    scroll-snap-align:start!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-mini__visual{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-mini__copy{
    padding:10px 11px 12px!important;
  }

  /* Featured continuation cards are editorial cards, not inherited compact rows. */
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact{
    flex:0 0 76%!important;
    width:76%!important;
    min-width:76%!important;
    min-height:0!important;
    display:block!important;
    grid-template-columns:none!important;
    gap:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(154,201,145,.20)!important;
    border-radius:13px!important;
    background:#0c2517!important;
    scroll-snap-align:start!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__media{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/10!important;
    overflow:hidden!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__body{
    position:static!important;
    display:block!important;
    min-width:0!important;
    padding:10px 11px 12px!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__category{
    display:block!important;
    margin-bottom:5px!important;
    font-size:.58rem!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__title{
    margin:0!important;
    font-size:.96rem!important;
    line-height:1.15!important;
    display:-webkit-box!important;
    overflow:hidden!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact .story-card__excerpt{
    display:none!important;
  }

  body.dn-dark-home .home-main--responsive-cinematic .home-featured__cards>.story-card .story-card__title{
    font-size:clamp(1.35rem,6.2vw,1.75rem)!important;
    line-height:1.04!important;
  }
}

@media (max-width:430px){
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__rail>.home-media-mini,
  body.dn-dark-home .home-main--responsive-cinematic .home-featured__rail>.story-card.story-card--compact{
    flex-basis:80%!important;
    width:80%!important;
    min-width:80%!important;
  }
}

@media (max-width:359px){
  body.dn-dark-home .home-main--responsive-cinematic .home-hero-search--overlap{
    margin:-18px 10px 9px!important;
  }
  body.dn-dark-home .home-main--responsive-cinematic .home-media-panel--audio .home-media-panel__heading h3{
    font-size:1.7rem!important;
  }
}