/* Discounts: coupons as coupons, promotions as the counter's posters. Screen prefix py-dsc-.
   No proposal draws these screens: they are drawn with the design system's paper
   (py.css) in the Talonario's language. A coupon is the slip cut along its dashed
   edge, its code printed like a folio; a promotion is a poster with its days under
   its name; its special prices are the price tags it hangs. Every form sits on its own
   sheet. Every rule is scoped to the screen element. */

/* ---------- The page: what is on offer, and the sheet that changes it ---------- */
/* The columns, the forms, the field grid, the facts and the empty pages are the shell's
   components (shell.css); what is on offer stands a little closer. */
.py-screen.py-dsc .py-cols-main { gap: var(--py-4); }
.py-screen.py-dsc .py-dsc-drop { justify-self: start; anchor-name: --py-dsc-eliminar; }

/* A coupon's *Eliminar* asks first, in the popover anchored to it (UI-318): it enters
   by sliding, never by fading, so it is read at its own contrast as it opens (UI-425),
   and leaves the same way, its behaviours listed again with its properties so `display`
   and `overlay` keep `allow-discrete` (UI-443); it opens under the link and toward the
   sheet, since the link starts the line. */
.py-screen.py-dsc .py-dsc-ask { position-anchor: --py-dsc-eliminar; position-area: block-end span-inline-end; transition-property: translate, display, overlay; transition-behavior: normal, allow-discrete, allow-discrete; }
.py-screen.py-dsc .py-dsc-ask h2 { font-size: var(--py-s-0); }
@supports not (position-area: block-end) { .py-screen.py-dsc .py-dsc-ask { margin: auto; } } /* no anchoring: a centered sheet */
.py-screen.py-dsc .py-dsc-priced { display: grid; gap: var(--py-4); } /* the tags, answered in place */
.py-screen.py-dsc .py-dsc-answer { display: flex; flex-wrap: wrap; gap: var(--py-2); align-items: center; }

/* ---------- Coupons: each one the slip cut along its dashed edge ---------- */
.py-screen.py-dsc .py-dsc-coupons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--py-5); }
.py-screen.py-dsc .py-dsc-coupon {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-1) var(--py-3); align-items: baseline;
  padding: var(--py-4) var(--py-5);
  background: color-mix(in oklch, var(--py-folio) 7%, var(--py-paper)); border: 2px dashed color-mix(in oklch, var(--py-folio) 55%, transparent); border-radius: var(--py-r-ctl);
  /* the two notches where the slip is torn from its strip */
  mask: radial-gradient(circle at 0 50%, transparent 0.7rem, black 0.75rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 0.7rem, black 0.75rem) right / 51% 100% no-repeat;
  transition: translate 120ms ease;
}
.py-screen.py-dsc .py-dsc-coupon:hover { translate: 0 -2px; }
.py-screen.py-dsc .py-dsc-coupon a { grid-column: 1 / -1; color: var(--py-folio); font-family: var(--py-f-display); font-stretch: 66%; font-weight: 750; font-size: var(--py-s-1); letter-spacing: 0.08em; line-height: 1.1; text-decoration: none; overflow-wrap: break-word; }
.py-screen.py-dsc .py-dsc-coupon a::after { content: ""; position: absolute; inset: 0; } /* the whole slip opens it */
.py-screen.py-dsc .py-dsc-coupon a:focus-visible { outline: none; }
.py-screen.py-dsc .py-dsc-coupon:has(a:focus-visible) { outline: 3px solid var(--py-focus); outline-offset: 3px; }
.py-screen.py-dsc .py-dsc-value { grid-column: 1 / -1; font-family: var(--py-f-display); font-stretch: 70%; font-weight: 800; font-size: var(--py-s-5); line-height: 1; }
.py-screen.py-dsc .py-dsc-coupon p { grid-column: 1 / -1; font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-dsc .py-dsc-coupon .py-dsc-uses { padding-top: var(--py-2); border-top: 1px dashed var(--py-rule); }

/* ---------- Promotions: the counter's posters ---------- */
.py-screen.py-dsc .py-dsc-posters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--py-4); }
.py-screen.py-dsc .py-dsc-poster {
  position: relative; display: grid; gap: var(--py-2); align-content: start; min-height: 7rem;
  padding: var(--py-5) var(--py-5) var(--py-4);
  background: var(--py-rosa); border-radius: var(--py-r-sheet); box-shadow: var(--py-shadow-sheet);
  border-top: 5px solid var(--py-stamp);
}
.py-screen.py-dsc .py-dsc-poster a { font-family: var(--py-f-display); font-stretch: 100%; font-weight: 780; font-size: var(--py-s-1); line-height: 1.15; text-decoration: none; }
.py-screen.py-dsc .py-dsc-poster a::after { content: ""; position: absolute; inset: 0; }
.py-screen.py-dsc .py-dsc-poster a:focus-visible { outline: none; }
.py-screen.py-dsc .py-dsc-poster:has(a:focus-visible) { outline: 3px solid var(--py-focus); outline-offset: 2px; }
.py-screen.py-dsc .py-dsc-poster p { margin-top: auto; font-size: var(--py-s--1); font-weight: 600; color: var(--py-stamp); }

/* A promotion's special prices: the price tags it hangs */
.py-screen.py-dsc .py-dsc-tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--py-3); }
.py-screen.py-dsc .py-dsc-tag {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-1) var(--py-3); align-items: center;
  padding: var(--py-3) var(--py-4) var(--py-3) 2.2rem;
  background: var(--py-canary); color: var(--py-canary-ink); border-radius: var(--py-r-sheet) var(--py-r-ctl) var(--py-r-ctl) var(--py-r-sheet);
  clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%, 0 50%);
}
.py-screen.py-dsc .py-dsc-tag::before { /* the tag's eyelet */
  content: ""; position: absolute; inset: 50% auto auto 1.05rem; translate: 0 -50%;
  inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--py-paper);
}
.py-screen.py-dsc .py-dsc-tag > span:first-child { grid-column: 1 / -1; font-weight: 650; color: var(--py-ink); }
.py-screen.py-dsc .py-dsc-tag .py-num { font-family: var(--py-f-display); font-stretch: 70%; font-weight: 800; font-size: var(--py-s-2); line-height: 1; color: var(--py-ink); }
.py-screen.py-dsc .py-dsc-tag form { justify-self: end; }