/* ============================================================
   loopa/purse
   A very large figure over a darkened photograph. .band, .wrap,
   .eyebrow and .h3 are foundation and already loaded.
   ============================================================ */

.purse{
  position:relative;
  text-align:center;
  overflow:hidden;
  background:var(--ocean-bk);
}
.purse__ph{position:absolute;inset:0;z-index:0;opacity:.34}
.purse__ph img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 60%;
  filter:saturate(.6) brightness(.6);
}
/* Full-bleed scrim, never a box with an edge: a rectangular gradient with a hard
   stop shows as a seam wherever a bright part of the photo meets it. */
.purse::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(110% 60% at 50% 46%,
    rgba(6,28,34,.72) 0%, rgba(6,28,34,.42) 50%, rgba(6,28,34,.86) 100%);
}
.purse .wrap{position:relative;z-index:2}
.purse .h3{color:var(--paper-hi);text-shadow:0 1px 22px rgba(6,28,34,.8)}
.purse .eyebrow{color:var(--gold-lt)}

.purse__inner{display:grid;gap:clamp(18px,2.6vw,32px);justify-items:center}

/* ---------- the total ---------- */
.purse__total-wrap{width:100%}
.purse__total{
  margin:0;
  font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;
  font-size:clamp(64px,15vw,190px);
  line-height:.84;letter-spacing:.01em;
  color:var(--gold-lt);
  /* The count-up rewrites this text every frame; without a fixed digit width
     the whole figure would shuffle sideways as it climbs. */
  font-variant-numeric:tabular-nums;
}

/* The photograph showing through the letterforms. --purse-fill is set by PHP,
   because the image is a media item and its URL is not knowable from a
   stylesheet. Guarded twice: the @supports check, and the modifier class that
   PHP only adds when there is actually an image to show.

   Worth knowing: a CSS background cannot be lazy-loaded, so with this effect on
   the photograph is fetched as soon as the stylesheet applies, even though the
   <img> above still says loading="lazy". That is deliberate rather than an
   oversight — both point at the SAME url, so it stays one request that the
   <img> then takes from cache. Pointing the fill at a smaller size would cost a
   second download and buy nothing, since the letterforms crop it anyway. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .loopa-purse--fill .purse__total{
    background-image:var(--purse-fill);
    background-size:cover;
    background-position:center 40%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    filter:brightness(1.35) saturate(1.15) contrast(1.05);
  }
}

/* ---------- the breakdown ---------- */
.purse__carousel{
  width:100%;max-width:820px;
}
.purse__viewport{width:100%}
.purse__split{
  display:grid;grid-template-columns:1fr;gap:1px;
  width:100%;
  background:var(--rule-dk);
  border:1px solid var(--rule-dk);
}
.purse__slide{display:contents}
/* Solid tint, not backdrop-filter. The photo behind is already at .34 opacity
   under a heavy scrim, so a blur costs a compositor pass and buys nothing. */
.purse__prize{
  background:rgba(6,28,34,.82);
  padding:clamp(20px,3vw,30px);
}
.purse__split b{
  display:block;
  font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;
  font-size:clamp(28px,4.4vw,44px);letter-spacing:.05em;
  color:var(--paper-hi);line-height:1;
}
.purse__split span{
  display:block;margin-top:8px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);
}
.purse__split em{
  display:block;margin-top:10px;
  font-size:13px;line-height:1.65;font-style:normal;
  color:rgba(253,241,212,.72);
}
.purse__controls{display:none}

.purse__statement{
  width:min(920px,100%);
  display:grid;gap:1px;
  border-block:1px solid var(--rule-dk);
}
.purse__statement p{
  margin:0;padding:clamp(17px,2.2vw,24px) clamp(14px,2vw,24px);
  font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;
  font-size:clamp(25px,4.2vw,48px);line-height:1.05;letter-spacing:.08em;
  color:var(--paper-hi);background:rgba(6,28,34,.64);
}
.purse__statement p + p{border-top:1px solid var(--rule-dk)}
.purse__statement p:last-child{color:var(--gold-lt)}

@media (max-width:599px){
	.purse__statement p{font-size:clamp(23px,7.2vw,30px);letter-spacing:.055em}
  .purse__carousel{max-width:100%}
  .purse__viewport{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .purse__viewport::-webkit-scrollbar{display:none}
  .purse__viewport:focus-visible{
    outline:2px solid var(--gold-lt);outline-offset:4px;
  }
  .purse__split,
  .purse__split.purse__split--three,
  .purse__split.purse__split--many{
    display:flex;gap:0;
    background:transparent;border:0;
  }
  .purse__slide{
    box-sizing:border-box;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
    flex:0 0 100%;
    padding:1px;
    background:var(--rule-dk);
    scroll-snap-align:start;scroll-snap-stop:always;
  }
  .purse__prize{
    display:grid;align-content:center;
    min-height:138px;
    padding:20px 10px;
  }
  .purse__split b{font-size:clamp(26px,8vw,34px)}
  .purse__split span{
    margin-top:9px;
    font-size:9px;line-height:1.45;letter-spacing:.19em;
  }
  .purse__split em{font-size:11px;line-height:1.45}
  .purse__carousel--ready .purse__controls{
    display:flex;align-items:center;justify-content:center;gap:12px;
    margin-top:14px;
  }
  .purse__arrow{
    display:grid;place-items:center;
    width:38px;height:38px;padding:0;
    border:1px solid rgba(228,199,126,.72);
    background:rgba(6,28,34,.72);color:var(--paper-hi);
    font:400 18px/1 Arial,sans-serif;
    cursor:pointer;
  }
  .purse__arrow:disabled{opacity:.3;cursor:default}
  .purse__arrow:focus-visible,
  .purse__dot:focus-visible{outline:2px solid var(--paper-hi);outline-offset:3px}
  .purse__dots{display:flex;align-items:center;gap:7px}
  .purse__dot{
    box-sizing:border-box;
    width:7px;height:7px;padding:0;
    border:1px solid var(--gold);border-radius:50%;
    background:transparent;cursor:pointer;
    transition:width .2s ease,border-radius .2s ease,background-color .2s ease;
  }
  .purse__dot[aria-current="true"]{
    width:22px;border-radius:8px;background:var(--gold);
  }
  .purse__status{
    min-width:34px;
    font-size:9px;letter-spacing:.16em;color:var(--gold-lt);
  }
}

@media (min-width:600px){
  .purse__split{grid-template-columns:repeat(2,1fr)}
}
/* Three or more lines read better in a row of their own than in a 2×2 that
   leaves a hole, so the columns follow the count. */
@media (min-width:900px){
  .purse__split--three{grid-template-columns:repeat(3,1fr)}
  .purse__split--many{grid-template-columns:repeat(2,1fr)}
}

.editor-styles-wrapper .loopa-purse .rv{opacity:1;transform:none;filter:none;transition:none}