/* ============================================================
   LOSS EVENT TEMPLATES — shared token layer
   wp-content/themes/kadence-child/assets/css/loss-events-tokens.css

   Loaded on any page whose content contains .loss-ev. Every event
   skin depends on this file and overrides only its palette.

   This is the layer to edit when modernising ALL templates at once:
   change the radius here and every event template on all 21 sites
   follows on the next page load.

   Structure the markup uses (identical across every skin):

     .loss-ev                    wrapper, carries the palette
       .loss-hero                dark intro panel
         .loss-hero__grid          copy + image
       .loss-cards               2-up feature grid
       .loss-table               label/value rows in a bordered card
       .loss-cta                 accent callout
       .loss-outro               centred signoff

   ============================================================ */

.loss-ev{
  /* ---- palette: overridden by each skin ---- */
  --ev-dark:#1F1930;
  --ev-dark-2:#2C2342;
  --ev-deep:#463A63;
  --ev-accent:#E9A93C;
  --ev-accent-lt:#F3CE93;
  --ev-tint:#F3EFF8;
  --ev-ink:#211C2E;
  --ev-muted:#6C6285;
  --ev-hair:rgba(33,28,46,.12);
  --ev-hair-lt:rgba(255,255,255,.16);
  --ev-on-dark:rgba(255,255,255,.82);

  /* ---- type: overridden by each skin ---- */
  --ev-display:"Trebuchet MS",Helvetica,sans-serif;
  --ev-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ev-mono:ui-monospace,Menlo,Consolas,monospace;

  /* ---- system: shared by every skin ---- */
  --ev-radius:14px;
  --ev-radius-sm:12px;
  --ev-radius-pill:999px;
  --ev-gap:14px;
  --ev-pad:clamp(28px,4.5vw,46px);
  --ev-pad-card:20px 22px;
  --ev-sect:34px;
  --ev-shadow:0 26px 60px -28px rgba(0,0,0,.85);
  --ev-ease:cubic-bezier(.2,.7,.3,1);

  font-family:var(--ev-body);
  color:var(--ev-ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- resets that beat EventON and Kadence ---------- */
.loss-ev *,.loss-ev *::before,.loss-ev *::after{box-sizing:border-box;}
.loss-ev ul,.loss-ev ol{list-style:none !important;padding-left:0 !important;margin:0 !important;}
.loss-ev li{list-style:none !important;margin:0 !important;padding:0;text-indent:0 !important;}
.loss-ev li::marker{content:"" !important;}
.loss-ev p,.loss-ev h2,.loss-ev h3,.loss-ev dl,.loss-ev dt,.loss-ev dd,
.loss-ev figure,.loss-ev figcaption{margin:0;padding:0;}
.loss-ev a{color:inherit;}
.loss-ev img{display:block;max-width:100%;height:auto;}
.loss-ev .loss-sect + .loss-sect{margin-top:var(--ev-sect);}

/* ---------- type roles ---------- */
.loss-ev .loss-kicker{
  font-family:var(--ev-mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ev-accent);
}
.loss-ev .loss-kicker--dim{color:var(--ev-muted);}
.loss-ev .loss-title{
  font-family:var(--ev-display) !important;font-weight:800;letter-spacing:-.025em;
  line-height:.98;font-size:clamp(38px,5.6vw,58px) !important;
  color:#fff !important;margin:12px 0 0 !important;
}
.loss-ev .loss-h2{
  font-family:var(--ev-display) !important;font-weight:600;letter-spacing:-.02em;
  line-height:1.1;font-size:clamp(24px,3.2vw,32px) !important;margin:0 !important;
}
.loss-ev .loss-h3{
  font-family:var(--ev-display) !important;font-weight:600;font-size:16px !important;
  letter-spacing:-.01em;line-height:1.3;margin:0 !important;
}
.loss-ev .loss-lede{font-size:clamp(16px,1.8vw,18px);line-height:1.55;}

/* ---------- hero panel ---------- */
.loss-ev .loss-hero{
  background-color:var(--ev-dark) !important;
  color:var(--ev-tint) !important;
  border-radius:var(--ev-radius);
  padding:var(--ev-pad);
  margin-bottom:38px;
}
.loss-ev .loss-hero p{color:var(--ev-on-dark);}
.loss-ev .loss-hero strong{color:var(--ev-accent-lt);font-weight:500;}
.loss-ev .loss-hero__grid{
  display:grid !important;grid-template-columns:minmax(0,1fr) 400px;
  gap:44px;align-items:center;margin-top:52px;
}
.loss-ev .loss-hero .loss-lede{margin-top:20px;max-width:52ch;}
.loss-ev .loss-hero .loss-lede + .loss-lede{margin-top:13px;}

.loss-ev .loss-shot{
  position:relative;width:100%;max-width:400px;justify-self:end;
  border-radius:var(--ev-radius);overflow:hidden;
  border:1px solid var(--ev-hair-lt);box-shadow:var(--ev-shadow);
}
.loss-ev .loss-shot img{width:100%;}
.loss-ev .loss-shot__tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--ev-mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ev-dark);background:var(--ev-accent);
  padding:7px 11px;border-radius:var(--ev-radius-pill);
}
@media (max-width:900px){
  .loss-ev .loss-hero__grid{grid-template-columns:1fr;gap:30px;margin-top:46px;}
  .loss-ev .loss-shot{order:-1;justify-self:stretch;max-width:none;}
  .loss-ev .loss-hero .loss-lede{max-width:none;}
}

/* ---------- struck-through pills ---------- */
.loss-ev .loss-pills{display:flex !important;flex-wrap:wrap;gap:8px;margin-top:26px !important;}
.loss-ev .loss-pills li{
  font-family:var(--ev-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 13px;border-radius:var(--ev-radius-pill);
  border:1px solid var(--ev-hair-lt);color:rgba(255,255,255,.6);
}
.loss-ev .loss-pills s{text-decoration:line-through;text-decoration-thickness:1px;opacity:.8;}

/* ---------- 2-up card grid ---------- */
.loss-ev .loss-cards{
  margin-top:22px !important;display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ev-gap);
}
@media (max-width:640px){.loss-ev .loss-cards{grid-template-columns:1fr;}}
.loss-ev .loss-cards li{
  background:var(--ev-tint);border-radius:var(--ev-radius-sm);
  padding:var(--ev-pad-card) !important;display:flex;gap:14px;align-items:flex-start;
}
.loss-ev .loss-cards__ico{
  flex:none;width:34px;height:34px;border-radius:9px;background:var(--ev-dark);
  display:flex;align-items:center;justify-content:center;
}
.loss-ev .loss-cards__ico svg{
  width:17px;height:17px;stroke:var(--ev-accent);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.loss-ev .loss-cards p{margin-top:4px;font-size:14px;color:var(--ev-muted);line-height:1.5;}

/* ---------- label / value table card ---------- */
.loss-ev .loss-table{
  border:1px solid var(--ev-hair);border-radius:var(--ev-radius);
  overflow:hidden;background:#fff;
}
.loss-ev .loss-table__head{
  padding:20px 26px;border-bottom:1px solid var(--ev-hair);background:var(--ev-tint);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.loss-ev .loss-table__head .loss-h2{font-size:20px !important;}
.loss-ev .loss-badge{
  font-family:var(--ev-mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ev-dark);color:var(--ev-accent-lt);
  padding:7px 13px;border-radius:var(--ev-radius-pill);
}
.loss-ev .loss-table__rows{padding:6px 26px 20px;}
.loss-ev .loss-row{
  display:flex;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--ev-hair);align-items:baseline;
}
.loss-ev .loss-row:last-child{border-bottom:0;}
.loss-ev .loss-row dt{
  flex:0 0 104px;font-family:var(--ev-mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ev-muted);
}
.loss-ev .loss-row dd{flex:1 1 auto;font-weight:500;font-size:17px;margin:0 !important;}
.loss-ev .loss-row dd small{
  display:block;font-weight:400;font-size:14px;color:var(--ev-muted);margin-top:3px;
}
.loss-ev .loss-table__note{
  padding:16px 26px;background:var(--ev-tint);border-top:1px solid var(--ev-hair);
  font-size:14px;color:var(--ev-muted);
}
@media (max-width:560px){
  .loss-ev .loss-row{flex-direction:column;gap:5px;}
  .loss-ev .loss-row dt{flex:none;}
  .loss-ev .loss-table__rows{padding:6px 20px 18px;}
  .loss-ev .loss-table__head,.loss-ev .loss-table__note{padding-left:20px;padding-right:20px;}
}

/* ---------- accent CTA ---------- */
.loss-ev .loss-cta{
  margin-top:var(--ev-sect);background:var(--ev-accent) !important;
  border-radius:var(--ev-radius);padding:26px 28px;
  display:flex;gap:20px;align-items:center;
}
.loss-ev .loss-cta__ico{
  flex:none;width:44px;height:44px;border-radius:var(--ev-radius-sm);
  background:var(--ev-dark);display:flex;align-items:center;justify-content:center;
}
.loss-ev .loss-cta__ico svg{
  width:20px;height:20px;stroke:var(--ev-accent);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.loss-ev .loss-cta h3{
  font-family:var(--ev-display) !important;font-weight:800;font-size:19px !important;
  letter-spacing:-.02em;color:var(--ev-dark) !important;margin:0 !important;
}
.loss-ev .loss-cta p{margin-top:5px;font-size:15px;color:rgba(0,0,0,.72);max-width:62ch;}
@media (max-width:560px){
  .loss-ev .loss-cta{flex-direction:column;align-items:flex-start;gap:14px;padding:22px;}
}

/* nudge arrow — points at the EventON RSVP box above the description */
.loss-ev .loss-cta--up .loss-cta__ico{animation:loss-bob 2.4s ease-in-out infinite;}
@keyframes loss-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@media (prefers-reduced-motion:reduce){
  .loss-ev .loss-cta--up .loss-cta__ico{animation:none;}
}

/* ---------- signoff ---------- */
.loss-ev .loss-outro{
  margin-top:36px;padding-top:30px;border-top:1px solid var(--ev-hair);text-align:center;
}
.loss-ev .loss-outro__line{
  font-family:var(--ev-display) !important;font-weight:400;
  font-size:clamp(20px,3vw,27px) !important;line-height:1.22;letter-spacing:-.015em;
  max-width:24ch;margin:0 auto !important;color:var(--ev-deep);
}
.loss-ev .loss-outro .loss-kicker{display:block;margin-top:16px;}

/* Kadence sets a content paragraph colour that beats .loss-ev .loss-hero p.
   Every dark panel in every template needs this, so it lives here. */
.loss-ev .loss-hero p,
.loss-ev .loss-hero .loss-lede{
  color:var(--ev-on-dark) !important;
}
.loss-ev .loss-hero .loss-kicker{
  color:var(--ev-accent) !important;
}
.loss-ev--happy-hour .loss-hero .loss-kicker{
  color:var(--ev-accent-lt) !important;
}
/* ============================================================
   TOKEN LAYER — ADDITIONS
   Append to: kadence-child/assets/css/loss-events-tokens.css

   New shared components introduced by the Million Dollar Question
   template. All are generic — alternating panels, a full-width image
   band, a 3-up tile grid, a stepped ladder list, a check list and a
   pullout quote. Any template can use them.

   Purely additive: no existing selector is changed, so the happy hour
   and wine down templates are unaffected.
   ============================================================ */

/* ---------- panels: the alternating dark / light rhythm ---------- */
.loss-ev .loss-panel{
  border-radius:var(--ev-radius);
  padding:clamp(30px,4.6vw,54px) clamp(24px,4vw,48px);
  margin-top:var(--ev-sect);
}
.loss-ev .loss-panel--dark{
  background:var(--ev-dark) !important;color:var(--ev-tint) !important;
}
.loss-ev .loss-panel--deep{
  background:var(--ev-dark-2) !important;color:var(--ev-tint) !important;
}
.loss-ev .loss-panel--soft{background:var(--ev-tint) !important;}
.loss-ev .loss-panel--center{text-align:center;}

/* text on dark panels — Kadence sets a content paragraph colour that
   beats an unweighted rule, so every dark surface needs this */
.loss-ev .loss-panel--dark p,
.loss-ev .loss-panel--deep p,
.loss-ev .loss-panel--dark li,
.loss-ev .loss-panel--deep li{color:var(--ev-on-dark) !important;}
.loss-ev .loss-panel--dark .loss-h2,
.loss-ev .loss-panel--deep .loss-h2{color:#fff !important;}
.loss-ev .loss-panel--dark strong,
.loss-ev .loss-panel--deep strong{color:var(--ev-accent-lt);}

.loss-ev .loss-measure{max-width:60ch;}
.loss-ev .loss-panel--center .loss-measure{margin-left:auto;margin-right:auto;}
.loss-ev .loss-gap{margin-top:18px !important;}

/* ---------- full-width image band ---------- */
.loss-ev .loss-band{
  margin-top:var(--ev-sect);border-radius:var(--ev-radius);
  overflow:hidden;position:relative;line-height:0;
  border:1px solid var(--ev-hair);
}
.loss-ev .loss-band img{width:100%;}

/* ---------- 3-up tiles ---------- */
.loss-ev .loss-tiles{
  margin-top:26px !important;display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ev-gap);
}
@media (max-width:900px){.loss-ev .loss-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.loss-ev .loss-tiles{grid-template-columns:1fr;}}
.loss-ev .loss-tiles li{
  background:#fff;border:1px solid var(--ev-hair);border-radius:var(--ev-radius-sm);
  padding:24px 22px !important;
}
.loss-ev .loss-tiles h3{margin-bottom:9px !important;}
.loss-ev .loss-tiles p{font-size:14.5px;color:var(--ev-muted);line-height:1.55;}
.loss-ev .loss-tiles .loss-tile__n{
  display:block;font-family:var(--ev-mono);font-size:10px;font-weight:700;
  letter-spacing:.18em;color:var(--ev-accent);margin-bottom:12px;
}

/* ---------- ladder: stepped statements with hairlines ---------- */
.loss-ev .loss-ladder{margin-top:26px !important;max-width:44ch;}
.loss-ev .loss-ladder li{
  padding:15px 0 !important;border-bottom:1px solid var(--ev-hair-lt);
  font-size:clamp(16px,2vw,19px);
}
.loss-ev .loss-ladder li:first-child{border-top:1px solid var(--ev-hair-lt);}
.loss-ev .loss-ladder li::before{
  content:"";display:inline-block;width:14px;height:1px;
  background:var(--ev-accent);margin-right:14px;vertical-align:middle;
}

/* ---------- check list ---------- */
.loss-ev .loss-checks{
  margin-top:24px !important;display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;
}
@media (max-width:760px){.loss-ev .loss-checks{grid-template-columns:1fr;}}
.loss-ev .loss-checks li{
  display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;
}
.loss-ev .loss-checks li::before{
  content:"";flex:none;width:19px;height:19px;border-radius:50%;margin-top:3px;
  background:var(--ev-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4 10-10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4 10-10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat,
       linear-gradient(#000,#000);
  mask-composite:exclude;
}

/* ---------- pullout quote ---------- */
.loss-ev .loss-pullout{
  margin-top:28px !important;padding:4px 0 4px 22px;
  border-left:3px solid var(--ev-accent);
  font-size:clamp(18px,2.4vw,23px);line-height:1.35;max-width:44ch;
}
.loss-ev .loss-panel--dark .loss-pullout,
.loss-ev .loss-panel--deep .loss-pullout{color:#fff !important;}

/* ---------- shout line ---------- */
.loss-ev .loss-shout{
  margin-top:26px !important;
  font-family:var(--ev-display) !important;font-weight:600;
  font-size:clamp(24px,3.4vw,34px) !important;line-height:1.15;
  letter-spacing:-.02em;
}

/* ---------- struck list (vertical, not pills) ---------- */
.loss-ev .loss-strike{margin-top:18px !important;}
.loss-ev .loss-strike li{
  padding:9px 0 !important;font-size:16px;color:var(--ev-muted);
}
.loss-ev .loss-strike li s{text-decoration:line-through;text-decoration-thickness:1px;}
/* ============================================================
   TOKEN LAYER — TYPE SCALE BUMP  (7 Sep 2026)
   Append to: kadence-child/assets/css/loss-events-tokens.css

   The original scale was built off a 17px base, which read too small
   in place — particularly the card and table copy at 14px. This lifts
   the base to 19px (~14pt) and moves everything else with it.

   Append only. These rules sit after the originals and win on source
   order, so nothing above needs editing and the Kadence colour fix
   already on the server is untouched.

   Raises all three templates at once — that is the point of the
   token layer.
   ============================================================ */

.loss-ev{font-size:19px;}

/* body copy */
.loss-ev .loss-lede{font-size:clamp(18px,2vw,21px);line-height:1.55;}
.loss-ev .loss-cards p{font-size:16px;line-height:1.55;}
.loss-ev .loss-tiles p{font-size:16.5px;line-height:1.6;}
.loss-ev .loss-checks li{font-size:17.5px;}
.loss-ev .loss-strike li{font-size:17.5px;}
.loss-ev .loss-ladder li{font-size:clamp(17px,2.1vw,20px);}
.loss-ev .loss-cta p{font-size:16.5px;}
.loss-ev .loss-table__note{font-size:15.5px;}

/* label / value rows */
.loss-ev .loss-row dd{font-size:18px;}
.loss-ev .loss-row dd small{font-size:15.5px;}
.loss-ev .loss-row dt{flex-basis:118px;font-size:12px;}

/* headings */
.loss-ev .loss-h3{font-size:17.5px !important;}
.loss-ev .loss-tiles h3{font-size:19px !important;}
.loss-ev .loss-cta h3{font-size:20px !important;}
.loss-ev .loss-table__head .loss-h2{font-size:22px !important;}

/* small caps utilities — 11px was legible but mean */
.loss-ev .loss-kicker{font-size:12px;}
.loss-ev .loss-badge{font-size:12px;}
.loss-ev .loss-pills li{font-size:12px;}
.loss-ev .loss-shot__tag{font-size:11px;}
.loss-ev .loss-tiles .loss-tile__n{font-size:11px;}

/* pullout and shout scale with the rest */
.loss-ev .loss-pullout{font-size:clamp(19px,2.5vw,24px);}
.loss-ev .loss-shout{font-size:clamp(26px,3.6vw,36px) !important;}
/* ============================================================
   TOKEN LAYER — TYPE SCALE, FORCED  (7 Sep 2026, second pass)
   Append to: kadence-child/assets/css/loss-events-tokens.css

   WHY THIS EXISTS
   The first type bump set .loss-ev{font-size:19px}, which only changes
   the INHERITED size. Kadence sets a font-size directly on paragraphs in
   the content area, and a direct rule beats inheritance regardless of how
   specific the ancestor selector is — so every <p> and <li> kept Kadence's
   size while headings and utilities scaled correctly.

   Same root cause as the paragraph-colour fix: anything Kadence also sets
   on content elements has to be declared explicitly here, with !important.
   Inheriting is not enough.

   Every rule below is !important on purpose. The general p/li rule comes
   first; the specific ones after it are also !important so they still win.

   Append only — nothing above needs editing.
   ============================================================ */

/* the floor: everything Kadence sizes directly */
.loss-ev p,
.loss-ev li,
.loss-ev dd{font-size:19px !important;line-height:1.6 !important;}

/* leads sit above the floor */
.loss-ev .loss-lede{font-size:clamp(19px,2.1vw,22px) !important;line-height:1.5 !important;}

/* card and tile copy sits below it */
.loss-ev .loss-cards p{font-size:16.5px !important;line-height:1.55 !important;}
.loss-ev .loss-tiles p{font-size:17px !important;line-height:1.6 !important;}
.loss-ev .loss-cta p{font-size:17px !important;}
.loss-ev .loss-table__note{font-size:16px !important;}
.loss-ev .loss-row dd{font-size:19px !important;}
.loss-ev .loss-row dd small{font-size:16px !important;}

/* list components */
.loss-ev .loss-checks li{font-size:18px !important;}
.loss-ev .loss-strike li{font-size:18px !important;}
.loss-ev .loss-ladder li{font-size:clamp(18px,2.1vw,21px) !important;}
.loss-ev .loss-places li{font-size:18px !important;}

/* pullout and shout */
.loss-ev .loss-pullout{font-size:clamp(20px,2.6vw,25px) !important;line-height:1.35 !important;}
.loss-ev .loss-shout{font-size:clamp(26px,3.6vw,36px) !important;line-height:1.15 !important;}

/* small caps utilities — these are labels, they stay small on purpose */
.loss-ev .loss-kicker{font-size:12px !important;line-height:1.4 !important;}
.loss-ev .loss-badge{font-size:12px !important;}
.loss-ev .loss-pills li{font-size:12px !important;}
.loss-ev .loss-facts li{font-size:12.5px !important;}
.loss-ev .loss-row dt{font-size:12px !important;}
.loss-ev .loss-shot__tag{font-size:11px !important;}
.loss-ev .loss-tiles .loss-tile__n{font-size:11px !important;}
/* ============================================================
   TOKEN LAYER — IMAGE BAND CROP  (8 Sep 2026)
   Append to: kadence-child/assets/css/loss-events-tokens.css

   WHY
   .loss-band was written assuming a wide source image. The two Million
   Dollar Question images turned out to be square (651×649 and 965×960),
   so at full container width the band rendered roughly 1100px tall —
   a screen and a half of one photo.

   Capping the band to a fixed ratio with object-fit:cover means the
   band looks right whatever shape gets dropped into it, which matters
   because customers will eventually swap these images.

   16:7 keeps it clearly a band rather than a second hero. Square
   sources crop to their centre, which suits both MDQ images.
   ============================================================ */

.loss-ev .loss-band{
  aspect-ratio:16 / 7;
}
.loss-ev .loss-band img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Very narrow screens get a squarer crop — 16:7 on a 360px viewport is a
   157px sliver, too thin to read as an image. */
@media (max-width:600px){
  .loss-ev .loss-band{aspect-ratio:4 / 3;}
}
/* ============================================================
   TOKEN LAYER — HERO PHOTO CROP  (8 Sep 2026)
   Append to: kadence-child/assets/css/loss-events-tokens.css

   WHY
   .loss-shot was written without a fixed shape, so the photo renders at
   whatever ratio the source happens to be. The five hero images are all
   16:9, which at 400px wide is 225px tall — short and thin beside a much
   taller column of copy.

   Cropping to 4:3 gives 400×300 and balances the column. More importantly
   it means the panel looks right whatever shape a customer later uploads,
   which is the difference between a template and a one-off layout.

   Same technique as the image band crop above.

   IF A PHOTO CROPS BADLY: the centre is kept by default. Nudge it per
   template rather than regenerating the image, e.g.

     .loss-ev--tgif .loss-shot img{object-position:center 35%;}

   Append only — nothing above needs editing.
   ============================================================ */

.loss-ev .loss-shot{
  aspect-ratio:4 / 3;
}
.loss-ev .loss-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* On the mobile stack the photo goes full width above the copy, where a
   4:3 block is tall enough to push the headline off screen. A wider crop
   keeps the title in view. */
@media (max-width:900px){
  .loss-ev .loss-shot{aspect-ratio:16 / 9;}
}

/* ---------- signature ornaments ----------
   Every skin puts a decorative mark in its hero — a stamp, a dimension
   rule, a search radius. They are decoration and must never take
   layout space.

   Give the element class "loss-sig" and it cannot. This rule is the
   only place that decides it, so a skin can no longer undo it by
   accident: an earlier version of the Google Business Profile skin set
   position:relative on all hero children, which silently overrode the
   ornament's own position:absolute, gave it a grid row, and pushed the
   whole hero below the fold.

   Skins supply size, placement and colour. Nothing else. */
.loss-ev .loss-hero{position:relative;}
.loss-ev .loss-sig{
  position:absolute !important;
  pointer-events:none;
  z-index:0;
  margin:0 !important;
}
.loss-ev .loss-hero > *:not(.loss-sig){position:relative;z-index:1;}
@media (max-width:900px){
  .loss-ev .loss-sig{display:none;}
}

/* ---------- full-width image band ----------
   A figure that shows a whole image, edge to edge. Used by the newer
   templates for graphics wider than the hero slot takes.

   Everything here is !important because Kadence and EventON both set
   heights and object-fit on images inside figures, which silently
   cropped these — the Wealth Builder bands lost their bottom third
   before this rule existed. The image decides the height; nothing
   else gets a say. */
.loss-ev .loss-band{
  margin:clamp(26px,4vw,40px) 0;
  border:1px solid var(--ev-hair);
  border-radius:var(--ev-radius-sm);
  overflow:visible !important;
  line-height:0;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
}
.loss-ev .loss-band img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  object-fit:fill !important;
  border-radius:var(--ev-radius-sm);
}