/* Premiery (app/lib/premiery.php): kafelki zapowiedzi, karta produktu przed premierą i strona /premiery. */

/* zastępnik zdjęcia — jak tło zdjęć sklepu, z marką i datą premiery */
.prem-ph { position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; height: 100%; aspect-ratio: 1; padding: 18px; text-align: center; color: var(--czern); background: radial-gradient(ellipse 64% 58% at 50% 50%, #ffd68c 0%, #f7ba46 55%, #e69900 100%); }
.prem-ph::after { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(16, 14, 20, .28); border-radius: 12px; pointer-events: none; }
.prem-ph__brand { font: 500 .78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.prem-ph__tag { font: 800 clamp(1.9rem, 4.2vw, 2.7rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.prem-ph__date { font: 500 .95rem/1.2 var(--mono); background: var(--czern); color: var(--biel); padding: 5px 10px 4px; border-radius: 6px; }
.prem-ph--big { border-radius: 20px; }
.prem-ph--big .prem-ph__brand { font-size: 1rem; }
.prem-ph--big .prem-ph__tag { font-size: clamp(3rem, 7vw, 5.2rem); }
.prem-ph--big .prem-ph__date { font-size: 1.15rem; padding: 7px 14px 6px; }

.flag--prem { background: var(--fiolet); color: var(--biel); }
.card--prem .card__foot { padding-top: 6px; }
.prem-when { margin: 0; padding-top: 10px; border-top: 1px solid var(--linia); font-weight: 700; color: var(--fiolet); }

.prem { border-top: 1px solid var(--linia); margin-top: 34px; }
.listing__main .prem { padding-bottom: 0; }
.listing__main .prem__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* karta produktu */
.prem-pdp .gallery { grid-template-columns: 1fr; }
.prem-box__tag { margin: 0; font: 500 .78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--fiolet); }
.prem-box__date { margin: 4px 0 2px; font: 800 clamp(2rem, 3.6vw, 2.8rem)/1 var(--display); text-transform: uppercase; }
.prem-box__left { margin: 0 0 10px; font: 500 .95rem/1.3 var(--mono); color: var(--tekst-2); }
.prem-box__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.prem-more { margin: 14px 0 0; font-weight: 600; }

@media (max-width: 860px) {
  .listing__main .prem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prem-ph--big .prem-ph__tag { font-size: clamp(2.6rem, 12vw, 4rem); }
}