/* P31T46 — final mobile public viewport/content corrections.
   Shared hero/divider fit plus focused Wedding Advice/Supplier fixes. */

/* The first four-cell divider should fit the phone viewport rather than being
   visibly chopped off underneath an oversized hero. Keep hero content flexible:
   these are minimums only, so copy-heavy pages can still grow naturally. */
@media (max-width:640px) {
  html body #main-content > .jt-standard-hero {
    min-height:clamp(500px,72svh,600px)!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    min-height:inherit!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item,
  html body #main-content > .article-landing-divider .jt-landing-divider-item {
    min-height:76px!important;
    padding:9px 12px!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > span:first-child,
  html body #main-content > .article-landing-divider .jt-landing-divider-item > span:first-child {
    margin-bottom:3px!important;
    font-size:.62rem!important;
    line-height:1.15!important;
    letter-spacing:.12em!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > strong,
  html body #main-content > .article-landing-divider .jt-landing-divider-item > strong {
    font-size:.92rem!important;
    line-height:1.14!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > small,
  html body #main-content > .article-landing-divider .jt-landing-divider-item > small {
    margin-top:3px!important;
    font-size:.69rem!important;
    line-height:1.25!important;
  }
}

/* Wedding Advice library: on phones the result list is a genuine one-column
   full-width list. Do not leave the old desktop/sidebar grid column vacant. */
@media (max-width:720px) {
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container {
    box-sizing:border-box!important;
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin-left:8px!important;
    margin-right:8px!important;
    padding-left:0!important;
    padding-right:0!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .resource-section-head,
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-toolbar,
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-results-summary,
  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-pagination,
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .resource-empty {
    grid-column:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .resource-section-head { grid-row:1!important; }
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-toolbar { grid-row:2!important; }
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-results-summary { grid-row:3!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 > .resource-empty { grid-row:4!important; }
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-pagination { grid-row:5!important; }
  html body.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  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;
    min-width:0!important;
  }
}

/* Article contents: keep the desktop guide rail as-is. On phones a compact
   collapsible contents panel appears BEFORE the article; the duplicate TOC in
   the trailing rail is hidden, while Related topics / Explore more stay after
   the article where they remain useful. */
.article-mobile-toc { display:none; }
@media (max-width:860px) {
  html body.resource-page-advice .article-mobile-toc {
    display:block!important;
    width:100%!important;
    margin:0 0 22px!important;
    border:1px solid rgba(210,162,58,.36)!important;
    border-radius:12px!important;
    background:linear-gradient(155deg,#f5f0e7 0%,#eee5d8 100%)!important;
    color:#17130e!important;
    box-shadow:0 16px 34px rgba(0,0,0,.2)!important;
    overflow:hidden!important;
  }
  html body.resource-page-advice .article-mobile-toc > summary {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    min-height:48px!important;
    padding:12px 15px!important;
    cursor:pointer!important;
    list-style:none!important;
    color:#18130d!important;
    font:900 .78rem/1.2 Lato,Arial,sans-serif!important;
    letter-spacing:.09em!important;
    text-transform:uppercase!important;
  }
  html body.resource-page-advice .article-mobile-toc > summary::-webkit-details-marker { display:none!important; }
  html body.resource-page-advice .article-mobile-toc-toggle {
    display:grid!important;
    place-items:center!important;
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    border:1px solid rgba(154,111,26,.38)!important;
    border-radius:999px!important;
    color:#8e6414!important;
    font-size:1rem!important;
    line-height:1!important;
    transition:transform .18s ease!important;
  }
  html body.resource-page-advice .article-mobile-toc[open] .article-mobile-toc-toggle { transform:rotate(45deg)!important; }
  html body.resource-page-advice .article-mobile-toc .article-toc-list {
    margin:0 15px 15px!important;
    padding:3px 0 0!important;
    border-left:1px solid rgba(190,142,41,.38)!important;
    list-style:none!important;
  }
  html body.resource-page-advice .article-mobile-toc .article-toc-list a {
    display:block!important;
    padding:7px 0 7px 13px!important;
    color:#302a22!important;
    font-size:.88rem!important;
    line-height:1.38!important;
    text-decoration:none!important;
  }
  html body.resource-page-advice .article-mobile-toc .article-toc-list li.is-subheading a {
    padding-left:26px!important;
    color:#5c5144!important;
    font-size:.82rem!important;
  }
  html body.resource-page-advice .article-side-rail .article-toc { display:none!important; }
}

/* Supplier detail dialog: always fit inside the device viewport. The shell is
   the single scroll container, so long recommendations/social links remain
   reachable instead of being clipped off the bottom. */
@media (max-width:560px) {
  html body.resource-page-suppliers .supplier-modal {
    box-sizing:border-box!important;
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    height:auto!important;
    max-height:calc(100dvh - 12px)!important;
    margin:auto!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  html body.resource-page-suppliers .supplier-modal-shell {
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    max-height:calc(100dvh - 12px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-gutter:stable!important;
  }
  html body.resource-page-suppliers .supplier-modal-close {
    position:sticky!important;
    top:8px!important;
    right:auto!important;
    float:none!important;
    margin:8px 8px -46px auto!important;
  }
  html body.resource-page-suppliers .supplier-modal-media {
    min-height:0!important;
    max-height:none!important;
    padding:12px!important;
  }
  html body.resource-page-suppliers .supplier-modal-media img {
    width:100%!important;
    height:auto!important;
    max-height:180px!important;
    object-fit:contain!important;
  }
  html body.resource-page-suppliers .supplier-modal-copy {
    padding:18px 16px 24px!important;
  }
  html body.resource-page-suppliers .supplier-modal-links { margin-top:14px!important; padding-top:14px!important; }
}

@media (prefers-reduced-motion:reduce) {
  .article-mobile-toc-toggle { transition:none!important; }
}

/* P31T47 — short-phone viewport fit.
   The 375x667/360x640 class needs a height-aware hero rather than the regular
   mobile minimum. With the 74px public header and 2 x 76px landing divider,
   the remaining hero plane is exactly 100svh - 226px. Taller phones keep the
   P31T46 composition unchanged. */
@media (max-width:560px) and (min-height:560px) and (max-height:740px) and (orientation:portrait) {
  html body #main-content > .jt-standard-hero {
    min-height:calc(100svh - 226px)!important;
  }
  html body #main-content > .jt-standard-hero > .jt-standard-hero-inner,
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    min-height:inherit!important;
    padding:18px 22px!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .kicker,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .preview-eyebrow {
    margin-bottom:6px!important;
    font-size:.66rem!important;
    line-height:1.15!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    margin-bottom:10px!important;
    font-size:clamp(1.9rem,9.2vw,2.45rem)!important;
    line-height:1.02!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
    margin-bottom:7px!important;
    font-size:.88rem!important;
    line-height:1.38!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .preview-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .reviews-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .contact-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .about-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .occasions-hero-actions {
    gap:8px!important;
    margin-top:15px!important;
  }
  html body #main-content > .jt-standard-hero .btn {
    min-height:42px!important;
    padding:9px 18px!important;
    font-size:.72rem!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media figcaption {
    bottom:8px!important;
    padding:6px 9px!important;
    font-size:.66rem!important;
  }
}

/* P31T47 — very-short phone refinement (360x640 class).
   Shrink the divider by 6px per row and return that space to the hero. */
@media (max-width:560px) and (min-height:620px) and (max-height:660px) and (orientation:portrait) {
  html body #main-content > .jt-standard-hero {
    min-height:calc(100svh - 214px)!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item,
  html body #main-content > .article-landing-divider .jt-landing-divider-item {
    min-height:70px!important;
    padding:7px 10px!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > span:first-child,
  html body #main-content > .article-landing-divider .jt-landing-divider-item > span:first-child {
    margin-bottom:2px!important;
    font-size:.58rem!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > strong,
  html body #main-content > .article-landing-divider .jt-landing-divider-item > strong {
    font-size:.86rem!important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > small,
  html body #main-content > .article-landing-divider .jt-landing-divider-item > small {
    margin-top:2px!important;
    font-size:.61rem!important;
    line-height:1.18!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    font-size:clamp(1.72rem,8.6vw,2.15rem)!important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
    font-size:.81rem!important;
    line-height:1.3!important;
  }
  html body #main-content > .jt-standard-hero .btn {
    min-height:38px!important;
    padding:7px 15px!important;
    font-size:.67rem!important;
  }
}

/* Article heroes use their own layout rather than jt-standard-hero. Match the
   same header + divider geometry on short portrait phones so the complete
   article highlights bar is visible without changing the 844px+ layouts. */
@media (max-width:560px) and (min-height:620px) and (max-height:740px) and (orientation:portrait) {
  html body.resource-page.resource-page-advice #main-content > .article-hero {
    min-height:calc(100svh - 226px)!important;
    height:auto!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-grid {
    min-height:inherit!important;
    padding:22px 16px 20px!important;
    align-items:center!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-breadcrumbs {
    margin-bottom:7px!important;
    font-size:.66rem!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-hero-copy .kicker {
    margin-bottom:4px!important;
    font-size:.65rem!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-hero-copy h1 {
    margin:.1rem 0 .52rem!important;
    font-size:clamp(1.72rem,8.2vw,2.25rem)!important;
    line-height:1.02!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-lede {
    font-size:.84rem!important;
    line-height:1.35!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-byline {
    margin-top:8px!important;
    gap:4px 7px!important;
    font-size:.68rem!important;
  }
}
@media (max-width:560px) and (min-height:620px) and (max-height:660px) and (orientation:portrait) {
  html body.resource-page.resource-page-advice #main-content > .article-hero {
    min-height:calc(100svh - 214px)!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-grid {
    padding:16px 14px 14px!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-hero-copy h1 {
    font-size:clamp(1.58rem,7.8vw,2rem)!important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-lede {
    font-size:.78rem!important;
    line-height:1.3!important;
  }
}

/* Suppliers keeps its own hero class. Give it the same short-phone geometry as
   the shared managed heroes so its complete proof divider remains in view. */
@media (max-width:560px) and (min-height:620px) and (max-height:740px) and (orientation:portrait) {
  html body.resource-page-suppliers #main-content > .supplier-page-hero {
    min-height:calc(100svh - 226px)!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-inner {
    min-height:inherit!important;
    padding:18px 18px!important;
    align-items:center!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy .kicker {
    margin-bottom:6px!important;
    font-size:.66rem!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy h1 {
    margin-bottom:10px!important;
    font-size:clamp(1.9rem,9.2vw,2.45rem)!important;
    line-height:1.02!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy > p:not(.kicker) {
    margin-bottom:7px!important;
    font-size:.88rem!important;
    line-height:1.38!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy .hero-actions {
    gap:8px!important;
    margin-top:15px!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .btn {
    min-height:42px!important;
    padding:9px 18px!important;
    font-size:.72rem!important;
  }
}
@media (max-width:560px) and (min-height:620px) and (max-height:660px) and (orientation:portrait) {
  html body.resource-page-suppliers #main-content > .supplier-page-hero {
    min-height:calc(100svh - 214px)!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy h1 {
    font-size:clamp(1.72rem,8.6vw,2.15rem)!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy > p:not(.kicker) {
    font-size:.81rem!important;
    line-height:1.3!important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .btn {
    min-height:38px!important;
    padding:7px 15px!important;
    font-size:.67rem!important;
  }
}