/* /stays browse section: one set of destinations, two views.
   Pairs with stays-browse-snippet.html + js/stays-browse.js.
   Loads AFTER css/stays.css - it reuses .stays-shell, .stays-kicker,
   .stays-card-grid and .stays-card from there and only adds what is new.

   Supersedes the .stays-hub-directory section: the grid view IS that block. */

/* The shared site stylesheet has a deliberately broad, high-specificity rule
   for direct child sections (main>section:not(...)). Opt this section out the
   same way css/stays.css does for every other /stays section, rather than
   editing that production-wide selector. */
body.stays-site main>section.stays-browse{padding:70px 0 100px!important;background:transparent!important}

.stays-browse{position:relative}

/* ---------- head + toggle ---------- */

.stays-browse-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.stays-browse-headings{max-width:640px}
.stays-browse h2{font-size:clamp(2.4rem,4vw,4rem);line-height:.95;letter-spacing:-.045em}
.stays-browse-deck{margin-top:1rem;max-width:56ch;color:var(--stay-muted);line-height:1.65}

/* Compact status control, so a pill radius is in scope here. */
.stays-browse-toggle{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--stay-line);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  box-shadow:0 10px 30px rgba(50,24,89,.07);
}
/* The toggle only works with js/stays-browse.js, so the markup ships it
   hidden and the script reveals it. Never leave a dead control on screen. */
.stays-browse-toggle[hidden]{display:none}

.stays-browse-tab{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  padding:.55rem 1.05rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--stay-purple-dark);
  font:inherit;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background-color .22s ease,color .22s ease;
}
.stays-browse-tab svg{
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.stays-browse-tab:hover{background:#eee5ff}
.stays-browse-tab[aria-selected="true"]{background:var(--stay-purple);color:#fff}
.stays-browse-tab[aria-selected="true"]:hover{background:var(--stay-purple-dark)}

/* ---------- panels ---------- */

.stays-browse-panel{display:block}
.stays-browse-panel[hidden]{display:none}
.stays-browse-panel:focus{outline:none}

@keyframes stays-browse-view-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
/* Only animate a view the visitor actually switched to, never the one that is
   already on screen at first paint. js/stays-browse.js sets data-switched. */
.stays-browse[data-switched="true"] .stays-browse-panel:not([hidden]){
  animation:stays-browse-view-in .3s cubic-bezier(.22,1,.36,1) both;
}

/* ---------- grid view ---------- */

/* Eight destinations read best as two rows of four here; .stays-related keeps
   the shared four-up default and the base breakpoints do the rest. */
.stays-browse .stays-card-grid{margin-top:34px}
.stays-browse .stays-card{min-height:340px;border-radius:16px}
.stays-browse .stays-card strong{font-size:1.5rem}

/* ---------- list view ---------- */

.stays-browse-list-wrap{margin-top:34px}
.stays-browse-group+.stays-browse-group{margin-top:34px}

.stays-browse-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--stay-line);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--stay-purple-dark);
}
.stays-browse-group-count{
  flex:none;
  color:var(--stay-muted);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:none;
}

.stays-browse-list{margin:0;padding:0;list-style:none}
.stays-browse-list>li+li{border-top:1px solid rgba(76,29,149,.1)}

.stays-browse-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.6fr) minmax(0,1.1fr) auto;
  align-items:center;
  gap:18px;
  min-height:66px;
  padding:.95rem 1rem;
  border-radius:14px;
  color:var(--stay-ink);
  text-decoration:none;
  transition:background-color .2s ease,transform .2s ease;
}
.stays-browse-row:hover{background:#fff;transform:translateX(2px)}

.stays-browse-row-name{
  min-width:0;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.stays-browse-row-region{
  min-width:0;
  color:var(--stay-muted);
  font-size:.86rem;
  font-weight:700;
  overflow-wrap:anywhere;
}
.stays-browse-row-status{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
  color:var(--stay-muted);
  font-size:.86rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.stays-browse-row-status::before{
  content:"";
  flex:none;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--stay-lime);
  box-shadow:0 0 0 4px rgba(234,255,113,.45);
}
.stays-browse-row-go{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  flex:none;
  color:var(--stay-purple);
  font-size:.86rem;
  font-weight:800;
  white-space:nowrap;
}
/* .ds-arrow is the site-wide DRAWN arrow (css/site.css). Never a glyph. */
.stays-browse-row .ds-arrow{transition:transform .2s ease}
.stays-browse-row:hover .ds-arrow{transform:translateX(3px)}

/* ---------- focus ---------- */

.stays-browse-tab:focus-visible,
.stays-browse-row:focus-visible,
.stays-browse-panel:focus-visible{
  outline:3px solid var(--stay-purple);
  outline-offset:3px;
  border-radius:14px;
}
.stays-browse-tab:focus-visible{border-radius:999px}

/* ---------- responsive ---------- */

@media (max-width:960px){
  .stays-browse-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px}
  .stays-browse-row-region{grid-row:2;grid-column:1;font-size:.82rem}
  .stays-browse-row-status{grid-row:2;grid-column:2}
  .stays-browse-row-name{grid-row:1;grid-column:1/3}
  .stays-browse-row-go{grid-row:1/3;grid-column:3}
}

@media (max-width:700px){
  body.stays-site main>section.stays-browse{padding:56px 0 76px!important}
  .stays-browse-head{align-items:flex-start}
  .stays-browse-toggle{width:100%}
  .stays-browse-tab{flex:1 1 0;justify-content:center;padding:.55rem .5rem}
  .stays-browse .stays-card{min-height:320px}
  .stays-browse-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:.35rem 12px;
    padding:.9rem .75rem;
  }
  .stays-browse-row-name{grid-row:1;grid-column:1;font-size:1.05rem}
  .stays-browse-row-region{grid-row:2;grid-column:1}
  .stays-browse-row-status{grid-row:3;grid-column:1}
  .stays-browse-row-go{grid-row:1/4;grid-column:2;align-self:center}
  .stays-browse-row-go-label{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .stays-browse-row:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .stays-browse[data-switched="true"] .stays-browse-panel:not([hidden]){animation:none}
  .stays-browse-tab,
  .stays-browse-row,
  .stays-browse-row .ds-arrow,
  .stays-browse .stays-card img{transition:none}
  .stays-browse-row:hover{transform:none}
}