/* assets/sign.css — the 17×11 landscape FOR SALE sign, published for /car-value.
   Port of scripts/stickers/sign.css (the Featured Listing print tool) with two
   deliberate changes:
     1. every size is container-relative (1 unit = 1px on the 1632px-wide print
        sheet), so ONE markup renders the in-report preview at any width, the
        16in print sheet and the PNG export with no transform hacks;
     2. the footer logo is a real <img> in a cropping frame (a CSS background
        logo vanishes under Firefox print / "print backgrounds" off).
   Scoped entirely under .sign-frame — no :root / html / body rules. */

.sign-frame{ container-type:inline-size; width:100%; --navy:#04367b; --dark:#02255a; --orange:#ff914d; --orange-deep:#ff7a26; --mist:#c7d4ea; --line:rgba(255,255,255,.14); }
.sign-sheet{
  --u:0.0612745cqw; /* 1/1632 of the sheet width */
  width:100%; aspect-ratio:17/11;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--dark) 0%, #032c67 55%, var(--navy) 100%);
  font-family:'Poppins', sans-serif;
  color:#fff;
  display:flex; flex-direction:column;
  padding:var(--spt,calc(44*var(--u))) var(--spx,calc(64*var(--u))) 0;
  box-sizing:border-box;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.sign-sheet *{ box-sizing:border-box; margin:0; }

/* subtle depth, matching the reference's soft vignette */
.sign-sheet::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 22% 0%, rgba(255,145,77,.07), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(0,0,0,.28), transparent 65%);
}

/* ---- FOR SALE headline ---- */
.sign-head{ position:relative; text-align:center; }
.sign-head h1{
  margin:0; font-weight:900; font-size:var(--st,calc(190*var(--u))); line-height:.96;
  letter-spacing:.02em; color:var(--orange);
  display:flex; justify-content:space-between;
  text-transform:uppercase; white-space:nowrap;
}
.sign-head h1.centered{ display:block; text-align:center; letter-spacing:.06em; }
.sign-head.hs-white h1{ color:#fff; }
.sign-head.hs-glow h1{
  text-shadow:0 0 calc(70*var(--u)) rgba(255,145,77,.7), 0 0 calc(26*var(--u)) rgba(255,145,77,.45), 0 calc(10*var(--u)) calc(34*var(--u)) rgba(0,0,0,.45);
}
.sign-head.hs-banner{
  background:linear-gradient(100deg, var(--orange) 0%, var(--orange-deep) 100%);
  margin:calc(var(--spt,calc(44*var(--u))) * -1) calc(var(--spx,calc(64*var(--u))) * -1) 0;
  padding:calc(var(--spt,calc(44*var(--u))) * .8) var(--spx,calc(64*var(--u))) calc(16*var(--u));
  box-shadow:0 calc(22*var(--u)) calc(50*var(--u)) calc(-22*var(--u)) rgba(0,0,0,.55);
}
.sign-head.hs-banner h1{ color:var(--dark); }

/* ---- body: info left, QR card right ---- */
.sign-body{ position:relative; flex:1; display:flex; gap:var(--sbg,calc(64*var(--u))); align-items:stretch; padding-top:var(--sbt,calc(38*var(--u))); min-height:0; }

.sign-info{ flex:1 1 58%; min-width:0; display:flex; flex-direction:column; }
.sign-sheet.no-qr .sign-info{ flex-basis:100%; }
.sign-vehicle{ font-weight:700; font-size:var(--sv,calc(74*var(--u))); line-height:1.08; letter-spacing:calc(-.5*var(--u)); color:#fff; text-wrap:balance; }
.sign-vehicle.fit-sm{ font-size:calc(var(--sv,calc(74*var(--u))) * .84); }
.sign-vehicle.fit-xs{ font-size:calc(var(--sv,calc(74*var(--u))) * .70); }
.sign-trim{ margin-top:calc(6*var(--u)); font-weight:500; font-size:var(--strm,calc(38*var(--u))); color:var(--mist); }
.sign-price{ margin-top:calc(26*var(--u)); font-weight:800; font-size:var(--sp,calc(150*var(--u))); line-height:1; letter-spacing:calc(-3*var(--u)); color:var(--orange); }
.sign-price.fit-sm{ font-size:calc(var(--sp,calc(150*var(--u))) * .83); }
.sign-price.is-words{ font-size:calc(var(--sp,calc(150*var(--u))) * .55); line-height:1.1; }
.sign-miles{ margin-top:calc(22*var(--u)); font-weight:600; font-size:var(--sm,calc(42*var(--u))); color:#e7edf7; }

/* the phone pill matches the event (Featured) sign: translucent orange tint,
   thin orange border, white number on navy — so the free sign and the sign we
   print at the Fair read as the same product (Tahmid's call, 2026-09-03; the
   solid-white block from earlier that day competed with the QR card). The
   number keeps the larger size from the distance-readability pass. */
.sign-text-pill{
  margin-top:calc(30*var(--u)); align-self:flex-start;
  display:flex; align-items:center; gap:calc(22*var(--u));
  background:rgba(255,145,77,.14); border:calc(2*var(--u)) solid rgba(255,145,77,.5);
  border-radius:calc(22*var(--u)); padding:calc(20*var(--u)) calc(36*var(--u)) calc(20*var(--u)) calc(26*var(--u));
  max-width:100%;
}
.sign-text-pill.is-missing{
  background:transparent; border:calc(3*var(--u)) dashed var(--orange);
}
.sign-text-pill .ico{
  width:calc(64*var(--u)); height:calc(64*var(--u)); border-radius:calc(16*var(--u)); flex:0 0 calc(64*var(--u));
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  display:flex; align-items:center; justify-content:center;
}
.sign-text-pill .ico svg{ width:calc(36*var(--u)); height:calc(36*var(--u)); }
.sign-text-pill .lbl{ font-weight:700; font-size:calc(22*var(--u)); letter-spacing:.22em; color:var(--orange); text-transform:uppercase; }
.sign-text-pill .num{ font-weight:800; font-size:var(--sph,calc(80*var(--u))); letter-spacing:calc(.5*var(--u)); color:#fff; line-height:1.05; white-space:nowrap; }
.sign-text-pill .num.is-empty{ color:rgba(255,255,255,.55); font-size:calc(40*var(--u)); white-space:normal; line-height:1.15; }

/* ---- white QR card ---- */
.sign-qr-card{
  flex:0 0 var(--sqw,calc(560*var(--u))); align-self:center;
  background:#fff; border-radius:calc(34*var(--u));
  padding:calc(36*var(--u)) calc(34*var(--u)) calc(30*var(--u)); text-align:center;
  box-shadow:0 calc(30*var(--u)) calc(70*var(--u)) calc(-30*var(--u)) rgba(0,0,0,.55);
}
.sign-qr-card .cap-top{
  font-weight:800; font-size:calc(26*var(--u)); letter-spacing:.1em; color:var(--dark); line-height:1.25;
  text-transform:uppercase; margin-bottom:calc(20*var(--u));
}
.sign-qr-card .qr{ display:flex; justify-content:center; }
.sign-qr-card .qr svg{ display:block; width:var(--sqr,calc(480*var(--u))); height:var(--sqr,calc(480*var(--u))); }
.sign-qr-card .cap-bottom{
  margin-top:calc(20*var(--u)); font-weight:500; font-size:calc(22*var(--u)); color:#6b7280; font-style:italic;
}

/* ---- footer strip ---- */
.sign-footer{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  border-top:calc(2*var(--u)) solid var(--line); margin-top:calc(26*var(--u)); padding:calc(18*var(--u)) 0 calc(26*var(--u));
}
.sign-footer.right{ justify-content:flex-end; }
.sign-footer .brand{ display:flex; align-items:center; gap:calc(28*var(--u)); }
/* real CAF logo — the site-footer crop recipe (220×74 box, 286px logo at -34/-107), as an <img> */
.sign-footer .logo{ position:relative; width:calc(220*var(--u)); height:calc(74*var(--u)); overflow:hidden; display:block; }
.sign-footer .logo img{ position:absolute; left:calc(-34*var(--u)); top:calc(-107*var(--u)); width:calc(286*var(--u)); height:calc(286*var(--u)); max-width:none; }
.sign-footer .cred{ font-weight:600; font-size:calc(22*var(--u)); color:var(--mist); line-height:1.3; }
.sign-footer .cred b{ color:#fff; font-weight:700; }