/* mod_spas_hero — Spas Bangkok hero (works with the Cassiopeia "banner" position)
   Uses --spa-* tokens from the template's user.css; fallbacks make it standalone. */
.mod-spas-hero{
  --_deep:var(--spa-deep,#0b3d3a); --_deep2:var(--spa-deep-2,#082d2b);
  --_deep2-rgb:var(--spa-deep-2-rgb,8,45,43); --_gold-rgb:var(--spa-gold-light-rgb,217,184,114);
  --_gold:var(--spa-gold-light,#d9b872); --_accent:var(--spa-gold,#b8893b);
  --_cream:var(--spa-cream,#f6f1e7); --_paper:var(--spa-paper,#fbf9f4); --_teal:var(--spa-teal,#0f766e);
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(28rem,64vh,42rem);padding:4rem 1rem 5.5rem;
  color:var(--_cream);background-color:var(--_deep);
  background-image:var(--spa-hero-img,url("../images/hero-spa.svg"));
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.mod-spas-hero::before{ /* readability scrim: dark on the text side */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--_deep2-rgb),.80) 0%,rgba(var(--_deep2-rgb),.45) 45%,rgba(var(--_deep2-rgb),0) 78%);
}
.mod-spas-hero::after{ /* soft wave edge into the light page */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(24px,4vw,48px);z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26C220 4 470 0 720 16s500 24 720 2V48Z' fill='%23fbf9f4'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
}
.mod-spas-hero__inner{width:100%;max-width:1320px;margin-inline:auto;padding-inline:.5rem}
.mod-spas-hero__text{max-width:38rem}

.mod-spas-hero__eyebrow{
  display:inline-block;margin:0 0 .75rem;font-size:.78rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--_gold);
}
.mod-spas-hero__heading{
  margin:0 0 .75rem;color:var(--_cream);
  font-family:var(--cassiopeia-font-family-headings,Georgia,serif);font-weight:400;
  font-size:clamp(2.1rem,5.2vw,3.75rem);line-height:1.08;letter-spacing:.01em;
}
.mod-spas-hero__heading::after{
  content:"";display:block;width:3.25rem;height:3px;margin-top:1rem;border-radius:2px;background:var(--_accent);
}
.mod-spas-hero__sub{margin:0 0 1.75rem;font-size:clamp(1rem,2.2vw,1.2rem);color:rgba(246,241,231,.86);max-width:34rem}

/* Search panel */
.mod-spas-hero__form{
  max-width:46rem;padding:1rem;border-radius:1rem;
  background:rgba(var(--_deep2-rgb),.58);border:1px solid rgba(var(--_gold-rgb),.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.mod-spas-hero__field{flex:1 1 12rem;min-width:0}
.mod-spas-hero__label{
  display:block;margin:0 0 .3rem .15rem;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--_gold);
}
.mod-spas-hero__form .form-select{
  width:100%;height:3rem;border:1px solid transparent;border-radius:.6rem;
  background-color:#fff;color:var(--spa-ink,#1f2d2c);font-size:1rem;
}
.mod-spas-hero__form .form-select:focus{
  border-color:var(--_gold);box-shadow:0 0 0 .2rem rgba(var(--_gold-rgb),.35);
}
.mod-spas-hero__submit{
  flex:0 0 auto;height:3rem;padding-inline:1.6rem;border-radius:.6rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
}
.mod-spas-hero__submit svg{width:1.1em;height:1.1em;flex:none}

@media (max-width:767.98px){
  .mod-spas-hero{padding:3rem .5rem 4.5rem;background-position:72% center}
  .mod-spas-hero::before{background:linear-gradient(180deg,rgba(var(--_deep2-rgb),.80),rgba(var(--_deep2-rgb),.55))}
  .mod-spas-hero__submit{flex:1 1 100%}
  .mod-spas-hero__form{padding:.85rem}
}