/* The affiliate page, part "surf": the pass to the GTM Surf House in the block's picture. The block, its words, its
   checks, its link and the picture's stage are the kit's (.k-blk, .k-checks, .k-link, .k-pic, .k-sample, .k-card);
   this file holds the pass: the sunset over the sea (drawn in the markup, fixed colours in both themes, the hero band's
   evening: --sky-2, --sky-3, --sky-5 and the board's amber), the house's name on it, the referred amount, the row of
   nights (earned ones in the amber on the primary's tint, the next ones as outlines) and who pays for what. The card's
   ground and lines are the theme's tokens, so the dark theme follows. Nothing moves. */

.pg-affiliate .af-pass{width:min(440px,100%)}
.pg-affiliate .af-pass-art{position:relative;height:150px;overflow:hidden;background:#1D1747}
.pg-affiliate .af-pass-art svg{display:block;width:100%;height:100%}
.pg-affiliate .af-pass-t{position:absolute;left:20px;top:18px;display:flex;flex-direction:column;gap:6px;margin:0}
.pg-affiliate .af-pass-t b{font:600 21px/1.1 var(--display);letter-spacing:-.02em;color:#FFFFFF}
.pg-affiliate .af-pass-t span{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#E3E0F5}
.pg-affiliate .af-pass-body{padding:6px 20px 8px}
.pg-affiliate .af-pass-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0;padding:16px 0;border-bottom:1px solid var(--line);font:400 15px/1.3 var(--sans);color:var(--k-text)}
.pg-affiliate .af-pass-row b{font:600 22px/1 var(--display);letter-spacing:-.02em;color:var(--ink2)}
.pg-affiliate .af-nights{padding:16px 0 18px;border-bottom:1px solid var(--line)}
.pg-affiliate .af-nights-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin:0 0 14px;font:400 14px/1.3 var(--sans);color:var(--mute)}
.pg-affiliate .af-nights-h b{font:600 16px/1.3 var(--sans);color:var(--ink2)}
.pg-affiliate .af-nights-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pg-affiliate .af-nights-row li{display:grid;place-items:center;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);color:color-mix(in srgb,var(--mute) 45%,transparent)}
.pg-affiliate .af-nights-row li.af-n-on{background:color-mix(in srgb,var(--ai) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ai) 26%,transparent);color:#E9A93A}
.pg-affiliate .af-nights-row svg{display:block;width:20px;height:20px}
.pg-affiliate .af-pass-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;font:400 15px/1.3 var(--sans);color:var(--k-text)}
.pg-affiliate .af-pass-list li+li{border-top:1px solid var(--line)}
.pg-affiliate .af-pass-list b{display:inline-flex;align-items:center;gap:7px;font:600 14.5px/1 var(--sans);color:var(--ink2);white-space:nowrap}
.pg-affiliate .af-pass-ok svg{display:block;width:20px;height:20px;padding:3px;border-radius:50%;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}

@media (max-width:760px){
  .pg-affiliate .af-pass-art{height:128px}
  .pg-affiliate .af-pass-body{padding:4px 16px 6px}
  .pg-affiliate .af-nights-row{gap:6px}
  .pg-affiliate .af-nights-row li{height:38px;border-radius:10px}
}