/* ============================================================
   DARTEE GOLF, Wholesale Portal (adds to styles.css + membership.css)
   ============================================================ */

/* golf-course footer motif on plain light sections (reuse home --golf-foot) */
#custom, .msteps, .wsgroups, .faq { position: relative; }
#custom::after, .wsgroups::after, .faq::after { content:""; position:absolute; left:0; right:0; bottom:0; height:110px; background: bottom / 100% auto no-repeat var(--golf-foot); opacity:.3; pointer-events:none; z-index:0; }
#custom > .wrap, .wsgroups > .wrap, .faq > .wrap { position:relative; z-index:1; }
@media (max-width:760px){ #custom::after, .wsgroups::after, .faq::after { height:58px; opacity:.24; } }

/* groups lifestyle band, clean uniform 4-up grid */
/* occasion text-on-image band, slim full-width horizontal */
.occasion-hero { position: relative; overflow: hidden; box-shadow: var(--shadow-md); margin: 0 0 40px; border-radius: var(--r-md); }
.occasion-hero img { width: 100%; height: 220px; object-fit: cover; object-position: center 42%; display: block; }
.occasion-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,38,31,.82) 0%, rgba(8,38,31,.4) 46%, rgba(8,38,31,.05) 100%); }
.occasion-hero__txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px,5vw,56px); }
.occasion-hero__txt .eyebrow { color: var(--gold-100); }
.occasion-hero__txt h2 { color: var(--cream-50); margin: 6px 0 0; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
@media (max-width: 760px){ .occasion-hero img { height: 170px; } .occasion-hero__scrim { background: linear-gradient(90deg, rgba(8,38,31,.84) 0%, rgba(8,38,31,.45) 70%, rgba(8,38,31,.12) 100%); } }
/* taller variant with overlaid occasion tags */
.occasion-hero--tall img { height: 420px; }
.section.msteps { padding: 0; background: transparent; }
.occasion-hero--tall { margin: 0 calc(50% - 50vw); width: 100vw; border-radius: 0; box-shadow: none; }
.occasion-hero--tall .occasion-hero__txt { max-width: var(--maxw); margin: 0 auto; left: 0; right: 0; padding-left: clamp(24px,5vw,56px); padding-right: clamp(24px,5vw,56px); }
.occasion-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; max-width: 30ch; }
.occasion-tags span { background: rgba(200,162,75,.16); border: 1px solid rgba(200,162,75,.5); color: var(--gold-100); font-weight: 800; font-size: 12.5px; letter-spacing: .02em; padding: 7px 14px; border-radius: 999px; }
@media (max-width: 760px){ .occasion-hero--tall img { height: 380px; } .occasion-hero--tall .occasion-hero__scrim { background: linear-gradient(180deg, rgba(8,38,31,.7) 0%, rgba(8,38,31,.5) 50%, rgba(8,38,31,.78) 100%); } .occasion-hero--tall .occasion-hero__txt { text-align: center; align-items: center; } .occasion-tags { justify-content: center; max-width: 100%; } }
@media (max-width: 760px){ .occasion-banner img { height: 240px; } }
.perks-grid--two { max-width: 760px; margin-left: auto; margin-right: auto; grid-template-columns: 1fr 1fr; }
.perks-grid--three { max-width: 1100px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px){ .perks-grid--three { grid-template-columns: 1fr; } }
@media (max-width: 640px){ .perks-grid--two { grid-template-columns: 1fr; } }
.wsgroups { background: var(--cream); }
.wsgroups__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.wsgroup { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.wsgroup img { width: 100%; height: 440px; object-fit: cover; display: block; transition: transform .6s ease; }
.wsgroup:hover img { transform: scale(1.04); }
.wsgroup figcaption { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 36px; font-family: var(--ff-display); text-transform: uppercase; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .03em; color: #fff; text-align: center; background: linear-gradient(to top, rgba(8,38,31,.62) 0%, rgba(8,38,31,0) 46%); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
@media (max-width: 640px){ .wsgroups__grid { grid-template-columns: 1fr; gap: 12px; } .wsgroup img { height: 320px; } }

/* event CTA band */
.ws-event { position: relative; overflow: hidden; background-image: url("assets/photos/event-tent.webp"); background-size: cover; background-position: center 40%; }
.ws-event__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,38,31,.92) 0%, rgba(8,38,31,.7) 46%, rgba(8,38,31,.32) 100%); }
.ws-event__inner { position: relative; z-index: 1; padding: 90px 24px; max-width: 1180px; color: var(--cream-50); }
.ws-event .eyebrow { color: var(--gold-100); }
.ws-event h2 { color: var(--cream-50); margin: 6px 0 14px; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.ws-event p { color: rgba(244,251,250,.9); font-size: 18px; max-width: 42ch; margin: 0 0 26px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
@media (max-width: 760px){ .ws-event { background-position: center 25%; } .ws-event__scrim { background: linear-gradient(180deg, rgba(8,38,31,.82), rgba(8,38,31,.74)); } .ws-event__inner { padding: 60px 18px; text-align: center; } .ws-event p { margin-left: auto; margin-right: auto; } }
/* custom-orders hero photo banner, lighter scrim, text on a left panel so the markers show */
.mh-hero { background-image: linear-gradient(90deg, rgba(8,38,31,.9) 0%, rgba(8,38,31,.72) 42%, rgba(8,38,31,.28) 70%, rgba(8,38,31,.12) 100%), url("assets/photos/custom-hero.webp"); background-size: cover; background-position: center; }
.mh-hero .mh-hero__inner { text-align: left; align-items: flex-start; max-width: 1180px; }
.mh-hero .mh-hero__inner .eyebrow::before { display: none; }
.mh-hero h1, .mh-hero p, .mh-hero__cta, .mh-hero__chips { max-width: 30ch; margin-left: 0; margin-right: 0; }
.mh-hero h1 { text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.mh-hero p { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.mh-hero__cta, .mh-hero__chips { justify-content: flex-start; }
@media (max-width: 760px){
  .mh-hero { background-image: linear-gradient(180deg, rgba(8,38,31,.82) 0%, rgba(8,38,31,.6) 55%, rgba(8,38,31,.78) 100%), url("assets/photos/custom-hero.webp"); }
  .mh-hero .mh-hero__inner { text-align: center; align-items: center; }
  .mh-hero h1, .mh-hero p, .mh-hero__cta, .mh-hero__chips { max-width: 100%; }
  .mh-hero__cta, .mh-hero__chips { justify-content: center; }
}

/* Override mband background for wholesale "Put Your Logo On the Buckle" slide */
.mband { background-image: url("assets/photos/logo-on-buckle.jpg?v=2"); background-position: center 25%; }
.mband__scrim { background: linear-gradient(90deg, rgba(8,38,31,.62) 0%, rgba(8,38,31,.18) 55%, rgba(8,38,31,0) 100%); }
@media (max-width: 760px){
  .mband { background-position: center 20%; }
  .mband__scrim { background: linear-gradient(180deg, rgba(8,38,31,.45) 0%, rgba(8,38,31,.1) 45%, rgba(8,38,31,.55) 100%); }
}

/* partner sign-in card */
.ws-signin { background: var(--cream); }
.ws-signin__card { max-width: 460px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 34px 32px; }
.ws-signin__card h3 { font-family: var(--ff-display); text-transform: uppercase; font-size: 26px; color: var(--green-900); margin: 0 0 4px; }
.ws-signin__card p.sub { margin: 0 0 20px; font-size: 14px; color: var(--ink-soft); }
.ws-field { margin-bottom: 13px; }
.ws-field label { display: block; font-weight: 700; font-size: 13px; color: var(--green-900); margin-bottom: 6px; }
.ws-field input { width: 100%; box-sizing: border-box; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--ff-sans); font-size: 15px; color: var(--ink); background: #fff; }
.ws-field input:focus { outline: none; border-color: var(--gold); }
.ws-signin__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin: 4px 0 16px; }
.ws-signin__row a { color: var(--green-800); font-weight: 700; }
.ws-signin__msg { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--green-700); text-align: center; min-height: 1px; }
.ws-signin__alt { text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.ws-signin__alt a { color: var(--green-800); font-weight: 800; }

/* wholesale value band bullets */
.ws-bandlist { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.ws-bandlist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: rgba(244,251,250,.92); }
.ws-bandlist svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 2px; }

/* spec/terms strip */
.ws-terms { background: var(--green-900); color: var(--cream-50); }
.ws-terms__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 40px 0; }
.ws-term { text-align: center; }
.ws-term__n { font-family: var(--ff-display); font-size: clamp(26px, 3vw, 38px); color: var(--gold); line-height: 1; }
.ws-term__l { font-size: 13px; color: rgba(243,236,219,.78); margin-top: 8px; font-weight: 600; }

@media (max-width: 980px) { .ws-terms__row { grid-template-columns: 1fr 1fr; gap: 26px 16px; } }
@media (max-width: 560px) { .ws-terms__row { grid-template-columns: 1fr 1fr; } .ws-signin__card { padding: 26px 22px; } }

/* ===== club logos social-proof marquee ===== */
.ws-clubs { background: var(--cream); }
.ws-clubs__lead { max-width: 56ch; margin: 14px auto 0; color: var(--ink-soft); font-size: 16px; }
.ws-clubs__marquee { overflow: hidden; margin: 44px 0 18px; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); }
.ws-clubs__track { display: flex; gap: 16px; width: max-content; animation: wsClubScroll 28s linear infinite; }
.ws-clubs__track:hover { animation-play-state: paused; }
@keyframes wsClubScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ws-club { flex: none; width: 150px; aspect-ratio: 1 / 1; background: #fff; border: 3px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.ws-club:hover { transform: translateY(-3px) scale(1.03); box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 6px 18px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.3); }
.ws-club img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ws-club:hover img { transform: scale(1.08); }
.ws-club span { font-family: var(--ff-display); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; color: var(--green-800); text-align: center; opacity: .55; }
@media (max-width: 520px) { .ws-club { width: 120px; } .ws-clubs__track { gap: 14px; } }

/* ===== event reviews ===== */
.ws-reviews { background: var(--paper); }
.ws-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.ws-review { margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.ws-review::before { content: "\201C"; position: absolute; top: 6px; right: 18px; font-family: var(--ff-display); font-size: 64px; line-height: 1; color: var(--gold); opacity: .25; }
.ws-review__stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; }
.ws-review blockquote { margin: 0; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink); }
.ws-review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.ws-review figcaption strong { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; color: var(--green-900); }
.ws-review figcaption span { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 880px) { .ws-reviews__grid { grid-template-columns: 1fr; gap: 16px; } }