/* Restaurant specials — /specials. Requires yinzider.css first.
   Every special is a check stub: dashed rules, price set in the slab face,
   the same object the homepage's Cookie Table section is built from. */

.specials-shell{width:min(1180px,100%);margin:0 auto;padding:clamp(28px,4vw,52px) clamp(16px,4vw,40px) 72px}

.specials-intro{max-width:680px}
.specials-kicker{margin:0 0 10px;color:var(--kielbasa);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}
.specials-intro h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(38px,5.8vw,66px);
  line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.specials-intro p:last-child{max-width:58ch;margin:18px 0 0;color:var(--ink-soft);font-size:19px}

/* controls sit on the check pad, not in a card */
.specials-controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:28px 0 20px;padding:16px 18px;
  border:2px dashed var(--line);border-radius:var(--r-md);background:var(--cream-2)}
.specials-controls label{color:var(--ink-soft);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:5px}
.specials-controls input{font-family:var(--body);font-size:15px;padding:10px 13px;border-radius:var(--r-sm);
  border:2px solid var(--line);background:var(--cream);color:var(--ink);min-width:180px}
.specials-controls input:focus{border-color:var(--ink);outline:none}
.specials-controls button{margin-left:auto;font-family:var(--body);font-weight:700;font-size:14px;padding:11px 18px;
  border-radius:var(--r-pill);border:2px solid var(--ink);background:var(--ink);color:var(--cream);cursor:pointer}
.specials-controls button:hover{background:var(--porch-deep);border-color:var(--porch-deep)}

.specials-status{margin:0 0 18px;color:var(--ink-soft);font-size:15px}
/* specials.js renders these inside the grid, so they span the full row */
.specials-empty,.specials-error{grid-column:1 / -1;background:var(--cream-2);border:2px dashed var(--line);
  border-radius:var(--r-md);padding:24px;color:var(--ink-soft)}
.specials-empty strong{display:block;font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);
  margin-bottom:6px}
.specials-error{border-color:var(--kielbasa)}

.specials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;
  align-items:start}

.special-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--cream);
  border-radius:4px;padding:20px 20px 24px;box-shadow:0 6px 18px oklch(0.28 0.026 62 / .07)}
/* torn stub along the bottom, the way a check comes off the pad */
.special-card:after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background:repeating-linear-gradient(-45deg,var(--cream) 0 9px,transparent 9px 18px)}
.special-card-top{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:2px dashed var(--line)}
.special-type{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kielbasa)}
.special-neighborhood{margin-left:auto;font-size:12.5px;color:var(--ink-soft)}
.special-card h2{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.16;margin:4px 0 0}
.special-restaurant{margin:0;font-weight:700;font-size:14px;color:var(--ink)}
.special-description{margin:0;font-size:15px;color:var(--ink-soft)}
.special-price{margin:0;font-family:var(--display);font-size:24px}
.special-schedule{margin:0;font-size:13.5px;color:var(--ink-soft)}
.special-address{margin:0;font-size:13px;color:var(--ink-soft)}
.special-card-footer{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px;padding-top:12px;
  border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-soft)}
.special-source{margin-left:auto;color:var(--kielbasa);font-weight:700;text-decoration:none}
.special-source:hover{color:var(--ink)}

.specials-footer{background:var(--porch);color:var(--cream);padding:32px clamp(16px,4vw,40px) 48px;
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:15px}
.specials-footer a{color:var(--cream);font-weight:700;text-decoration:none;margin-left:auto}
.specials-footer a:hover{color:var(--mustard)}

@media(max-width:640px){
  .specials-controls button{margin-left:0;width:100%}
  .specials-controls input{min-width:0;width:100%}
}