/* ============================================================
   Petalwar's banner on other pages (petalwar.Banner in
   internal/pages/petalwar): the game pages and CreatorSMP 4.
   The dark card of its /games card (.wr-teaser in fancy-home.css),
   the picture fading in from the left, with Try Petalwar to its
   download and a link to the page about the game.
   ============================================================ */

.pw-promo-sec{padding:44px 0}
.pw-promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;overflow:hidden;border-radius:22px;background:#12161a;color:#fff;box-shadow:0 18px 44px rgba(20,32,24,.2);text-align:left}
.pw-promo-art{position:relative;min-height:300px}
.pw-promo-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;display:block}
.pw-promo-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,22,26,0) 55%,#12161a)}
.pw-promo-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:38px 42px 38px 24px}
.pw-promo-kicker{display:inline-flex;align-items:center;gap:9px;margin:0;padding:5px 13px 5px 6px;border-radius:980px;background:rgba(242,199,107,.12);border:1px solid rgba(242,199,107,.3);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#f2c76b}
.pw-promo-kicker img{box-sizing:border-box;width:22px;height:22px;padding:2px;border-radius:50%;background:#f4ecd8}
.pw-promo h2{margin:0;font-family:var(--font-display);font-size:clamp(26px,2.8vw,36px);font-weight:700;line-height:1.06;letter-spacing:-.03em;color:#fff}
.pw-promo h2 span{display:block;color:#7fd3a0}
.pw-promo-sub{margin:0;max-width:520px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.76)}
.pw-promo-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0}
.pw-promo-chips li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.84)}
.pw-promo-chips i{color:#7fd3a0;font-size:11px}
.pw-promo-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pw-promo-actions .btn-f{gap:9px}
.btn-f.pw-promo-more{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.btn-f.pw-promo-more:hover{background:rgba(255,255,255,.15);color:#fff}
.pw-promo .btn-f:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(111,211,155,.7)}

@media (max-width:860px){
  .pw-promo{grid-template-columns:minmax(0,1fr)}
  .pw-promo-art{min-height:0;aspect-ratio:16/8}
  .pw-promo-art img{object-position:40% 45%}
  .pw-promo-art::after{background:linear-gradient(180deg,rgba(18,22,26,0) 50%,#12161a)}
  .pw-promo-copy{padding:4px 22px 26px}
}