/* Hilal Stays & Experiences · "Today on the coast", the home page's live section, right after the two houses (written by site/build.mjs,
   coastSection, between the <!-- build:coast --> markers of index.html). Two calm cards on white, side by side on a computer and
   stacked on a phone: the surf (filled by surf-report.js, styled by surf-report.css) and the weather (filled by weather.js, styled
   by weather.css). This file only sets the section, the frame of the cards and how the two cards sit in it.
   Brand palette only: ink #101010, paper #f3eee4, gold #b99860, white, muted #5c5a55, line #ded7cb. */
.coast-section{background:var(--white);color:var(--ink)}
.coast-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(32px,4vw,52px)}
.coast-card{display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:2px;background:var(--white);container-type:inline-size}
.coast-card-head{margin-bottom:20px}
.coast-card-k{margin:0 0 8px;font-size:11px;font-weight:600;line-height:1.6;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.coast-card-title{margin:0;font-size:clamp(20px,1.9vw,25px);font-weight:500;line-height:1.25;letter-spacing:-.02em}
.coast-card-title a{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.coast-card-title .icon{flex:none;width:18px;height:18px;color:var(--gold);transition:transform .2s}
.coast-card-title a:hover .icon{transform:translateX(3px)}
.coast-card-title a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.coast-credit{max-width:920px;margin:22px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted)}

/* The two cards inside the frame: the frame is the card, so the surf card loses its own box and kicker (the head says it), and
   both open on the same hairline and end on their link. */
.coast-card .coast-live,.coast-card .wxh{flex:1;display:flex;flex-direction:column}
.coast-card .sr-home{padding:0;border:0;border-radius:0;background:none}
.coast-card .sr-home-k{display:none}
.coast-card .sr-home-head{justify-content:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line)}
.coast-card .sr-home-t{font-size:12.5px}
.coast-card .sr-home-list{margin-top:0;border-top:0}
.coast-card .sr-home-wait{margin:0 0 20px;padding-top:14px;border-top:1px solid var(--line)}
.coast-card .sr-home-foot{margin-bottom:18px}
.coast-card .sr-home-link{align-self:flex-start;gap:10px;margin-top:auto;padding-bottom:5px;border-bottom-color:var(--gold);font-size:13.5px;font-weight:600}
.coast-card .sr-home-link .icon{width:16px;height:16px}
.coast-card .sr-home-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.coast-card .wxh{min-height:0}
.coast-card .wxh-places{border-top-color:var(--line)}
.coast-card .wxh-foot{margin-top:auto}
.coast-card noscript a{font-size:14px}

/* A card narrower than the weather's two houses side by side need (a computer of 1024 px, a tablet): the phone sizes. */
@container (max-width:600px){
  .coast-card .wxh-place{padding-right:16px}
  .coast-card .wxh-place+.wxh-place{padding-left:16px}
  .coast-card .wxh-name b{font-size:17px}
  .coast-card .wxh-ico{font-size:32px}
  .coast-card .wxh-now{gap:8px}
  .coast-card .wxh-now b{font-size:44px}
  .coast-card .wxh-link{margin-left:0}
}
@container (max-width:420px){
  .coast-card .wxh-sky span{display:none}
  .coast-card .wxh-wind>.wx-i{display:none}
  .coast-card .wxh-now b{font-size:40px}
  .coast-card .wxh-ico{font-size:30px}
}

/* Stacked from the tablet down; on a phone the cards drop their frame for a rule, to give the two houses their width. */
@media (max-width:900px){
  .coast-grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:600px){
  .coast-grid{gap:44px;margin-top:28px}
  .coast-card{padding:20px 0 0;border:0;border-top:1px solid var(--ink);border-radius:0}
  .coast-card-head{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){.coast-card-title .icon{transition:none}}