/* ============================================================
   King Slayer Sportfishing: /stay-and-fish/ page layout only
   Requires tokens.css then base.css.
   v2 conversion pass: a .page-hero photo band leads, the deal
   sits in the first paragraph beside a facts panel, the two
   property cards are reduced to chips, and one redemption line
   closes the properties block.
   ============================================================ */

/* ============ Opening offer band ============ */
.stay-open{padding-top:clamp(2rem,4vw,3rem)}
.stay-lede{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}
.stay-deal{
  color:var(--ice);
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  border-left:3px solid var(--blue);
  padding-left:1.1rem;
  margin-bottom:1.1rem;
}
.stay-lede-copy > p{color:var(--dim)}
.stay-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem;
  margin-top:1.75rem;
}

.stay-facts{
  border-top:1px solid var(--line);
  background:var(--panel);
  padding:.4rem 1.35rem;
}
.stay-facts > div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
}
.stay-facts > div:last-child{border-bottom:0}
.stay-facts dt{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:650;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  flex-shrink:0;
}
.stay-facts dd{text-align:right;font-size:.95rem;color:var(--ice)}

/* ============ The two property cards ============ */
.stay-card{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  padding:clamp(1.5rem,2.8vw,2.1rem);
}
.stay-card:hover{border-color:var(--blue-bright)}
.stay-card h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:720;
  font-size:clamp(1.15rem,2vw,1.45rem);
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.55rem;
}
.stay-card .chips{
  margin-top:1.1rem;
  margin-bottom:0;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}

/* ============ Redemption line ============ */
.redeem-note{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  max-width:46rem;
  border-left:3px solid var(--blue);
  padding-left:1.1rem;
  color:var(--dim);
  font-size:.96rem;
}
.redeem-note a{color:var(--blue-bright)}

/* ============ Make it a weekend ============ */
.weekend-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
  align-items:stretch;
}
.weekend-card{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.6rem 1.5rem;
}
.weekend-card:hover{border-color:var(--blue-bright)}
.weekend-card h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.02rem;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:1.3rem;
}
.weekend-card .btn{align-self:flex-start;margin-top:auto;text-align:center}
.weekend-foot{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:.96rem;
}
.weekend-foot a{color:var(--blue-bright)}

/* ============ Responsive ============ */
@media (max-width:1000px){
  .stay-lede{grid-template-columns:1fr}
  .weekend-links{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-2.stay-cards{grid-template-columns:1fr}
}
@media (max-width:520px){
  .stay-facts > div{flex-direction:column;gap:.2rem}
  .stay-facts dd{text-align:left}
  .stay-actions{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (max-width:360px){
  /* the card padding gives back 16px a side so the chip row has room to work.
     Chips release their nowrap in base.css at 640 and below, so "In-room coffee
     on request" wraps inside its chip here instead of running past the card */
  .stay-card{padding:1.15rem 1rem 1.25rem}
}