/* Home v3: hero-led search, image-rich collections and a calm closing rhythm.
   Builds on the tokens in experience.css; motion lives in motion.css.
   Layers: header 100, modal backdrop 390, modal 400, mobile navigation 900. */

/* ---------- Hero ---------- */
.home-hero {padding: 16px 0 8px; background: var(--canvas)}
.home-hero__stage {position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(460px, 46vw, 600px); padding: 56px 64px 132px; overflow: hidden; border-radius: var(--radius-xl); background: #2a1d23}
.home-hero__media {position: absolute; inset: 0; z-index: -2}
.home-hero__media picture, .home-hero__media img {display: block; width: 100%; height: 100%}
.home-hero__media img {object-fit: cover; object-position: 28% 62%}
.home-hero__stage::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgb(26 12 19 / 74%) 0%, rgb(26 12 19 / 42%) 36%, rgb(26 12 19 / 0%) 66%), linear-gradient(to top, rgb(26 12 19 / 40%), rgb(26 12 19 / 0%) 42%)}
.home-hero__copy {max-width: 540px; color: #fff}
.home-hero__badge {display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 14px 7px 12px; border: 1px solid rgb(255 255 255 / 26%); border-radius: var(--radius-pill); background: rgb(255 255 255 / 14%); color: #fff; font-size: .8125rem; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px)}
.home-hero__badge .ui-icon {width: 17px; height: 17px}
.guest-home .home-hero h1 {margin: 0 0 14px; color: #fff; font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 1.32; font-weight: 700; text-shadow: 0 2px 30px rgb(0 0 0 / 22%)}
.home-hero h1 em {display: block; width: fit-content; color: #ffd9ea; font-style: normal; background: linear-gradient(transparent 72%, rgb(255 255 255 / 20%) 72% 94%, transparent 94%) no-repeat 100% 0 / 100% 100%}
.home-hero__copy p {max-width: 420px; margin: 0; color: rgb(255 255 255 / 88%); font-size: 1.0625rem; line-height: 2}

/* ---------- Search ---------- */
.home-search-wrap {position: relative; width: calc(100% - 64px); margin: -96px auto 0; scroll-margin-top: 92px}
.home-search {display: grid; grid-template-columns: minmax(180px, 1.35fr) repeat(2, minmax(125px, .9fr)) minmax(100px, .7fr) minmax(150px, 1fr) auto; align-items: end; padding: 20px 18px 18px; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: var(--elev-3)}
.search-field {display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 0 14px; border-inline-end: 1px solid var(--border)}
.search-field > span {font-size: .8125rem; color: var(--muted)}
.search-field--type {border-inline-end: 0}
.search-field--keyword {grid-column: 1 / -1; margin: 0 0 16px; padding: 0 14px 14px; border: 0; border-bottom: 1px solid var(--border)}
.search-keyword-input {display: flex; gap: 10px; align-items: center}
.search-keyword-input .ui-icon {width: 20px; height: 20px; color: var(--brand); flex-shrink: 0}
.search-keyword-input input {width: 100%; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem}
.search-keyword-input input::placeholder {color: var(--muted); opacity: 1}
.search-keyword-input:focus-within {outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px}
.search-field select {width: 100%; height: 44px; border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: .875rem; cursor: pointer}
.search-field select option {background: var(--surface); color: var(--ink)}
.guest-home .home-search__submit {height: 56px; min-width: 128px; margin-inline-start: 8px; padding-inline: 26px; font-size: 1rem; box-shadow: 0 10px 24px rgb(142 23 79 / 28%)}
.home-search__submit svg {width: 20px; height: 20px}
.home-search__status {grid-column: 1 / -1; color: var(--home-error); font-size: .875rem; margin: 16px 14px 0}
.home-search__status:empty {display: none}
.search-field [aria-invalid="true"], .search-field .search-date-trigger[aria-invalid="true"] {outline: 2px solid var(--home-error); outline-offset: 3px; border-radius: 8px}
.home-quick {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 20px}
.home-quick > span {margin-inline-end: 4px; color: var(--muted); font-size: .8125rem}
.home-quick a {display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: .8125rem; font-weight: 500; transition: border-color .2s ease, color .2s ease, background-color .2s ease}
.home-quick a:hover {border-color: var(--brand); background: var(--tint); color: var(--brand)}

/* ---------- Destination and Jalali-calendar dialogs (structure used by main.js) ---------- */
.destination-picker{position:relative}.destination-picker__trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0;border:0;color:#fff;background:transparent;text-align:right;cursor:pointer}.destination-picker__trigger>span{min-width:0}.destination-picker__trigger b,.destination-picker__trigger small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.destination-picker__trigger b{font-size:.86rem}.destination-picker__trigger small{margin-top:1px;color:rgba(255,255,255,.58);font-size:.61rem;font-weight:400}.destination-picker__trigger>.ui-icon{width:21px;height:21px;flex:0 0 21px;color:#f2b8cc}.destination-panel{position:absolute;z-index:40;top:calc(100% + 18px);right:-24px;width:min(570px,calc(100vw - 40px));max-height:min(610px,72vh);padding:18px;border:1px solid #eadde2;border-radius:20px;color:var(--ink);background:#fff;box-shadow:0 26px 80px rgba(26,15,20,.3);overflow:hidden}.destination-panel[hidden]{display:none}.destination-panel__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.destination-panel__header b,.destination-panel__header small{display:block}.destination-panel__header b{font-family:Peyda,IRANSansX,sans-serif;font-size:1.05rem}.destination-panel__header small{margin-top:2px;color:var(--muted);font-size:.68rem}.destination-panel__header button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:0;border-radius:12px;color:var(--ink);background:var(--soft);cursor:pointer}.destination-panel__header button .ui-icon{width:20px;height:20px}.destination-panel__search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 13px;border:1px solid var(--border);border-radius:13px;background:#fff}.destination-panel__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(142,23,79,.1)}.destination-panel__search .ui-icon{width:20px;height:20px;flex:0 0 20px;color:var(--muted)}.destination-panel__search input{width:100%;height:46px;padding:0;border:0;outline:0;color:var(--ink);background:transparent;font-family:inherit}.destination-panel__tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:13px 0;padding:4px;border-radius:12px;background:var(--soft)}.destination-panel__tabs button{min-height:40px;border:0;border-radius:9px;color:var(--muted);background:transparent;font-weight:700;cursor:pointer}.destination-panel__tabs button.is-active{color:var(--brand);background:#fff;box-shadow:0 3px 12px rgba(49,27,37,.08)}.destination-options{max-height:370px;overflow:auto;overscroll-behavior:contain;padding-left:4px}.destination-options[hidden]{display:none}.destination-options__heading{display:block;margin:10px 2px 8px;color:var(--muted);font-size:.65rem}.destination-options__popular{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}.destination-options__popular button{min-height:68px;padding:10px;border:1px solid #eadde2;border-radius:12px;color:var(--ink);background:#fffafc;cursor:pointer}.destination-options__popular b,.destination-options__popular small{display:block}.destination-options__popular b{font-size:.78rem}.destination-options__popular small{margin-top:2px;color:var(--muted);font-size:.6rem}.destination-options__list{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}.destination-options__list button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:8px 10px;border:0;border-radius:10px;color:var(--ink);background:transparent;text-align:right;cursor:pointer}.destination-options__list button:hover,.destination-options__list button:focus-visible,.destination-options button.is-selected{color:var(--brand);background:var(--tint);outline:0}.destination-options__list button span{min-width:0}.destination-options__list b,.destination-options__list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.destination-options__list b{font-size:.76rem}.destination-options__list small{margin-top:2px;color:var(--muted);font-size:.58rem}.destination-options__list .ui-icon{width:16px;height:16px;flex:0 0 16px;color:var(--muted)}.destination-option__arrow{flex:0 0 auto;color:var(--muted);font-size:.9rem}.destination-panel__empty{margin:20px 0;color:var(--muted);font-size:.78rem;text-align:center}
.destination-options__global{display:grid;width:100%;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:11px;min-height:64px;margin-bottom:12px;padding:10px 12px;border:1px solid #dfc6d1;border-radius:14px;color:var(--brand-dark);background:#fff8fb;text-align:right;cursor:pointer}.destination-options__global:hover,.destination-options__global:focus-visible{border-color:var(--brand);outline:3px solid rgba(142,23,79,.12)}.destination-options__global-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;color:var(--brand);background:var(--tint)}.destination-options__global-icon .ui-icon{width:22px;height:22px}.destination-options__global>span:nth-child(2){min-width:0}.destination-options__global b,.destination-options__global small{display:block}.destination-options__global b{font-size:.8rem}.destination-options__global small{margin-top:2px;color:var(--muted);font-size:.59rem}.destination-options__global-check{width:18px;height:18px;color:transparent}.destination-options__global.is-selected .destination-options__global-check{color:var(--brand)}
.search-date-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0;border:0;color:#fff;background:transparent;text-align:right;cursor:pointer}.search-date-trigger>span{min-width:0}.search-date-trigger b,.search-date-trigger small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-date-trigger b{font-size:.82rem}.search-date-trigger small{margin-top:1px;color:rgba(255,255,255,.58);font-size:.59rem;font-weight:400}.search-date-trigger>.ui-icon{width:20px;height:20px;flex:0 0 20px;color:#f2b8cc}.search-date-trigger.has-value b{color:#fff}.search-date-trigger:focus-visible,.search-calendar-panel button:focus-visible{outline:3px solid rgba(142,23,79,.22);outline-offset:2px}.search-field .search-date-trigger[aria-invalid=true]{outline:3px solid #ffb5a3;outline-offset:3px;border-radius:8px}
.search-calendar-panel{position:fixed;z-index:240;top:50%;left:50%;width:min(470px,calc(100vw - 32px));max-height:calc(100svh - 40px);padding:18px;overflow:auto;transform:translate(-50%,-50%);border:1px solid #eadde2;border-radius:22px;color:var(--ink);background:#fff;box-shadow:0 30px 100px rgba(25,14,19,.42)}.search-calendar-panel[hidden]{display:none}.search-calendar-panel__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.search-calendar-panel__header b,.search-calendar-panel__header small{display:block}.search-calendar-panel__header b{font-family:Peyda,IRANSansX,sans-serif;font-size:1.1rem}.search-calendar-panel__header small{min-height:20px;margin-top:2px;color:var(--muted);font-size:.7rem}.search-calendar-panel__header>button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:0;border-radius:12px;color:var(--ink);background:var(--soft);cursor:pointer}.search-calendar-panel__header .ui-icon{width:20px;height:20px}.search-calendar-panel__toolbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;padding:9px 0;border-block:1px solid var(--border)}.search-calendar-panel__toolbar button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:0;border-radius:12px;color:var(--brand);background:var(--tint);cursor:pointer}.search-calendar-panel__toolbar button:disabled{color:#bcb3b7;background:var(--soft);cursor:not-allowed}.search-calendar-panel__toolbar .ui-icon{width:20px;height:20px}.search-calendar-panel__toolbar strong{text-align:center;font-family:Peyda,IRANSansX,sans-serif;font-size:.95rem}.search-calendar-panel__months{padding-top:12px}.search-calendar-panel__month[hidden]{display:none}.search-calendar-panel__weekdays,.search-calendar-panel__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.search-calendar-panel__weekdays{margin-bottom:5px}.search-calendar-panel__weekdays span{padding:5px 0;color:var(--muted);font-size:.68rem;font-weight:700;text-align:center}.search-calendar-panel__weekdays span:last-child{color:#a83232}.search-calendar-panel__blank{min-height:48px}.search-calendar-panel__days button{position:relative;display:flex;min-width:0;min-height:48px;padding:5px 2px;align-items:center;justify-content:center;flex-direction:column;border:1px solid transparent;border-radius:11px;color:var(--ink);background:#fff;cursor:pointer}.search-calendar-panel__days button:hover:not(:disabled){border-color:#d9a9bf;background:var(--tint)}.search-calendar-panel__days button b{font-size:.76rem}.search-calendar-panel__days button small{color:var(--brand);font-size:.48rem}.search-calendar-panel__days button:disabled{color:#b9b2b6;background:#f7f5f6;cursor:not-allowed}.search-calendar-panel__days button.is-range{border-radius:5px;background:#f7e5ec}.search-calendar-panel__days button.is-entry,.search-calendar-panel__days button.is-exit{border-color:var(--brand);border-radius:11px;color:#fff;background:var(--brand);box-shadow:0 0 0 3px rgba(142,23,79,.12)}.search-calendar-panel__days button.is-entry small,.search-calendar-panel__days button.is-exit small{color:#fff}.search-calendar-panel__footer{display:grid;grid-template-columns:1fr 8px 1fr auto;align-items:center;gap:10px;margin-top:14px;padding:13px;border:1px solid #eadde2;border-radius:14px;background:#fffafb}.search-calendar-panel__footer span,.search-calendar-panel__footer b{display:block}.search-calendar-panel__footer span{color:var(--muted);font-size:.58rem}.search-calendar-panel__footer b{margin-top:2px;font-size:.68rem}.search-calendar-panel__footer i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.search-calendar-panel__footer button{min-height:40px;padding:7px 9px;border:0;color:var(--brand);background:transparent;font-size:.65rem;font-weight:700;cursor:pointer}

.search-modal-backdrop{position:fixed;z-index:390;inset:0;background:rgba(22,13,18,.66);backdrop-filter:blur(8px);animation:search-modal-fade .18s ease-out}.search-modal-backdrop[hidden]{display:none}body.search-modal-open{overflow:hidden}.destination-panel,.search-calendar-panel{z-index:400;animation:search-modal-rise .2s ease-out}.destination-panel{position:fixed;top:50%;right:auto;left:50%;width:min(680px,calc(100vw - 48px));max-height:calc(100svh - 48px);transform:translate(-50%,-50%);box-shadow:0 32px 110px rgba(18,10,14,.45)}.destination-options{max-height:min(420px,calc(100svh - 300px))}.search-calendar-panel{width:min(500px,calc(100vw - 48px));max-height:calc(100svh - 48px);box-shadow:0 32px 110px rgba(18,10,14,.45)}@keyframes search-modal-fade{from{opacity:0}to{opacity:1}}@keyframes search-modal-rise{from{opacity:0;transform:translate(-50%,calc(-50% + 14px))}to{opacity:1;transform:translate(-50%,-50%)}}

/* Dialogs use the page tokens, including dark mode. */
.destination-panel, .search-calendar-panel {background: var(--surface); color: var(--ink); border-color: var(--border); border-radius: 24px; animation: none}
.destination-picker__trigger, .search-date-trigger {color: var(--ink); min-height: 44px}
.destination-picker__trigger b, .search-date-trigger b {font-size: .875rem}
.destination-picker__trigger small, .search-date-trigger small {color: var(--muted); font-size: .75rem; margin-top: 2px}
.destination-picker__trigger small {max-width: 160px}
.destination-picker__trigger > .ui-icon, .search-date-trigger > .ui-icon {color: var(--brand)}
.search-date-trigger.has-value b {color: var(--brand)}
.destination-panel__header small, .search-calendar-panel__header small {font-size: .8125rem}
.destination-panel__header button, .search-calendar-panel__header > button {background: var(--home-soft)}
.destination-panel__search {background: var(--surface); border-color: var(--border); border-radius: 12px}
.destination-panel__tabs {background: var(--home-soft)}
.destination-panel__tabs button.is-active {background: var(--surface); color: var(--brand)}
.destination-options__popular button, .destination-options__global {background: var(--canvas); color: var(--ink); border-color: var(--border); border-radius: 12px}
.destination-options__popular b, .destination-options__list b, .destination-options__global b {font-size: .875rem}
.destination-options__popular small, .destination-options__list small, .destination-options__global small {font-size: .75rem}
.destination-options__heading {font-size: .8125rem}
.destination-options button.is-selected {background: var(--tint); color: var(--brand); border-color: var(--brand)}
.search-calendar-panel__days button {color: var(--ink); background: var(--surface)}
.search-calendar-panel__days button b {font-size: .875rem}
.search-calendar-panel__days button small {font-size: .6875rem}
.search-calendar-panel__days button:disabled, .search-calendar-panel__toolbar button:disabled {color: var(--muted); background: var(--home-soft); opacity: .5}
.search-calendar-panel__days button.is-range {background: var(--tint)}
.search-calendar-panel__days button.is-entry, .search-calendar-panel__days button.is-exit {background: var(--home-action); color: var(--home-on-action); border-color: var(--home-action)}
.search-calendar-panel__days button.is-entry small, .search-calendar-panel__days button.is-exit small {color: var(--home-on-action)}
.search-calendar-panel__footer {background: var(--canvas); border-color: var(--border); grid-template-columns: 1fr 1fr auto}
.search-calendar-panel__footer i {display: none}
.search-calendar-panel__footer span {font-size: .75rem}
.search-calendar-panel__footer b {font-size: .8125rem}
.search-calendar-panel__footer button {font-size: .8125rem; min-height: 44px}
.search-modal-backdrop {background: rgb(25 17 23 / 64%); backdrop-filter: none; animation: none}

/* ---------- Shared section frame ---------- */
.guest-home .surface-section, .guest-home .soft-section {padding-block: var(--section-space); background: var(--canvas)}
.guest-home .home-categories {padding-top: 56px}
.guest-home .section-heading {max-width: 640px; margin-bottom: 28px}
.featured-stays {scroll-margin-top: 88px}
.featured-stays__heading, .collection-heading {display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px}
.featured-stays__heading .section-heading, .collection-heading .section-heading {margin-bottom: 0}
.featured-stays__all {display: inline-flex; flex-shrink: 0; min-height: 44px; align-items: center; gap: 10px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 600; white-space: nowrap; transition: border-color .2s ease, color .2s ease}
.featured-stays__all:hover {border-color: var(--brand); color: var(--brand)}
.featured-stays__all span[aria-hidden="true"] {color: var(--brand); font-size: 1.1rem}

/* ---------- Categories: portrait image tiles ---------- */
.category-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px}
.category-card {position: relative; display: block; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--home-soft); isolation: isolate}
.category-card__image {display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg)}
.category-card__body {position: absolute; inset: auto 0 0; padding: 40px 16px 16px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(transparent, rgb(20 10 16 / 74%))}
.category-card h3, .category-card:hover h3 {margin: 0 0 2px; color: #fff; font-size: 1.0625rem}
.category-card__count {display: block; color: rgb(255 255 255 / 82%); font-size: .8125rem}
.category-card p {display: none}

/* ---------- Stay cards ---------- */
.home-stay-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px}
.home-stay-card {position: relative; display: block; min-width: 0; border-radius: var(--radius-lg); background: transparent}
.home-stay-card__media {overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--home-soft)}
.home-stay-card__media img {width: 100%; height: 100%; object-fit: cover}
.home-stay-card__body {position: static; padding: 14px 4px 0}
.home-stay-card__verified {position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px 6px 10px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 92%); color: var(--brand); font-size: .75rem; font-weight: 600; box-shadow: var(--elev-1); backdrop-filter: blur(8px)}
.home-stay-card__verified .ui-icon {width: 14px; height: 14px}
.home-stay-card__location {display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: .8125rem}
.home-stay-card__location .ui-icon {width: 15px; height: 15px}
.home-stay-card__rating {float: left; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: .8125rem}
.home-stay-card__rating .ui-icon {width: 15px; height: 15px; color: #d99a1c; fill: currentColor}
.home-stay-card__rating small {color: var(--muted); font-size: .75rem}
.home-stay-card h3 {margin: 6px 0 4px; color: var(--ink-strong); font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease}
.home-stay-card:hover h3 {color: var(--brand)}
.home-stay-card__body > p {margin: 0; color: var(--muted); font-size: .875rem}
.home-stay-card__footer {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px}
.home-stay-card__footer span {display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px}
.home-stay-card__footer strong {color: var(--ink-strong); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums}
.home-stay-card__footer small {color: var(--muted); font-size: .8125rem}
.home-stay-card__footer > b {display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--brand); font-size: 1rem; font-weight: 400}
:root[data-home-theme="dark"] .home-stay-card__verified {background: rgb(38 32 38 / 88%)}
.featured-stays__empty {display: flex; align-items: center; gap: 20px; padding: 28px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface)}
.featured-stays__empty > span {display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: var(--radius-md); background: var(--tint); color: var(--brand)}
.featured-stays__empty > span .ui-icon {width: 26px; height: 26px}
.featured-stays__empty h3 {margin: 0 0 4px; font-size: 1.125rem}
.featured-stays__empty p {margin: 0; font-size: .875rem; color: var(--muted)}
.featured-stays__empty .button {margin-inline-start: auto}

/* ---------- Destinations: editorial image tiles ---------- */
.guest-home .popular-cities {background: var(--surface)}
.popular-city-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 220px; gap: 16px}
.popular-city-grid:has(> :nth-child(6):last-child) {grid-template-columns: repeat(4, minmax(0, 1fr))}
.popular-city-grid:has(> :nth-child(6):last-child) > :nth-child(-n+2) {grid-column: span 2}
.popular-city-card {position: relative; isolation: isolate; display: flex; align-items: flex-end; min-width: 0; padding: 20px; overflow: hidden; border-radius: var(--radius-lg); background: #2a1d23; color: #fff}
.popular-city-card > img {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover}
.popular-city-card::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(20 10 16 / 72%), rgb(20 10 16 / 0%) 58%)}
.popular-city-card__content {min-width: 0}
.popular-city-card__content strong {display: block; color: #fff; font-size: 1.375rem; line-height: 1.4}
.popular-city-card__content small {display: block; color: rgb(255 255 255 / 84%); font-size: .8125rem}
.popular-city-card > b {position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 92%); color: var(--brand); font-weight: 400}
.popular-city-card:hover strong {color: #fff}

/* ---------- Top rated ---------- */
.home-stay-grid--rated {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
.home-stay-card--rated {display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--elev-1)}
.home-stay-card--rated .home-stay-card__media {aspect-ratio: auto; height: 100%; min-height: 160px; border-radius: var(--radius-md)}
.home-stay-card--rated .home-stay-card__body {position: relative; padding: 4px 0; align-self: center}

/* ---------- How it works ---------- */
.guest-home .how-section {padding-top: 8px}
.steps-grid {position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px}
.steps-grid article {position: relative; padding: 28px 24px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-1)}
.steps-grid article > span {display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--home-action); color: var(--home-on-action); font-size: 1.125rem; font-weight: 700; box-shadow: 0 0 0 6px var(--brand-glow)}
.steps-grid h3 {font-size: 1.125rem; margin: 0 0 6px}
.steps-grid p {color: var(--muted); font-size: .9375rem; margin: 0}

/* ---------- Trust band ---------- */
.trust-section {position: relative; padding-block: var(--section-space); overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, #5a1838 0%, #2a121e 55%, #1e1016 100%); color: #f5eaf0; scroll-margin-top: 88px}
.trust-section__grid {display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 72px}
.trust-section__copy h2 {max-width: 420px; color: #fff}
.trust-section__copy p {max-width: 420px; margin: 16px 0 28px; color: rgb(255 255 255 / 78%); font-size: 1rem; line-height: 2}
.trust-section .button--light {background: #fff; color: var(--color-action-primary); border-color: #fff; box-shadow: none}
.trust-section .button--light:hover {background: #f7e8ef; color: var(--color-action-primary-hover)}
.trust-list {display: grid; gap: 14px}
.trust-list article {display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--radius-lg); background: rgb(255 255 255 / 6%); backdrop-filter: blur(6px)}
.trust-list h3 {margin: 0 0 4px; color: #fff; font-size: 1.0625rem}
.trust-list p {margin: 0; color: rgb(255 255 255 / 72%); font-size: .9375rem}
.trust-list .icon-box {display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--radius-md); background: rgb(255 255 255 / 12%); color: #ffc9df}

/* ---------- Host callout: image-led banner ---------- */
.host-callout {position: relative; isolation: isolate; display: flex; align-items: center; min-height: 400px; padding: 56px; overflow: hidden; border-radius: var(--radius-xl); background: #2a1d23; color: #fff}
.host-callout__image {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover}
.host-callout::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, rgb(20 10 16 / 82%) 0%, rgb(20 10 16 / 50%) 40%, rgb(20 10 16 / 0%) 72%)}
.host-callout__copy {max-width: 440px}
.host-callout__copy h2 {color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.5; margin: 0 0 10px}
.host-callout__copy p {color: rgb(255 255 255 / 82%); font-size: 1rem; margin: 0 0 24px}
.host-callout .button {background: #fff; color: var(--color-action-primary); border-color: #fff}
.host-callout .button:hover {background: #f7e8ef; color: var(--color-action-primary-hover)}

/* ---------- FAQ ---------- */
.faq-grid {display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start}
.faq-list {display: grid; gap: 10px}
.faq-item {border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: box-shadow .25s ease, border-color .25s ease}
.faq-item.is-open {border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); box-shadow: var(--elev-2)}
.faq-item button {display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; min-height: 64px; padding: 16px 20px; border: 0; background: transparent; color: var(--ink); text-align: right; font-weight: 600; font-size: .9375rem; cursor: pointer}
.faq-icon {display: grid; width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--brand)}
.faq-item > div > p {margin: 0; padding: 0 20px 20px; color: var(--muted); font-size: .9375rem}
.faq-item.is-open .faq-icon {transform: rotate(45deg)}

/* ---------- Header and footer details specific to home ---------- */
.home-theme-toggle {display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer}
.home-theme-toggle .ui-icon {width: 20px; height: 20px; animation: theme-icon-in .5s cubic-bezier(.34, 1.4, .64, 1) backwards}
@keyframes theme-icon-in {from {opacity: 0; rotate: -90deg; scale: .5}}
.home-theme-toggle:hover {color: var(--brand); border-color: var(--brand)}

/* ---------- Motion (timing tokens from motion.css) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .home-hero__copy > * {animation: motion-rise .8s var(--motion-ease-out) backwards}
    .home-hero__copy h1 {animation-delay: .08s}
    .home-hero__copy p {animation-delay: .16s}
    .home-hero h1 em {animation: hero-underline 1s var(--motion-ease-out) .6s backwards}
    .home-hero__media {animation: motion-fade 1s ease backwards}
    .home-hero__media img {animation: motion-ken-burns 2.8s var(--motion-ease-out) backwards}
    .home-search {animation: motion-rise .9s var(--motion-ease-out) .24s backwards}
    .home-quick {animation: motion-fade .8s ease .5s backwards}
    .home-search__submit svg {transition: rotate .4s var(--motion-ease-spring)}
    .home-search__submit:hover svg {rotate: -12deg}
    .home-search:focus-within {box-shadow: 0 10px 24px rgb(52 24 38 / 10%), 0 34px 80px rgb(52 24 38 / 20%)}
    .popular-city-card > img, .host-callout__image {transition: transform .9s var(--motion-ease-out)}
    .popular-city-card:hover > img, .host-callout:hover .host-callout__image {transform: scale(1.05)}
    .popular-city-card > b {transition: translate .3s var(--motion-ease-spring), background-color .2s ease}
    .popular-city-card:hover > b {translate: -4px 0}
}
@keyframes hero-underline {from {background-size: 0 100%}}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .home-hero__stage {padding: 48px 40px 128px}
    .home-search-wrap {width: calc(100% - 40px)}
    .home-search {grid-template-columns: 1.3fr 1fr 1fr; gap: 16px 0}
    .search-field--keyword {margin-bottom: 0}
    .search-field:nth-child(4) {border-inline-end: 0}
    .search-field--type {border-inline-end: 1px solid var(--border)}
    .guest-home .home-search__submit {margin: 0 12px}
    .home-stay-grid--rated {grid-template-columns: 1fr}
    .trust-section__grid, .faq-grid {gap: 40px}
}
@media (max-width: 900px) {
    .home-stay-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .popular-city-grid, .popular-city-grid:has(> :nth-child(6):last-child) {grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px}
    .popular-city-grid:has(> :nth-child(6):last-child) > :nth-child(-n+2) {grid-column: auto}
    .steps-grid {grid-template-columns: 1fr}
    .trust-section__grid, .faq-grid {grid-template-columns: 1fr}
}
@media (max-width: 767px) {
    .home-hero {padding-top: 12px}
    .home-hero__stage {align-items: flex-end; min-height: 272px; padding: 20px 18px 64px; border-radius: var(--radius-lg)}
    .home-hero__stage::after {background: linear-gradient(to top, rgb(26 12 19 / 82%) 8%, rgb(26 12 19 / 30%) 52%, rgb(26 12 19 / 0%) 78%)}
    .home-hero__media img {object-position: center 70%}
    .home-hero__badge {margin-bottom: 10px; padding: 5px 12px 5px 10px; font-size: .75rem}
    .guest-home .home-hero h1 {font-size: clamp(1.6rem, 7.4vw, 2.2rem); margin-bottom: 6px}
    .home-hero h1 em {display: inline}
    .home-hero__copy p {font-size: .875rem; line-height: 1.8}
    .home-search-wrap {width: calc(100% - 20px); margin-top: -44px}
    .home-search {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 0; padding: 12px 8px; border-radius: 24px}
    .search-field--keyword {margin: 0}
    .search-keyword-input input {height: 36px}
    .search-field {padding-inline: 10px}
    .search-field--keyword {padding-bottom: 10px}
    .search-field--destination {grid-column: 1 / -1; border-inline-end: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border)}
    .destination-picker__trigger small {max-width: none}
    .search-field--type, .search-field:nth-child(4) {border-inline-end: 0}
    .search-field:nth-child(3), .search-field--guests {border-inline-end: 1px solid var(--border)}
    .guest-home .home-search__submit {grid-column: 1 / -1; width: calc(100% - 20px); margin: 4px 10px 0; height: 52px}
    .search-date-trigger small {display: none}
    .home-quick {justify-content: flex-start; flex-wrap: nowrap; margin: 14px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none}
    .home-quick::-webkit-scrollbar {display: none}
    .home-quick a {flex: 0 0 auto}
    .home-quick > span {flex: 0 0 auto}

    .guest-home .surface-section, .guest-home .soft-section, .trust-section {padding-block: 32px}
    .featured-stays__all-extra {display: none}
    .guest-home .home-categories {padding-top: 32px}
    .guest-home .section-heading {margin-bottom: 16px}
    .guest-home .section-heading h2 {font-size: 1.3rem}
    .guest-home .section-heading p {font-size: .875rem; line-height: 1.8}
    .featured-stays__heading, .collection-heading {gap: 12px; margin-bottom: 16px}
    .featured-stays__all {min-height: 38px; padding: 0 12px; font-size: .8125rem}

    .category-grid, .home-stay-grid, .popular-city-grid, .popular-city-grid:has(> :nth-child(6):last-child) {display: flex; gap: 12px; margin-inline: -16px; padding: 4px 16px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none}
    .category-grid::-webkit-scrollbar, .home-stay-grid::-webkit-scrollbar, .popular-city-grid::-webkit-scrollbar {display: none}
    .category-grid > *, .home-stay-grid > *, .popular-city-grid > * {flex: 0 0 auto; scroll-snap-align: start}
    .category-card {width: 38%; min-width: 132px}
    .category-card__body {padding: 32px 12px 12px}
    .category-card h3, .category-card:hover h3 {font-size: .9375rem}
    .category-card__count {font-size: .75rem}
    .home-stay-card {width: 80%; max-width: 320px}
    .home-stay-card h3 {font-size: 1rem}
    .home-stay-card__body > p {font-size: .8125rem}
    .home-stay-card__footer > b {width: 32px; height: 32px}
    .home-stay-card--rated {display: block; width: 80%; padding: 0; border: 0; background: transparent; box-shadow: none}
    .home-stay-card--rated .home-stay-card__media {height: auto; min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg)}
    .home-stay-card--rated .home-stay-card__body {padding: 12px 4px 0}
    .popular-city-card {width: 46%; min-width: 150px; height: 190px; padding: 14px}
    .popular-city-card__content strong {font-size: 1.0625rem}
    .popular-city-card__content small {font-size: .75rem}
    .popular-city-card > b {display: none}
    .guest-home .popular-cities {background: var(--canvas)}

    .steps-grid {gap: 10px}
    .steps-grid article {display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px}
    .steps-grid article > span {grid-row: span 2; width: 40px; height: 40px; margin: 0; font-size: 1rem; box-shadow: 0 0 0 4px var(--brand-glow)}
    .steps-grid h3 {font-size: 1rem; margin: 0}
    .steps-grid p, .trust-list p, .faq-item > div > p {font-size: .875rem}
    .trust-section__copy p {margin: 8px 0 18px}
    .trust-list {gap: 10px}
    .trust-list article {padding: 14px}
    .trust-list h3 {font-size: 1rem}
    .trust-list .icon-box {width: 40px; height: 40px; flex-basis: 40px}
    .host-callout {align-items: flex-end; min-height: 360px; padding: 24px 20px; border-radius: var(--radius-lg)}
    .host-callout::after {background: linear-gradient(to top, rgb(20 10 16 / 86%) 10%, rgb(20 10 16 / 20%) 70%)}
    .host-callout .button {width: 100%}
    .faq-item button {min-height: 56px; padding: 14px 16px; font-size: .9rem}
    .faq-item > div > p {padding: 0 16px 16px}
    .featured-stays__empty {flex-direction: column; text-align: center; padding: 24px}
    .featured-stays__empty .button {margin: 0; width: 100%}
}
@media (max-width: 650px) {
    .destination-panel, .search-calendar-panel {inset: auto 0 0; width: 100%; max-height: 88dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); transform: none; border-radius: 24px 24px 0 0}
    .destination-options {max-height: calc(88dvh - 220px)}
    .destination-options__list {grid-template-columns: 1fr}
    .destination-options__popular {grid-template-columns: repeat(3, 1fr)}
    .search-calendar-panel__weekdays, .search-calendar-panel__days {gap: 3px}
    .search-calendar-panel__days button, .search-calendar-panel__blank {min-height: 44px}
    .search-calendar-panel__footer {grid-template-columns: 1fr 1fr}
    .search-calendar-panel__footer button {grid-column: 1 / -1}
    body.guest-home.search-modal-open .mobile-guest-nav {visibility: hidden}
    .guest-home .guest-nav {display: none}
}
@media (max-width: 420px) {
    .guest-home .brand-lockup .brand-name {font-size: .875rem}
    .guest-home .brand-lockup img.brand-mark {width: 28px; height: 28px}
    .guest-home .guest-header__inner, .guest-home .guest-header__actions {gap: 6px}
}
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto}
    .guest-home *, .guest-home *::before, .guest-home *::after {animation: none !important; transition: none !important}
}