/* ==========================================================================
   Navinda Hotels & Resort — property selector splash
   Neutral dark + gold so it favours neither property's own palette
   (Krabi La Playa is navy/Montserrat, Navinda is gold/Open Sans).
   ========================================================================== */

:root{
  --gold:#D3B571;
  --gold-dark:#B09457;
  --ink:#141414;
  --ink-soft:#1e1e1e;
  --white:#fff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--ink);
  color:rgba(255,255,255,.72);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

.splash{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  max-width:1240px;margin:0 auto;padding:40px 28px 20px;
}

/* ---- Header --------------------------------------------------------------- */
.splash-head{text-align:center;margin-bottom:26px}
.splash-head h1{
  margin:0;color:var(--white);
  font-size:1.65rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;
  text-indent:.3em;line-height:1.4;
}
.rule{display:block;width:58px;height:1px;background:var(--gold);margin:20px auto 18px}
.tagline{
  margin:0;color:var(--gold);
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.prompt{
  margin:0 0 26px;text-align:center;
  font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ---- Group introduction --------------------------------------------------- */
.intro{max-width:760px;margin:0 auto 26px;text-align:center}
.intro p{
  margin:0;font-size:.95rem;font-weight:300;line-height:1.85;
  color:rgba(255,255,255,.72);
}

/* ---- Property cards ------------------------------------------------------- */
.properties{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;
}
.property-card{
  position:relative;display:block;overflow:hidden;
  background:var(--ink-soft);border:1px solid rgba(255,255,255,.09);
  min-height:400px;height:100%;
  transition:border-color .3s,transform .3s;
}
.property-card:hover,.property-card:focus-visible{
  border-color:rgba(211,181,113,.55);transform:translateY(-4px);
}
.property-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.property-slides{position:absolute;inset:0;display:block;overflow:hidden}
.property-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease, transform 1s ease;
}
.property-photo.is-active{opacity:1}
.property-card:hover .property-photo.is-active{transform:scale(1.05)}

/* Progress dots — purely indicative. pointer-events:none so they never
   interfere with the card being one big link. */
.property-dots{
  position:absolute;top:18px;right:18px;z-index:3;
  display:flex;gap:7px;pointer-events:none;
}
.property-dots i{
  display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.35);transition:background .4s,transform .4s;
}
.property-dots i.is-active{background:var(--gold);transform:scale(1.3)}
.property-card::after{
  content:'';position:absolute;inset:0;
  /* Must hold up for the BRIGHTEST slide in the rotation, not the first one. */
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.94) 100%);
}
.property-body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  height:100%;min-height:400px;padding:30px 32px 28px;
}
/* The two marks have very different shapes — Krabi La Playa is a stacked logo
   (1.45:1), Navinda a wide wordmark (3.48:1). Matching their HEIGHT made Navinda
   2.4x the visual weight, so cap both dimensions instead: each ends up
   constrained on a different axis and they balance by area. */
.property-logo{max-height:88px;max-width:200px;height:auto;width:auto;margin-bottom:18px}
.property-blurb{
  display:block;color:rgba(255,255,255,.85);
  font-size:.93rem;font-weight:300;line-height:1.75;margin-bottom:20px;max-width:42ch;
}
.property-cta{
  display:inline-block;padding:11px 26px;
  border:1px solid rgba(255,255,255,.5);color:var(--white);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s,border-color .25s;
}
.property-card:hover .property-cta{background:var(--gold);border-color:var(--gold)}

/* ---- Footer --------------------------------------------------------------- */
.splash-foot{
  margin-top:32px;padding-top:22px;text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
}
.foot-contact{margin:0 0 12px;font-size:.82rem;color:rgba(255,255,255,.45)}
.xcaliber{display:inline-block}
.xcaliber img{height:22px;width:auto;opacity:.7;transition:opacity .25s}
.xcaliber:hover img{opacity:1}
.copyright{margin:12px 0 0;font-size:.74rem;color:rgba(255,255,255,.35)}

/* ---- Responsive ----------------------------------------------------------- */
/* Short viewports (laptops ~768px tall): shrink the cards so the selector still
   sits above the fold rather than forcing a scroll. */
@media (min-width:821px) and (max-height:820px){
  .splash{padding:26px 28px 16px}
  .splash-head{margin-bottom:18px}
  .splash-head h1{font-size:1.4rem}
  .intro{margin-bottom:18px}
  .intro p{font-size:.9rem;line-height:1.75}
  .prompt{margin-bottom:18px}
  .property-card,.property-body{min-height:330px}
  .property-logo{max-height:70px;max-width:165px;margin-bottom:12px}
  .property-blurb{font-size:.87rem;margin-bottom:14px}
  .splash-foot{margin-top:22px;padding-top:16px}
}

@media (max-width:820px){
  .splash{padding:40px 20px 26px;justify-content:flex-start}
  .splash-head{margin-bottom:26px}
  .intro{margin-bottom:30px}
  .intro p{font-size:.92rem;line-height:1.85}
  .splash-head h1{font-size:1.25rem;letter-spacing:.22em;text-indent:.22em}
  .properties{gap:20px}
  .property-card,.property-body{min-height:360px}
  .property-body{padding:26px 24px 24px}
  .property-logo{max-height:72px;max-width:170px}
}
@media (prefers-reduced-motion:reduce){
  .property-card,.property-photo{transition:none}
  .property-card:hover{transform:none}
  .property-card:hover .property-photo{transform:none}
}