/* ═══════════════════════════════════════════
   KLUB UGODNOSTI — on the homepage (index.html#ugodnosti), under
   "Postani del skupnosti". Moved here from skupnost.css with the section;
   js/deals.js fills it from Firestore (partnerji).
   ═══════════════════════════════════════════ */
.deals { padding: var(--sp-11) 0 var(--sp-12); }
.coupons {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
}
.coupons-wait,
.coupons-err { grid-column: 1 / -1; font-size: var(--fs-2); color: var(--text2); }
.coupons-err a { color: var(--red-700); }

/* A ticket: a dark stub carrying the discount, a perforation, and the
   body. The two notches at the perforation are cut with a mask. */
.coupon {
  --stub: 7.5rem;
  --notch: 9px;
  display: grid;
  grid-template-columns: var(--stub) minmax(0, 1fr);
  min-height: 9.5rem;
  background: var(--ink-050);
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.coupon-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--sp-4) var(--sp-2);
  background: var(--ink-850);
  color: var(--ink-000);
  text-align: center;
}
.coupon-stub b {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.coupon-stub b.is-word { font-size: 1.3rem; font-style: italic; font-weight: 600; }
.coupon-stub span { font-size: var(--fs-0); color: var(--on-dark-55); }
.coupon-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6) var(--sp-5) calc(var(--sp-6) + 1px);
  background: linear-gradient(var(--ink-300) 50%, transparent 0) left / 1px 8px repeat-y;
}
.coupon-body h3 { font-size: var(--fs-4); line-height: 1.2; }
.coupon-body p { font-size: var(--fs-2); line-height: var(--lh-body); color: var(--ink-600); }
.coupon-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
}
.coupon-how { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--text2); }
.coupon-how .material-symbols-sharp { font-size: 18px; color: var(--ink-400); }
.coupon-code {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px 4px 4px 12px;
  border: 1.5px dashed var(--ink-400);
  border-radius: var(--r-1);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-850);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-inout);
}
.coupon-code span {
  padding: 4px 9px;
  background: var(--ink-850);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-000);
  transition: background var(--dur-1) var(--ease-inout);
}
.coupon-code:hover { border-color: var(--ink-850); }
.coupon-code.is-copied span { background: var(--red-600); }
.coupon-code:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }
.coupon-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--blue-700);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--blue-rgb) / .3);
  overflow-wrap: anywhere;
}
.coupon-link:hover { border-bottom-color: currentColor; }
.coupon-link:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }
.coupon-link .material-symbols-sharp { font-size: 15px; }

.deals-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 1100px) {
  .coupon { --stub: 6.5rem; }
}
@media (max-width: 900px) {
  .deals { padding: var(--sp-10) 0 var(--sp-10); }
  .coupons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .coupon { --stub: 5.25rem; }
  .coupon-stub b { font-size: 1.55rem; }
  .coupon-stub b.is-word { font-size: 1.05rem; }
  .coupon-body { padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 1px); }
}

/* inside "Postani del skupnosti" the membership block above already
   leaves room: only a short step down to the coupons */
.member .deals { padding-top: var(--sp-4); }