/* ============================================================
   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 ============ */
/* client call 2026-09-16: the deal paragraph duplicated the hero sub and went,
   so the four facts run across the page as one short 4-column strip,
   label over value */
.stay-open{padding-block:clamp(1.5rem,3vw,2.25rem)}
.stay-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  background:var(--panel);
}
.stay-facts > div{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1rem 1.35rem;
  border-left:1px solid var(--line);
}
.stay-facts > div:first-child{border-left: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);
}
.stay-facts dd{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}

/* ============ Responsive ============ */
@media (max-width:1000px){
  .weekend-links{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-2.stay-cards{grid-template-columns:1fr}
  .stay-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stay-facts > div:nth-child(3){border-left:0}
  .stay-facts > div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .stay-facts{grid-template-columns:minmax(0,1fr)}
  .stay-facts > div{border-left:0;border-top:1px solid var(--line)}
  .stay-facts > div:first-child{border-top:0}
  .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}
}