/* PZ-1043 homepage main banner (V139 delivery, cleaned up). Markup: frontend/partials/homepage-main-banner.blade.php */
/* The layout header (desktop v2 88px / legacy mobile header) overlaps the banner top, same as the previous .homepage-hero. */

.pz-main-banner { position: relative; z-index: 5; display: block; margin-top: -88px; color: #303833; background: #fff; font-family: Satoshi, Arial, sans-serif; }
.pz-main-banner *, .pz-main-banner *::before, .pz-main-banner *::after { box-sizing: border-box; }
.pz-main-banner button, .pz-main-banner input { font: inherit; }
.pz-main-banner a, .pz-main-banner button, .pz-main-banner input { outline-offset: 5px; }
.pz-main-banner a { color: inherit; text-decoration: none; }
.pz-main-banner .pzmb-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pz-main-banner .pzmb-live-hero { position: relative; height: 562px; isolation: isolate; background: #f6f2e9; }
.pz-main-banner .pzmb-scene-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% center; z-index: -3; }
.pz-main-banner .pzmb-readability { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgba(246, 243, 236, .95) 0%, rgba(246, 243, 236, .92) 25%, rgba(246, 243, 236, .7) 40%, rgba(246, 243, 236, 0) 66%), linear-gradient(rgba(251, 249, 241, .5), transparent 22%); }
.pz-main-banner .pzmb-header-slot { height: 88px; }

/* Copy: rows are sized by pz-home-banner.js from the tallest slide copy so the search never moves between slides. */
.pz-main-banner .pzmb-hero-layout { padding-top: 29px; }
.pz-main-banner .pzmb-hero-copy { display: grid; grid-template-rows: var(--title-track, 146px) var(--description-track, 78px) 64px 50px; width: 570px; max-width: 53%; height: 338px; padding-top: var(--copy-inset, 0px); }
.pz-main-banner .pzmb-headline { align-self: start; margin: 0; padding: 0; font-family: inherit; font-size: 38px; font-weight: 400; line-height: 1.1; letter-spacing: -1.2px; color: inherit; }
.pz-main-banner .pzmb-headline > span, .pz-main-banner .pzmb-headline > strong { display: block; }
.pz-main-banner .pzmb-headline > strong { font-weight: 700; }
.pz-main-banner #pzmb-scene-description { align-self: start; max-width: 470px; margin: 0; font-size: 17px; font-weight: 500; line-height: 1.55; }

/* Search (autocomplete: frontend search.js + autocomplete.scss) */
.pz-main-banner .pzmb-search { width: 570px; max-width: 100%; }
.pz-main-banner .pzmb-banner-search { position: relative; z-index: 4; display: flex; gap: 5px; height: 64px; margin: 0; padding: 6px; border-radius: 36px; background: #fff; box-shadow: 0 7px 25px rgba(51, 58, 50, .07); }
.pz-main-banner .pzmb-banner-search input { flex: 1; min-width: 0; padding-inline: 20px; border: 0; background: transparent; font-size: 16px; color: inherit; }
.pz-main-banner .pzmb-banner-search input:focus { outline: none; }
.pz-main-banner .pzmb-banner-search:focus-within { box-shadow: 0 7px 25px rgba(51, 58, 50, .07), 0 0 0 2px #b8d6c0; }
.pz-main-banner .pzmb-banner-search button { flex-shrink: 0; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #6eac7f; color: #fff; cursor: pointer; }
.pz-main-banner .pzmb-banner-search button:hover { background: #5e9a6f; }
.pz-main-banner .pzmb-banner-search svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.pz-main-banner .autocomplete-results-container { top: 32px; border-radius: 0 0 32px 32px; }

.pz-main-banner .pzmb-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; }
.pz-main-banner .pzmb-popular > span { margin-inline-end: 5px; }
.pz-main-banner .pzmb-popular a { padding: 5px 11px; border: 1px solid #dbbc72; border-radius: 20px; background: rgba(255, 255, 255, .5); }
.pz-main-banner .pzmb-popular a:hover { background: #fff; }

.pz-main-banner .pzmb-slideshow-control { position: absolute; z-index: 4; bottom: 24px; inset-inline-end: 20px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .565); border-radius: 50%; background: rgba(255, 255, 255, .6); color: #303833; font-size: 15px; cursor: pointer; backdrop-filter: blur(8px); }
.pz-main-banner .pzmb-slideshow-control:hover { background: #fff; }
.pz-main-banner .pzmb-slideshow-control:focus-visible { outline: 2px solid #303833; outline-offset: 3px; }

/* Service row (desktop only) */
.pz-main-banner .pzmb-hero-services { position: absolute; inset-inline: 0; bottom: 16px; }
.pz-main-banner .pzmb-hero-services ul { display: flex; align-items: center; justify-content: flex-start; margin-block: 0; padding-block: 0; list-style: none; }
.pz-main-banner .pzmb-hero-services li { position: relative; isolation: isolate; display: flex; flex: 0 1 auto; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 10px 22px; color: #263523; font-size: 16px; font-weight: 700; line-height: 1.4; text-shadow: 0 1px 3px rgba(255, 255, 255, .9); }
.pz-main-banner .pzmb-hero-services li:first-child { padding-inline-start: 0; }
.pz-main-banner .pzmb-hero-services li::after { content: ""; position: absolute; inset: 3px 6px; z-index: -1; background: rgba(250, 248, 242, .75); filter: blur(13px); pointer-events: none; }
.pz-main-banner .pzmb-hero-services li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 17px; bottom: 17px; width: 1px; background: rgba(61, 78, 52, .32); }
.pz-main-banner .pzmb-hero-services svg { flex: none; width: 19px; height: 19px; fill: none; stroke: #405b35; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pz-main-banner .pzmb-hero-services span { font-weight: 600; white-space: nowrap; }

@media (max-width: 1200px) and (min-width: 701px) {
    .pz-main-banner .pzmb-hero-copy { max-width: 55%; }
}

/* Mobile: the photo covers the whole banner (behind the header too) under a light translucent veil; service row hidden. */
@media (max-width: 700px) {
    .pz-main-banner .pzmb-live-hero { height: 402px; }
    .pz-main-banner .pzmb-scene-photo { object-position: 78% center; }
    .pz-main-banner .pzmb-readability { background: linear-gradient(90deg, rgba(247, 244, 237, .4) 0%, rgba(247, 244, 237, 0) 70%), linear-gradient(rgba(247, 244, 237, .8) 0%, rgba(247, 244, 237, .66) 55%, rgba(247, 244, 237, .45) 100%); }
    .pz-main-banner .pzmb-hero-layout { padding-top: 12px; }
    .pz-main-banner .pzmb-hero-copy { grid-template-rows: var(--title-track, 128px) var(--description-track, 60px) 54px 40px; width: 100%; max-width: none; height: 282px; }
    .pz-main-banner .pzmb-headline { max-width: 350px; font-size: 27px; letter-spacing: -.7px; }
    .pz-main-banner #pzmb-scene-description { max-width: 350px; font-size: 14px; line-height: 1.45; }
    .pz-main-banner .pzmb-search { width: 100%; }
    .pz-main-banner .pzmb-banner-search { height: 54px; box-shadow: 0 5px 22px rgba(51, 58, 50, .07); }
    .pz-main-banner .pzmb-banner-search input { padding-inline: 12px; font-size: 14px; }
    .pz-main-banner .pzmb-banner-search button { width: 42px; height: 42px; }
    .pz-main-banner .autocomplete-results-container { top: 27px; border-radius: 0 0 27px 27px; }
    .pz-main-banner .pzmb-popular { flex-wrap: nowrap; justify-content: center; gap: 5px; margin-top: 10px; font-size: 11px; }
    .pz-main-banner .pzmb-popular > span { display: none; }
    .pz-main-banner .pzmb-popular a { padding: 5px 10px; border-color: #d0c6a9; background: rgba(255, 255, 255, .79); white-space: nowrap; }
    .pz-main-banner .pzmb-slideshow-control { top: 94px; bottom: auto; inset-inline-end: 10px; width: 28px; height: 28px; font-size: 13px; }
    .pz-main-banner .pzmb-hero-services { display: none; }
}