/* Special cards: round beer mats (public Specials page and the admin preview) */
@font-face{font-family:"Fjalla One";src:url(../fonts/fjalla-one.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Abhaya Libre";src:url(../fonts/abhaya-libre.woff2) format("woff2");font-display:swap}
.mats{list-style:none;margin:1.4em 0 1em;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px 24px;justify-items:center}
.mat{position:relative;box-sizing:border-box;width:min(100%,310px);aspect-ratio:1;container-type:inline-size;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fcf5e4 0%,#f2e4c3 62%,#e8d6ac 100%);box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 0 0 7px #f7eed6,inset 0 0 0 9px #165a38,inset 0 0 0 12px #f7eed6,inset 0 0 0 13px #ff883e;transition:transform .2s ease,box-shadow .2s ease}
.mat:nth-child(3n+1){transform:rotate(-3deg)}
.mat:nth-child(3n+2){transform:rotate(2deg)}
.mat:nth-child(3n){transform:rotate(-1deg)}
.mat:hover{transform:rotate(0) translateY(-3px);box-shadow:0 16px 28px rgba(0,0,0,.5),inset 0 0 0 7px #f7eed6,inset 0 0 0 9px #165a38,inset 0 0 0 12px #f7eed6,inset 0 0 0 13px #ff883e}
.mat-in{position:absolute;top:13%;right:13%;bottom:13%;left:13%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.mats .mat h3{margin:0 0 .2em;font-family:"Fjalla One","Arial Narrow",Impact,sans-serif;font-weight:400;font-size:1.5rem;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:#143d2a!important;text-shadow:none}
.mats .mat .mat-price{margin:0 0 .25em;font-family:"Fjalla One","Arial Narrow",Impact,sans-serif;font-size:1.55rem;line-height:1.1;letter-spacing:.03em;color:#b84a0b!important;text-shadow:none}
.mats .mat .mat-body,.mats .mat .mat-body b,.mats .mat .mat-body i{margin:0;max-width:100%;font-family:"Abhaya Libre",Georgia,serif;font-weight:400;font-size:1.02rem;line-height:1.22;color:#2a281f!important;text-shadow:none}
.flyers-h{margin:1.4em 0 .4em}
@media (prefers-reduced-motion:reduce){.mat{transition:none}.mat:hover{transform:none}}
@media print{.mat{box-shadow:none!important;border:2px solid #999;background:none!important}.mats .mat *{color:#000!important}}
/* lettering scales with the width of the mat, so the same text fits on a small phone */
@supports (width:1cqw){
  .mats .mat h3{font-size:clamp(.95rem,7.7cqw,1.5rem)}
  .mats .mat .mat-price{font-size:clamp(1rem,8cqw,1.55rem)}
  .mats .mat .mat-body,.mats .mat .mat-body b,.mats .mat .mat-body i{font-size:clamp(.78rem,5.3cqw,1.02rem)}
}
/* corner ribbon across the top left of a mat */
.mat .ribbon{position:absolute;top:13%;left:-7%;z-index:2;padding:.18em 1.5em;font-family:"Fjalla One","Arial Narrow",Impact,sans-serif;font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;white-space:nowrap;transform:rotate(-36deg);box-shadow:0 3px 8px rgba(0,0,0,.4);border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(0,0,0,.25)}
.mat.has-ribbon .mat-in{top:15%;bottom:11%}
@media print{.mat .ribbon{box-shadow:none;border:1px solid #000;background:none!important;color:#000!important}}