/* ============================ 07 + 08. GOOD SAM / BOOK YOUR SITE ============================
   Replica of the client comp good-sam-book-your-site/design.png (1672 x 941).
   The stage is the 1900 design frame. One comp pixel = --u = frame / 1672, so at the full frame
   everything is the comp x 1.136.
   The card spans rail to rail (--m, same margins as .hv / .ix / .gate4). The copy block's right ink
   sits on the right rail. The photo, washes and sea are one plate whose every edge is exact #FAF6EF,
   so it melts into the section at any width. Wave + gulls are alpha cuts that travel with the copy.
   All type is live: Bauer Bodoni (display), Univers Next (text), Castile-Mastah (the one script word, as .scr).
   Sources + tooling: /root/sandpiper-goodsam/ (plate/mask.py -> lama.py -> finish.py, cut/cut.py). */

.gsb{
  --frame:1900px;
  --m:170px;             /* page rail */
  --mc:var(--m);         /* card inset */
  --mx:var(--m);         /* copy inset */
  --u:calc(min(100cqw, var(--frame)) / 1672);
  --teal:#05B18F;
  position:relative;
  display:flow-root;
  container-type:inline-size;
  overflow:clip;
  background:var(--cream,#FAF6EF);
  text-rendering:geometricPrecision;   /* unhinted advances: type scales linearly with --u, so the rails hold at every width */
}
.gsb img{max-width:none}
.gsb__stage{
  position:relative;
  width:min(100%, var(--frame));
  aspect-ratio:1672/941;
  margin:calc(150px - 36 * var(--u)) auto 0;   /* the card's top edge lands exactly 150px below the section top */
}
.gsb__plate{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* ---------- the Good Sam card ---------- */
.gsb__card{
  position:absolute;z-index:2;
  left:var(--mc);right:var(--mc);top:calc(36 * var(--u));
  height:calc(176 * var(--u));
  margin:0;
  border-radius:calc(22 * var(--u));
  background:#FEFDFD;
  box-shadow:
    calc(2 * var(--u)) calc(21 * var(--u)) calc(44 * var(--u)) calc(-22 * var(--u)) rgba(20,48,43,.37);
}
.gsb__shield{position:absolute;left:calc(42 * var(--u));top:calc(50 * var(--u));width:calc(81 * var(--u));height:auto;
  filter:drop-shadow(0 calc(6 * var(--u)) calc(7 * var(--u)) rgba(20,40,15,.22))}
.gsb__card h2{
  position:absolute;left:calc(165 * var(--u));top:calc(33.9 * var(--u));margin:0;
  font:400 calc(28.4 * var(--u))/1 var(--display,"Bauer Bodoni"),Georgia,serif;letter-spacing:0;word-spacing:calc(1.5 * var(--u));
  color:#0F2E2A;white-space:nowrap;
}
.gsb__card p{
  position:absolute;left:calc(163 * var(--u));top:calc(73.2 * var(--u));margin:0;
  font:400 calc(16.3 * var(--u))/calc(26 * var(--u)) var(--text,"Univers Next"),Arial,sans-serif;letter-spacing:calc(-.1 * var(--u));word-spacing:calc(-1.6 * var(--u));
  color:#6A6B6B;white-space:nowrap;
}
.gsb__ratings{margin:0}
.gsb__rating{position:absolute;top:0;bottom:0;width:calc(110 * var(--u));margin-right:calc(-55 * var(--u));text-align:center}
.gsb__rating:nth-child(1){right:calc(252 * var(--u))}
.gsb__rating:nth-child(2){right:calc(164 * var(--u))}
.gsb__rating:nth-child(3){right:calc(71.5 * var(--u))}
.gsb__rating dd{position:absolute;left:0;right:0;top:calc(62.8 * var(--u));margin:0;letter-spacing:calc(-1 * var(--u));padding-right:calc(2 * var(--u));
  font:400 calc(32.7 * var(--u))/1 var(--display,"Bauer Bodoni"),Georgia,serif;color:#0B3A31}
.gsb__rating:nth-child(-n+2) dd{letter-spacing:calc(-2 * var(--u));padding-right:calc(3 * var(--u))}  /* Bauer's figures are tabular; the comp's 10 is set tight */
.gsb__rating dt{position:absolute;left:0;right:0;top:calc(102 * var(--u));letter-spacing:calc(-.4 * var(--u));
  font:400 calc(15.2 * var(--u))/1 var(--text,"Univers Next"),Arial,sans-serif;color:#737475}

/* ---------- the booking copy (origin = comp x 978, y 320) ---------- */
.gsb__copy{
  position:absolute;z-index:2;
  right:var(--mx);top:calc(320 * var(--u));
  width:calc(502 * var(--u));height:calc(466 * var(--u));
  color:#0E2B28;
}
.gsb__wave,.gsb__gulls{position:absolute;display:block;pointer-events:none}
.gsb__wave{left:calc(-2 * var(--u));top:calc(6 * var(--u));width:calc(186 * var(--u));height:calc(56 * var(--u))}
.gsb__gulls{left:calc(379 * var(--u));top:calc(-42 * var(--u));width:calc(174 * var(--u));height:calc(94 * var(--u))}
.gsb__copy h2{
  position:absolute;left:0;top:calc(79.7 * var(--u));margin:0;word-spacing:calc(-4 * var(--u));
  font:400 calc(81 * var(--u))/calc(75 * var(--u)) var(--display,"Bauer Bodoni"),Georgia,serif;letter-spacing:0;
  color:#0E2B28;white-space:nowrap;
}
.gsb__copy h2 span{display:block}
.gsb__copy h2 em{
  position:absolute;left:calc(226 * var(--u));top:calc(69.5 * var(--u));
  font:400 calc(103.7 * var(--u))/1 "Castile-Mastah",cursive;font-style:normal;word-spacing:0;
  transform:scaleX(1.116);transform-origin:0 0;
  color:#AB874F;
}
.gsb__lead{
  position:absolute;left:0;top:calc(286.6 * var(--u));margin:0;
  font:400 calc(19.4 * var(--u))/calc(31 * var(--u)) var(--text,"Univers Next"),Arial,sans-serif;letter-spacing:calc(-.04 * var(--u));
  color:#616262;white-space:nowrap;
}
.gsb__actions{position:absolute;left:0;top:calc(404 * var(--u));display:flex;gap:calc(16 * var(--u))}
.gsb__btn{
  display:inline-flex;align-items:center;box-sizing:border-box;height:calc(62 * var(--u));
  border-radius:999px;font:400 calc(18 * var(--u))/1 var(--text,"Univers Next"),Arial,sans-serif;
  text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s;
}
.gsb__btn--book{width:calc(195 * var(--u));padding:0 0 0 calc(29 * var(--u));letter-spacing:calc(.9 * var(--u));background:var(--teal);color:#fff;border:0;gap:0;justify-content:space-between;padding-right:calc(24 * var(--u))}
.gsb__btn--book i{display:grid;place-items:center;width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;background:rgba(255,255,255,.18)}
.gsb__btn--book svg{width:calc(13 * var(--u));height:calc(10 * var(--u));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gsb__btn--call{width:calc(167 * var(--u));justify-content:center;letter-spacing:calc(.6 * var(--u));border:calc(1.5 * var(--u)) solid #55C4B0;background:#F4F4F1;color:#0B7160}
.gsb__btn--book:hover,.gsb__btn--book:focus-visible{background:#049679}
.gsb__btn--call:hover,.gsb__btn--call:focus-visible{background:#0B7160;border-color:#0B7160;color:#fff}
.gsb__btn:focus-visible{outline:2px solid #0E2B28;outline-offset:4px}

@media (max-width:1100px){.gsb{--m:80px}}

/* ---------- phones: card, then the photo full-bleed, then the copy ---------- */
@media (max-width:760px){
  .gsb{--m:24px}
  .gsb__stage{display:flex;flex-direction:column;aspect-ratio:auto;margin-top:150px;padding:0 var(--m) 64px}
  .gsb__card{order:1;position:relative;left:auto;right:auto;top:auto;height:auto;display:grid;grid-template-columns:64px 1fr;column-gap:18px;
    padding:24px 20px 20px;border-radius:20px;
    box-shadow:0 14px 30px -14px rgba(20,48,43,.34)}
  .gsb__shield{position:static;width:64px;align-self:start;margin-top:4px}
  .gsb__card h2{position:static;font-size:26px;line-height:1.1;white-space:normal;word-spacing:0}
  .gsb__card p{position:static;grid-column:1/-1;margin-top:14px;font-size:15px;line-height:1.6;white-space:normal;letter-spacing:0;word-spacing:0}
  .gsb__card p br{display:none}
  .gsb__ratings{grid-column:1/-1;display:flex;justify-content:space-around;margin-top:18px;padding-top:16px;border-top:1px solid rgba(20,48,43,.1)}
  .gsb__rating{position:static;width:auto;margin:0;display:flex;flex-direction:column-reverse;align-items:center;gap:6px}
  .gsb__rating dd,.gsb__rating dt{position:static;padding:0}
  .gsb__rating dd{font-size:31px}
  .gsb__rating:nth-child(-n+2) dd{letter-spacing:-2px;padding-right:2px}
  .gsb__rating dt{font-size:13px;letter-spacing:0}

  .gsb__plate{order:2;position:relative;inset:auto;width:calc(100% + 2 * var(--m));max-width:none;height:auto;margin:-40px calc(-1 * var(--m)) 0;
    aspect-ratio:1000/941;object-fit:cover;object-position:0 100%;z-index:0}

  .gsb__copy{order:3;position:relative;right:auto;top:auto;width:auto;height:auto;margin-top:-6px;padding-top:58px}
  .gsb__wave{left:-2px;top:0;width:118px;height:auto}
  .gsb__gulls{left:auto;right:0;top:-18px;width:112px;height:auto}
  .gsb__copy h2{position:static;font-size:clamp(46px,13.4vw,60px);line-height:.93;word-spacing:-.04em}
  .gsb__copy h2 em{position:relative;left:auto;top:.14em;display:inline-block;margin-left:.08em;font-size:1.3em;line-height:.6;transform:scaleX(1.116)}
  .gsb__lead{position:static;margin-top:44px;font-size:17px;line-height:1.6;white-space:normal;letter-spacing:0}
  .gsb__lead br{display:none}
  .gsb__actions{position:static;margin-top:26px;flex-wrap:wrap;gap:12px}
  .gsb__btn{height:54px;font-size:16px;letter-spacing:.02em}
  .gsb__btn--book{width:auto;gap:14px;padding:0 10px 0 22px}
  .gsb__btn--book i{width:34px;height:34px}
  .gsb__btn--book svg{width:13px;height:10px}
  .gsb__btn--call{width:auto;padding:0 22px;border-width:1.5px}
}

/* calibration only: puts the card and copy at the comp's own offsets on a 1672 viewport */
.gsb--calib{--mc:242px;--mx:192px}