/* P31T45 - mobile polish for the dynamic public content pages only.
   Keep the already-approved static pages untouched. */

/* Listen + Wedding Advice landing: stop vertically centering the entire copy
   block in an oversized 82svh hero. Keep enough depth for the copy but expose
   the first divider row in the opening phone viewport. */
@media (max-width:640px) {
  html body.resource-page-listen #main-content > .jt-standard-hero,
  html body.resource-page-advice main.wedding-advice-listing > .jt-standard-hero {
    min-height:clamp(500px,72svh,610px)!important;
    align-items:stretch!important;
  }
  html body.resource-page-listen #main-content > .jt-standard-hero .jt-standard-hero-inner,
  html body.resource-page-advice main.wedding-advice-listing > .jt-standard-hero .jt-standard-hero-inner {
    min-height:inherit!important;
    align-items:flex-start!important;
    padding:32px 18px 48px!important;
  }
  html body.resource-page-listen #main-content > .jt-standard-hero .jt-standard-hero-copy,
  html body.resource-page-advice main.wedding-advice-listing > .jt-standard-hero .jt-standard-hero-copy {
    margin-top:0!important;
  }
  html body.resource-page-listen #main-content > .jt-standard-hero .jt-standard-hero-copy h1,
  html body.resource-page-advice main.wedding-advice-listing > .jt-standard-hero .jt-standard-hero-copy h1 {
    margin-top:.2rem!important;
  }
}

/* Listen: Search stays visible. The long browse/A-Z/genre rail is collapsed
   behind one obvious mobile control until the visitor asks for it. */
.listen-mobile-browse-toggle{display:none}
@media (max-width:720px) {
  html body.resource-page-listen .listen-library-layout{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  html body.resource-page-listen .listen-mobile-browse-toggle{
    display:flex;
    grid-column:1;
    width:100%;
    min-height:44px;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 14px;
    border:1px solid rgba(210,162,58,.5);
    border-radius:12px;
    background:#11100e;
    color:#f2cf78;
    font:800 .72rem/1.2 Lato,Arial,sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
  }
  html body.resource-page-listen .listen-mobile-browse-toggle-icon{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:999px;
    border:1px solid rgba(210,162,58,.45);
    font-size:1rem;
    line-height:1;
    transition:transform .18s ease;
  }
  html body.resource-page-listen .listen-mobile-browse-toggle[aria-expanded="true"] .listen-mobile-browse-toggle-icon{transform:rotate(45deg)}
  html body.resource-page-listen .listen-library-nav{
    display:none!important;
    grid-column:1!important;
    width:100%!important;
    margin:0!important;
  }
  html body.resource-page-listen .listen-library-nav.is-open{display:block!important}
  html body.resource-page-listen .listen-library-main{grid-column:1!important;min-width:0!important;width:100%!important}
}

/* Wedding Advice listing: use almost the full phone width for each article. */
@media (max-width:720px) {
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin-left:10px!important;
    margin-right:10px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid,
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card{
    width:100%!important;
    max-width:none!important;
  }
}

/* Suppliers: shorter hero, no dead lower half beneath the buttons, and a much
   denser category strip on phones. */
@media (max-width:640px) {
  html body.resource-page-suppliers #main-content > .supplier-page-hero{
    min-height:clamp(500px,72svh,600px)!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-inner{
    min-height:inherit!important;
    align-items:flex-start!important;
    padding:32px 18px 48px!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy{
    margin-top:0!important;
  }
  html body.resource-page-suppliers .supplier-toolbar{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:6px!important;
    margin-bottom:12px!important;
  }
  html body.resource-page-suppliers .supplier-toolbar .btn{
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:34px!important;
    padding:7px 11px!important;
    border-radius:999px!important;
    font-size:.62rem!important;
    line-height:1.18!important;
    letter-spacing:.055em!important;
    white-space:normal!important;
  }
}

/* Wedding Advice articles: the hero no longer waits until the bottom of an
   almost-full viewport to reveal its title. The reading column regains a phone
   gutter and the duplicated body title is removed on small screens. */
@media (max-width:650px) {
  html body.resource-page.resource-page-advice #main-content > .article-hero{
    min-height:clamp(510px,72svh,590px)!important;
    height:auto!important;
    max-height:none!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-grid{
    min-height:inherit!important;
    height:auto!important;
    align-items:flex-start!important;
    padding:clamp(108px,18svh,145px) 16px 48px!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-breadcrumbs{margin-bottom:12px!important}
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-hero-copy .kicker{margin-bottom:6px!important}
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-hero-copy h1{margin:.18rem 0 .72rem!important}
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-lede{line-height:1.48!important}
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-byline{margin-top:12px!important;gap:6px 8px!important}

  html body.resource-page.resource-page-advice .article-content-section{padding:30px 0 48px!important}
  html body.resource-page.resource-page-advice .article-layout.container{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:16px!important;
    margin-right:16px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body.resource-page.resource-page-advice .article-reading-column > .article-body-title{display:none!important}
  html body.resource-page.resource-page-advice .article-reading-column p,
  html body.resource-page.resource-page-advice .article-reading-column li{
    font-size:.98rem!important;
    line-height:1.7!important;
  }
  html body.resource-page.resource-page-advice .article-reading-column > p:first-child{
    font-size:1.04rem!important;
    line-height:1.68!important;
  }
  html body.resource-page.resource-page-advice .article-reading-column h2:not(.article-body-title){
    margin:2rem 0 .7rem!important;
    font-size:clamp(1.55rem,7vw,2rem)!important;
    line-height:1.15!important;
  }
  html body.resource-page.resource-page-advice .article-reading-column h3{
    margin:1.7rem 0 .55rem!important;
    font-size:clamp(1.25rem,5.8vw,1.55rem)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .listen-mobile-browse-toggle-icon{transition:none!important}
}