/* Ad tiles in the product list (product-ads.js, Marketing → "Reklamy w produktach").
   Same footprint as a product card, so the list keeps its rhythm, but unmistakably different:
   a two-colour gradient frame (like profile frames in Discord), the picture fading into the tile
   through the same gradient, an "Reklama" label and one button.
   Toned down for reading: motion in the corner of the eye pulls attention away from the products,
   so the frame stands still while the customer reads. How loud a tile is comes from the settings:
   - is-subtle: thin frame, pastel inside, no glow and no motion;
   - is-balanced (default): 3 px frame, a soft shadow, one slow sweep of the colours when the tile
     first comes into view (is-seen), a glow only under the mouse;
   - is-bold: 4 px frame that keeps flowing, glow, floating emoji.
   --promo-from / --promo-to / --promo-cta-ink come from the ad itself. */
.promo-tile {
  -webkit-user-select: none;
  user-select: none;
  --promo-from: #5865f2;
  --promo-to: #eb459e;
  --promo-cta-ink: #fff;
  --promo-frame: 3px;
  --promo-ink: #fff;
  --promo-soft-ink: rgba(255, 255, 255, .84);
  --promo-inside: linear-gradient(165deg, color-mix(in srgb, var(--promo-from) 26%, #121320) 0%, color-mix(in srgb, var(--promo-to) 28%, #121320) 100%);
  --promo-shadow: 0 6px 18px -10px color-mix(in srgb, var(--promo-to) 45%, transparent);
  --promo-shadow-hover: 0 14px 30px -12px color-mix(in srgb, var(--promo-to) 60%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--promo-from) 45%, transparent);
  position: relative;
  min-width: 0;
  display: flex;
  border: var(--promo-frame) solid transparent;
  border-radius: 22px;
  background:
    var(--promo-inside) padding-box,
    linear-gradient(135deg, var(--promo-from), var(--promo-to), var(--promo-from)) border-box;
  background-size: 100% 100%, 220% 220%;
  box-shadow: var(--promo-shadow);
  color: var(--promo-ink);
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}
.promo-tile.tone-light {
  --promo-ink: #17151f;
  --promo-soft-ink: #4a4658;
  --promo-inside: linear-gradient(165deg, color-mix(in srgb, var(--promo-from) 12%, #fff) 0%, color-mix(in srgb, var(--promo-to) 14%, #fff) 100%);
}
.promo-tile:hover { transform: translateY(-2px); box-shadow: var(--promo-shadow-hover); }

/* Subtle: a thin frame on a pastel tile; it is noticed when the eye reaches it, not before. */
.promo-tile.is-subtle {
  --promo-frame: 2px;
  --promo-ink: #17151f;
  --promo-soft-ink: #4a4658;
  --promo-inside: linear-gradient(165deg, color-mix(in srgb, var(--promo-from) 8%, #fff) 0%, color-mix(in srgb, var(--promo-to) 10%, #fff) 100%);
  --promo-shadow: none;
  --promo-shadow-hover: 0 10px 22px -14px color-mix(in srgb, var(--promo-to) 50%, transparent);
}
/* Bold: the earlier, loudest look. */
.promo-tile.is-bold {
  --promo-frame: 4px;
  --promo-shadow: 0 10px 28px -10px color-mix(in srgb, var(--promo-to) 55%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--promo-from) 50%, transparent);
  --promo-shadow-hover: 0 18px 38px -12px color-mix(in srgb, var(--promo-to) 70%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--promo-from) 60%, transparent);
}

/* Motion: one sweep when the tile is first seen (balanced) or a slow endless flow (bold). */
.promo-tile.is-balanced.is-animated.is-seen { animation: promo-frame 2.4s ease-in-out 1 both; }
.promo-tile.is-bold.is-animated { animation: promo-frame 6s ease-in-out infinite alternate; }
@keyframes promo-frame { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }

.promo-link { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; color: inherit; text-decoration: none; }
.promo-link:focus-visible { outline: 3px solid var(--promo-ink); outline-offset: 3px; }

/* Picture: square like a product photo, with both ad colours laid over it and fading into the tile. */
.promo-visual { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--promo-from), var(--promo-to)); }
.promo-visual::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.35) 0 2px, transparent 3px) 0 0 / 28px 28px, radial-gradient(circle at 70% 64%, rgba(255,255,255,.22) 0 1.5px, transparent 2.5px) 0 0 / 36px 36px; }
.promo-visual img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.promo-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--promo-from) 30%, transparent) 0%, transparent 46%, color-mix(in srgb, var(--promo-to) 26%, transparent) 100%),
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--promo-to) 28%, #121320) 100%);
}
:is(.tone-light, .is-subtle) .promo-visual::after {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--promo-from) 22%, transparent) 0%, transparent 46%, color-mix(in srgb, var(--promo-to) 18%, transparent) 100%),
    linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--promo-to) 12%, #fff) 100%);
}
/* A softer picture on the subtle tile: less saturated colours compete less with product photos. */
.is-subtle .promo-visual { background: linear-gradient(135deg, color-mix(in srgb, var(--promo-from) 55%, #fff), color-mix(in srgb, var(--promo-to) 55%, #fff)); }
.promo-emoji { position: relative; z-index: 3; font-size: clamp(56px, 7vw, 86px); filter: drop-shadow(0 12px 14px rgba(0,0,0,.25)); transition: transform .3s ease; }
.promo-tile:hover .promo-emoji { transform: translateY(-4px) rotate(-4deg); }
.promo-tile.is-bold.is-animated .promo-emoji { animation: promo-float 4s ease-in-out infinite; }
@keyframes promo-float { 50% { transform: translateY(-6px) rotate(-4deg); } }
/* Disclosure: always visible, top left, readable on any picture. */
.promo-label { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 4px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(12, 12, 24, .62); color: #fff; font-size: .6875rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px); }
/* "×": the customer decides they do not want this ad (not shown again during the visit). */
.promo-hide { position: absolute; top: 6px; right: 6px; z-index: 5; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.promo-hide svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(12, 12, 24, .55); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; backdrop-filter: blur(6px); transition: background .15s ease; }
.promo-hide:hover svg, .promo-hide:focus-visible svg { background: rgba(12, 12, 24, .82); }
.promo-hide:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.promo-content { position: relative; z-index: 3; display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.promo-eyebrow { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, var(--promo-from), var(--promo-to)); color: var(--promo-cta-ink); font-size: .75rem; font-weight: 900; letter-spacing: .02em; }
.promo-title { color: var(--promo-ink); font-size: 1.0625rem; font-weight: 950; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.promo-text { color: var(--promo-soft-ink); font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.promo-cta { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 0 16px; border-radius: 12px; background: linear-gradient(90deg, var(--promo-from), var(--promo-to)); color: var(--promo-cta-ink); font-size: .9375rem; font-weight: 950; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
/* Light tile: a darker button keeps the text readable on pale colours. */
.tone-light .promo-cta { background: linear-gradient(90deg, color-mix(in srgb, var(--promo-from) 72%, #000), color-mix(in srgb, var(--promo-to) 62%, #000)); }
.promo-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.promo-tile:hover .promo-cta svg { transform: translateX(3px); }

/* A hidden ad keeps its place (nothing jumps under the customer's finger) and can come back. */
.promo-tile.is-hidden-ad { --promo-frame: 2px; border-style: dashed; border-color: var(--line-strong, #c8d3ca); background: var(--surface-soft, #f9fbf7); box-shadow: none; color: var(--muted, #66736b); }
.promo-tile.is-hidden-ad:hover { transform: none; }
.promo-hidden { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 18px; text-align: center; }
.promo-hidden p { max-width: 24ch; margin: 0; font-size: .875rem; line-height: 1.4; }
.promo-undo { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong, #c8d3ca); border-radius: 12px; background: #fff; color: var(--ink, #17251d); font-size: .875rem; font-weight: 850; cursor: pointer; }

/* Phone: one card per row; the ad lies across like the product cards, picture on the left. */
@media (max-width: 680px) {
  .promo-link { display: grid; grid-template-columns: 122px minmax(0, 1fr); }
  .promo-visual { align-self: stretch; aspect-ratio: auto; min-height: 150px; }
  .promo-visual::after { background: linear-gradient(135deg, color-mix(in srgb, var(--promo-from) 30%, transparent), transparent 50%, color-mix(in srgb, var(--promo-to) 26%, transparent)), linear-gradient(90deg, transparent 60%, color-mix(in srgb, var(--promo-from) 26%, #121320) 100%); }
  :is(.tone-light, .is-subtle) .promo-visual::after { background: linear-gradient(90deg, transparent 62%, color-mix(in srgb, var(--promo-from) 12%, #fff) 100%); }
  .promo-emoji { font-size: 52px; }
  .promo-label { top: 8px; left: 8px; padding: 3px 8px; }
  /* The "×" sits over the text side, away from the label on the picture. */
  .promo-hide { top: 2px; right: 2px; }
  .promo-content { padding: 12px 44px 12px 12px; }
  .promo-title { font-size: 1rem; }
  .promo-text { font-size: .8125rem; }
  .promo-cta { min-height: 44px; margin-right: -32px; }
  .is-subtle .promo-hide, .tone-light .promo-hide { color: #17151f; }
  .is-subtle .promo-hide svg, .tone-light .promo-hide svg { background: rgba(255, 255, 255, .7); }
}
@media (max-width: 410px) {
  .promo-link { grid-template-columns: 105px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-tile.is-animated, .promo-tile.is-animated .promo-emoji { animation: none; }
  .promo-tile:hover, .promo-tile:hover .promo-emoji { transform: none; }
}
@media (forced-colors: active) {
  .promo-tile { border: 4px double CanvasText; }
  .promo-label, .promo-hide svg { border: 1px solid CanvasText; }
}
@media print {
  .promo-tile { display: none; }
}