/* The homepage's fundraising and request sections (PRED-915), from docs/mockups/homepage-v2.html.
   Builds on homepage.css: every class starts pub-, plum and ember, never green. Phones first:
   the wider layouts start at 981px. */

/* Shared pieces */
.pub-end { align-items: end; }
.pub-stretch { align-items: stretch; }
.pub-two > * { min-width: 0; }
.pub-fund-lead { font-size: 18px; margin: 0; }
.pub-raise .pub-intro { margin: 0; }

/* Fun for them. Funds for you. */
.pub-fund { background: #fff; }
.pub-why { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
.pub-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #f1e4dc; border-radius: 20px; padding: 22px; box-shadow: 0 10px 30px rgba(26, 15, 31, .07); }
.pub-card .bi { font-size: 26px; color: #d4572e; }
.pub-card b { font-size: 17px; margin-top: 8px; }
.pub-goes { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.pub-goes > div { border-radius: 22px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
.pub-goes > div > .bi { font-size: 30px; color: #ff7a59; flex: none; }
.pub-goes h3 { font: 500 30px/1 var(--display); text-transform: uppercase; margin: 0 0 6px; color: inherit; }
.pub-goes p { margin: 0; }
.pub-kids { background: linear-gradient(135deg, #2a1033, #3b1430); color: #fff; }
.pub-kids .pub-muted { color: rgba(255, 255, 255, .72); }
.pub-fun { background: #fff1e6; }
.pub-who { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pub-who span { padding: 8px 12px; border-radius: 999px; background: #fff1e6; color: #a8431f; font: 600 13px/1 var(--body); }

/* What could your club raise? Cards that swipe across on a phone */
.pub-raise { background: linear-gradient(160deg, #2a1033, #1a0f1f 70%); }
.pub-example { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 215, 106, .14); color: #ffd76a; font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.pub-swipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 26px 2px 10px; }
.pub-swipe > * { scroll-snap-align: start; }
.pub-rc { border-radius: 24px; padding: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 12px; }
.pub-rc.pub-hot { background: #fff; color: #1a0f1f; }
.pub-rc.pub-hot .pub-muted { color: #6a5c66; }
.pub-fee { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pub-big { font: 500 60px/.9 var(--display); }
.pub-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.pub-steps li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255, 255, 255, .16); }
.pub-hot .pub-steps li { border-bottom-color: #eadfe3; }
.pub-steps b { font-weight: 600; }
.pub-rc.pub-own { border-style: dashed; background: transparent; justify-content: center; }
.pub-own .bi { font-size: 28px; color: #ffd76a; }
.pub-own .pub-muted { font-size: 15px; }
.pub-fine { font-size: 13px; color: rgba(255, 255, 255, .6); margin: 16px 0 0; }

/* Prizes don't have to be cash */
.pub-prizes { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; margin-top: 40px; padding: 26px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.pub-prizes h3 { font: 500 34px/1 var(--display); text-transform: uppercase; margin: 6px 0 8px; }
.pub-prizes p.pub-muted { margin: 0; }
.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-chips span { padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #ffd9c4; font: 600 13px/1 var(--body); }

/* Make it look like yours: three clubs in their own colours */
.pub-looks-h { margin: 40px 0 14px; padding-top: 34px; border-top: 1px solid #f1d9c8; font-size: 15px; }
.pub-looks-h b { color: #1a0f1f; }
.pub-looks { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pub-look { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(26, 15, 31, .08); }
.pub-look-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; font: 500 20px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.pub-crest { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--body); border: 2px solid rgba(255, 255, 255, .7); }
.pub-look-body { padding: 14px 16px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: #6a5c66; }
.pub-sw { width: 22px; height: 22px; border-radius: 6px; }
.pub-look-a .pub-look-top, .pub-look-a .pub-sw { background: #13294b; }
.pub-look-a .pub-crest, .pub-look-a .pub-sw2 { background: #6cabdd; color: #13294b; }
.pub-look-b .pub-look-top, .pub-look-b .pub-sw { background: #7a263a; }
.pub-look-b .pub-crest, .pub-look-b .pub-sw2 { background: #95bfe5; color: #7a263a; }
.pub-look-c .pub-look-top, .pub-look-c .pub-sw { background: #1b1b1b; }
.pub-look-c .pub-crest, .pub-look-c .pub-sw2 { background: #fdb913; color: #1b1b1b; }

/* One game, or the whole year? */
.pub-cmp-h { font-size: 34px; margin-top: 30px; }
.pub-cmp { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 34px 0 6px; }
.pub-cmp > div { border-radius: 22px; padding: 24px; }
.pub-cmp h3 { font: 500 34px/1 var(--display); text-transform: uppercase; margin: 6px 0 8px; }
.pub-once { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.pub-once .pub-eyebrow { opacity: .7; }
.pub-once .bi-dash { color: rgba(255, 255, 255, .5); }
.pub-year { background: #fff; color: #1a0f1f; }
.pub-dark .pub-year .pub-muted { color: #6a5c66; }
.pub-cmp-price { margin: 0 0 14px; font: 600 15px/1.4 var(--body); }
.pub-cmp-price .pub-after { display: block; }

/* Something bigger, or something new? */
.pub-bigger { background: #fff; }
.pub-bigger-h { margin: 0 0 26px; }
.pub-req { border-radius: 22px; padding: 26px; border: 1px solid #f1e4dc; box-shadow: 0 10px 30px rgba(26, 15, 31, .07); display: flex; flex-direction: column; gap: 10px; height: 100%; }
.pub-req > .bi { font-size: 28px; color: #d4572e; }
.pub-req h3 { font: 500 34px/1 var(--display); text-transform: uppercase; margin: 0; }
.pub-req p { margin: 0; }
.pub-req .pub-btn { align-self: flex-start; margin-top: auto; padding: 12px 20px; font-size: 15px; }
.pub-ink { background: #1a0f1f; color: #fff; }
.pub-ink:hover { color: #fff; }
.pub-only { display: inline-flex; align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: #fff1e6; color: #a8431f; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }

/* Wider screens */
@media (min-width: 981px) {
  .pub-why, .pub-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub-goes, .pub-cmp { grid-template-columns: 1fr 1fr; }
  .pub-prizes { grid-template-columns: 1fr 1.4fr; gap: 30px; }
}