/* Xenora public homepage page styles (shared chrome lives in xenora-chrome.css) */
body.xh{margin:0;background:var(--color-bg-page);color:var(--color-text-primary);font:400 16px/24px var(--font-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.xh :focus-visible{box-shadow:var(--shadow-focus)}

/* hero */
.xh-hero{position:relative;border-radius:var(--radius-5);min-height:520px;background:var(--color-bg-subtle) url(../images/home/hero-kochi.jpg) center 70%/cover no-repeat;display:flex;flex-direction:column;align-items:center;padding:88px var(--space-6) var(--space-8)}
.xh-hero__title{text-align:center;font:700 40px/48px var(--font-heading);letter-spacing:-.01em}
.xh-hero__sub{margin:var(--space-3) 0 0;font:400 14px/20px var(--font-body);text-align:center}
/* Figma "Frame 4": outer blur container */
.xh-search{margin-top:auto;box-sizing:border-box;width:100%;max-width:1152px;padding:24px;background:rgba(245,244,242,.38);-webkit-backdrop-filter:blur(48px) saturate(1.15);backdrop-filter:blur(48px) saturate(1.15);border:.5px solid var(--color-border-subtle,#EAE7E3);border-radius:32px;box-shadow:0 20px 50px 0 #00000033}
.xh-search form{display:flex;gap:12px;align-items:stretch}
.xh-search .xh-field{min-height:56px;padding:8px 16px;gap:16px;border-radius:20px}
.xh-search .xh-field--where{flex:545.5 1 0}
.xh-search .xh-field--when{flex:322.5 1 0}
.xh-search .xh-btn{flex:none;width:211px;height:56px;min-height:56px;padding:0;border-radius:20px;font:600 14px/20px var(--font-body)}
.xh-search__error{display:none;margin:var(--space-2) 0 0;font:400 14px/20px var(--font-body);color:var(--color-status-error)}
.xh-search__error.show{display:block}

/* sections */
.xh-section{padding:var(--space-16) 0}
.xh-section--alt{background:var(--color-bg-subtle)}
.xh-section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-8)}
.xh-section__title{font:700 32px/40px var(--font-heading);letter-spacing:-.01em}
.xh-section__sub{margin:var(--space-1) 0 0;font:400 14px/20px var(--font-body);color:var(--color-text-secondary)}
.xh-link{display:inline-flex;align-items:center;gap:var(--space-2);font:600 14px/20px var(--font-body);min-height:44px}
.xh-link:hover{text-decoration:underline}

/* category cards */
.xh-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);list-style:none;margin:0;padding:0}
.xh-cat{position:relative;display:block;aspect-ratio:3/4.2;border-radius:var(--radius-4);overflow:hidden;background:var(--color-bg-subtle)}
.xh-cat img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.xh-cat:hover img{transform:scale(1.03)}
.xh-cat::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(23,23,25,.82),transparent)}
.xh-cat__label{position:absolute;z-index:1;left:var(--space-5);right:var(--space-5);bottom:var(--space-5);display:flex;justify-content:space-between;align-items:center;color:#fff;font:500 24px/32px var(--font-heading)}
.xh-cat__label svg{border:1.5px solid #fff;border-radius:var(--radius-2);padding:5px;width:28px;height:28px}

/* stay cards */
.xh-stays{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);list-style:none;margin:0;padding:0}
.xh-stay{background:var(--color-bg-surface);border-radius:var(--radius-4);overflow:hidden;display:flex;flex-direction:column;height:100%}
.xh-stay__media{position:relative;aspect-ratio:3/1.75;overflow:hidden}
.xh-stay__media img{width:100%;height:100%;object-fit:cover}
.xh-badge{position:absolute;top:var(--space-3);left:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-1);background:var(--color-bg-surface);border-radius:var(--radius-full);padding:2px var(--space-3) 2px 8px;font:600 12px/16px var(--font-body)}
.xh-stay__body{padding:var(--space-5) var(--space-5) var(--space-4);display:flex;flex-direction:column;flex:1}
.xh-stay__meta{display:flex;justify-content:space-between;font:400 12px/18px var(--font-body);color:var(--color-text-secondary)}
.xh-stay__rating{font-weight:600;color:var(--color-text-primary)}
.xh-stay__rating svg{color:var(--color-accent-warm);vertical-align:-1px}
.xh-stay__rating span{font-weight:400;color:var(--color-text-secondary)}
.xh-stay__name{font:600 18px/26px var(--font-heading);margin-top:var(--space-1)}
.xh-stay__feat{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1);font:400 12px/18px var(--font-body);color:var(--color-text-secondary)}
.xh-stay__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}
.xh-stay__body .xh-stay__foot{margin-top:var(--space-4)}
.xh-price{font:600 16px/24px var(--font-body)}
.xh-price span{font:400 12px/18px var(--font-body);color:var(--color-text-secondary)}

/* owner CTA */
.xh-cta{position:relative;color:#fff;background:#3b4a3a url(../images/home/tea-estate.jpg) center/cover no-repeat;padding:128px 0;min-height:520px;display:flex;align-items:center}
.xh-cta::before{content:"";position:absolute;inset:0;background:rgba(36,35,38,.55)}
.xh-cta .xh-wrap{position:relative;width:100%}
.xh-pill{display:inline-flex;align-items:center;gap:var(--space-2);background:#fff;color:var(--color-text-primary);border-radius:var(--radius-full);padding:6px var(--space-4);font:600 11px/16px var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.xh-cta h2{font:600 32px/40px var(--font-heading);max-width:640px;margin:var(--space-5) 0 var(--space-3)}
.xh-cta p{margin:0 0 var(--space-6);font:400 16px/24px var(--font-body);max-width:720px}


/* responsive */
@media (max-width:1024px){
  .xh-cats{grid-template-columns:repeat(2,1fr)}
  .xh-stays{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .xh-hero{min-height:560px;padding-top:var(--space-10)}
  .xh-hero__title{font-size:32px;line-height:40px}
    .xh-search{border-radius:var(--radius-5);padding:var(--space-4)}
  .xh-cta{padding:80px 0;min-height:0}
  .xh-search form{flex-direction:column}
  .xh-search .xh-btn{width:100%}
  .xh-search .xh-field--where,.xh-search .xh-field--when{flex:none}
  .xh-section{padding:var(--space-10) 0}
  .xh-section__title{font-size:24px;line-height:32px}
  .xh-section__head{flex-direction:column;align-items:flex-start}
  .xh-stays{grid-template-columns:1fr}
  .xh-cats{gap:var(--space-3)}
  .xh-cat__label{font-size:18px;line-height:26px;left:var(--space-3);right:var(--space-3);bottom:var(--space-3)}
  .xh-cta h2{font-size:24px;line-height:32px}
}
@media (prefers-reduced-motion:reduce){.xh *{transition:none!important}}

/* category cards are <button>s that post a search */
.xh-cats form,.xh-stay__foot form{margin:0}
button.xh-cat{display:block;width:100%;padding:0;border:0;font:inherit;text-align:left;cursor:pointer}