/* ══════════════════════════════════════════════════════════════════════
   COUPON COMPONENT (shared, single source of truth)
   Loaded by every page after all other stylesheets. Same markup + this
   file = identical coupons everywhere. Sizing adapts to the container
   (homepage full width vs service-page content column) via container
   queries, so there are NO page-specific coupon overrides anywhere else.
   Selectors are intentionally .hcoupon-prefixed (0-2-0+) so generic page
   typography (.svc-main p, etc.) can never restyle coupon internals.
   ══════════════════════════════════════════════════════════════════════ */

/* ── slider card widths ── */
.coupon-slider{ container-type:inline-size; }
.coupon-slider__inner .hcoupon{ flex:0 0 calc(33.333% - 14px); min-width:0; }
@container (max-width:640px){
  .coupon-slider__inner .hcoupon{ flex:0 0 100%; }
}

/* ── ticket: navy notched frame with cream inner panel ── */
.hcoupon{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; min-height:240px;
  color:var(--navy); text-align:left;
  border:0; border-radius:0;
  background:var(--navy);
  padding:26px 26px 24px;
  filter:drop-shadow(0 5px 12px rgba(17,19,51,.18));
  transition:transform .2s;
  --notch:15px;
  -webkit-mask:
    radial-gradient(var(--notch) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--notch) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--notch) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--notch) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
  mask:
    radial-gradient(var(--notch) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--notch) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--notch) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--notch) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
}
.hcoupon:hover{ transform:translateY(-3px); }
.hcoupon::before{
  content:''; position:absolute; inset:7px; z-index:-1;
  background:#ffffff;
  --n2:9px;
  -webkit-mask:
    radial-gradient(var(--n2) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n2) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n2) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n2) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
  mask:
    radial-gradient(var(--n2) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--n2) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--n2) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--n2) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
}

/* ── art: clipped to the cream panel, clear of the tear strip ── */
.hcoupon .hcoupon__art{
  position:absolute; top:7px; right:7px; bottom:52px; left:auto; width:52%;
  overflow:hidden; pointer-events:none;
}
.hcoupon .hcoupon__blob{
  position:absolute; right:-28px; top:50%; transform:translateY(-50%);
  width:185px; height:185px; border-radius:50%;
  background:var(--orange-2); opacity:.9;
}
.hcoupon .hcoupon__art svg{
  position:absolute; right:18px; top:50%; transform:translateY(-50%) rotate(-32deg);
  width:112px; height:112px;
  filter:drop-shadow(3px 4px 0 rgba(17,19,51,.28));
}
.hcoupon .hcoupon__art img{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  filter:drop-shadow(3px 4px 0 rgba(17,19,51,.28));
}
.hcoupon--tuneup .hcoupon__art img,
.hcoupon--waterheater .hcoupon__art img,
.hcoupon--service .hcoupon__art img{ width:138px; right:8px; transform:translateY(-50%) rotate(-6deg); }
.hcoupon--finance .hcoupon__art img,
.hcoupon--actune .hcoupon__art img{ width:118px; right:18px; }

/* ── copy ── */
.hcoupon .hcoupon__eyebrow{
  position:relative; z-index:1;
  font:700 13.5px var(--font-sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); margin:0 0 8px;
}
.hcoupon .hcoupon__title{
  position:relative; z-index:1;
  font:700 26px/1.12 'Barlow Condensed',var(--font-sans); text-transform:uppercase;
  letter-spacing:.01em; color:var(--navy); margin:0 0 8px; max-width:52%;
}
.hcoupon .hcoupon__title em{
  font-style:normal; display:inline; line-height:1.3;
  background:var(--orange); color:var(--white); padding:2px 8px 3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hcoupon .hcoupon__sub{
  display:inline-block; margin-top:7px;
  font-size:19px; line-height:1.25; letter-spacing:.04em;
  color:var(--navy); font-weight:600;
}
.hcoupon .hcoupon__fine{
  position:relative; z-index:1;
  font-size:12.5px; line-height:1.45; font-weight:500; color:#14161f;
  margin:0 0 12px; max-width:50%;
}

/* ── tear-off phone strip ── */
.hcoupon .hcoupon__row{
  margin:22px -19px -17px;
  padding:10px 19px;
  border-top:2px dashed var(--navy);
  background:var(--orange);
  -webkit-mask:
    radial-gradient(9px at 0 100%,#0000 98%,#000) 0 100%/51% 100% no-repeat,
    radial-gradient(9px at 100% 100%,#0000 98%,#000) 100% 100%/51% 100% no-repeat;
  mask:
    radial-gradient(9px at 0 100%,#0000 98%,#000) 0 100%/51% 100% no-repeat,
    radial-gradient(9px at 100% 100%,#0000 98%,#000) 100% 100%/51% 100% no-repeat;
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.hcoupon a.hcoupon__tear{
  font:700 20px 'Barlow Condensed',var(--font-sans); letter-spacing:.03em;
  color:var(--white); text-transform:uppercase; text-decoration:none; text-align:center;
}
.hcoupon a.hcoupon__tear:hover{ color:var(--white); text-decoration:underline; }

/* ── compact: mid-width containers where 3-up squeezes the cards
      (service content column, tablets). Same ticket, scaled. ── */
@container (min-width:821px) and (max-width:1000px){
  .coupon-slider__inner .hcoupon{ flex:0 0 calc(50% - 10.5px); }
}
@container (min-width:641px) and (max-width:820px){
  .coupon-slider__inner .hcoupon{ flex:0 0 calc(50% - 10.5px); }

  .hcoupon{ padding:20px 18px 18px; }
  .hcoupon .hcoupon__eyebrow{ font-size:11.5px; letter-spacing:.1em; margin-bottom:6px; }
  .hcoupon .hcoupon__title{ font-size:20px; max-width:58%; }
  .hcoupon .hcoupon__title em{ padding:1px 6px 2px; }
  .hcoupon .hcoupon__sub{ font-size:15px; }
  .hcoupon .hcoupon__fine{ font-size:11.5px; line-height:1.45; max-width:58%; margin-bottom:8px; }
  .hcoupon .hcoupon__blob{ width:128px; height:128px; right:-24px; }
  .hcoupon .hcoupon__art svg{ width:76px; height:76px; right:10px; }
  .hcoupon--tuneup .hcoupon__art img,
  .hcoupon--waterheater .hcoupon__art img,
  .hcoupon--service .hcoupon__art img{ width:96px; right:4px; }
  .hcoupon--finance .hcoupon__art img,
  .hcoupon--actune .hcoupon__art img{ width:80px; right:12px; }
  .hcoupon a.hcoupon__tear{ font-size:17px; }
  .hcoupon .hcoupon__row{ margin:16px -11px -11px; padding:8px 14px; }
}
/* single-column phones: the desktop ticket scaled down, not the tall
      squeezed variant. Text runs (almost) full width past a smaller art. */
@container (max-width:640px){
  .hcoupon{ padding:18px 18px 16px; min-height:0; }
  .hcoupon .hcoupon__eyebrow{ font-size:11px; letter-spacing:.1em; margin-bottom:5px; }
  .hcoupon .hcoupon__title{ font-size:21px; max-width:calc(100% - 104px); }
  .hcoupon .hcoupon__title em{ padding:1px 6px 2px; }
  .hcoupon .hcoupon__sub{ font-size:15px; margin-top:5px; }
  .hcoupon .hcoupon__fine{ font-size:11.5px; line-height:1.45; max-width:calc(100% - 104px); margin-bottom:6px; }
  .hcoupon .hcoupon__blob{ width:112px; height:112px; right:-22px; }
  .hcoupon .hcoupon__art{ bottom:44px; }
  .hcoupon .hcoupon__art svg{ width:66px; height:66px; right:8px; }
  .hcoupon--tuneup .hcoupon__art img,
  .hcoupon--waterheater .hcoupon__art img,
  .hcoupon--service .hcoupon__art img{ width:86px; right:4px; }
  .hcoupon--finance .hcoupon__art img,
  .hcoupon--actune .hcoupon__art img{ width:72px; right:10px; }
  .hcoupon a.hcoupon__tear{ font-size:16px; }
  .hcoupon .hcoupon__row{ margin:12px -11px -9px; padding:7px 12px; }
}