/* DEYNU 17.0.2.98 — Public Layout Alignment
   Aligns public marketing/discovery surfaces to the new wide shell.
   Operational/admin/social surfaces intentionally remain unchanged. */
:root{
  --deynu-public-shell-wide:1460px;
  --deynu-public-shell-content:1320px;
  --deynu-public-gutter:24px;
}

/* Wide public surfaces */
@media(min-width:761px){
  body.home-page main.container,
  body.stay-search-page main.container,
  body.location-landing-page main.container,
  body.professional-services-page main.container{
    width:100%!important;
    max-width:var(--deynu-public-shell-wide)!important;
    margin-inline:auto!important;
    padding-inline:var(--deynu-public-gutter)!important;
    box-sizing:border-box;
  }

  /* The modern home already owns its internal rhythm; remove its legacy 1240 clamp. */
  body.home-page .dh-home{
    width:100%!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-inline:0!important;
  }

  /* Content/growth surfaces stay a little narrower for reading comfort. */
  body.blog-page main.container,
  body.affiliate-page main.container,
  body.host-referral-landing-page main.container{
    width:100%!important;
    max-width:var(--deynu-public-shell-content)!important;
    margin-inline:auto!important;
    padding-inline:var(--deynu-public-gutter)!important;
    box-sizing:border-box;
  }
}

/* Directory/discovery pages and property details do not currently expose a body class.
   Use :has() only where supported; older browsers keep their existing safe layout. */
@supports selector(main:has(> .deynu-discovery-page)){
  @media(min-width:761px){
    main.container:has(> .deynu-discovery-page){
      width:100%!important;
      max-width:var(--deynu-public-shell-wide)!important;
      margin-inline:auto!important;
      padding-inline:var(--deynu-public-gutter)!important;
      box-sizing:border-box;
    }
    main.container:has(> .property-detail-page){
      width:100%!important;
      max-width:var(--deynu-public-shell-content)!important;
      margin-inline:auto!important;
      padding-inline:var(--deynu-public-gutter)!important;
      box-sizing:border-box;
    }
  }
}

/* Header background remains edge-to-edge; content aligns with the 1460 shell. */
@media(min-width:981px){
  body.home-page .site-header,
  body.stay-search-page .site-header,
  body.location-landing-page .site-header,
  body.blog-page .site-header,
  body.professional-services-page .site-header,
  body.affiliate-page .site-header,
  body.host-referral-landing-page .site-header{
    padding-inline:max(24px,calc((100vw - var(--deynu-public-shell-wide))/2 + var(--deynu-public-gutter)))!important;
  }
}
@supports selector(body:has(main.container > .deynu-discovery-page)){
  @media(min-width:981px){
    body:has(main.container > .deynu-discovery-page) .site-header,
    body:has(main.container > .property-detail-page) .site-header{
      padding-inline:max(24px,calc((100vw - var(--deynu-public-shell-wide))/2 + var(--deynu-public-gutter)))!important;
    }
  }
}

/* More width should create more useful density, not oversized cards. */
@media(min-width:1320px){
  main.container:has(> .deynu-discovery-page) .deynu-discovery-page .deynu-property-grid,
  main.container:has(> .deynu-discovery-page) .deynu-discovery-page .deynu-section-items.is-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  /* /stays has a filter rail; keep its intentional three-column result density. */
  body.stay-search-page .deynu-search-results-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Slightly relax selected public hero/detail shells without stretching readable copy. */
@media(min-width:1100px){
  body.professional-services-page .pro-services-shell,
  body.location-landing-page .deynu-destination-page{
    width:100%;
    max-width:none;
  }

  main.container:has(> .property-detail-page) .property-detail-page{
    width:100%;
    max-width:none;
  }
}

/* Tablet/mobile keeps the existing tuned layouts and gutters. */
@media(max-width:760px){
  body.home-page main.container,
  body.stay-search-page main.container,
  body.location-landing-page main.container,
  body.professional-services-page main.container,
  body.blog-page main.container,
  body.affiliate-page main.container,
  body.host-referral-landing-page main.container{
    max-width:100%!important;
  }
}