/* ==========================================================================
   promotion.css — /promotion/ only. Loaded after style.css + responsive.css.
   Colours, the page head, the card face and the buttons come from style.css
   (section 16 "Shared page components"); this file only holds the layout.

   1. Grid + card layout    2. Register CTA stagger    3. Detail dialog    4. Responsive
   ========================================================================== */

/* The page must not scroll behind an open dialog (the stable scrollbar gutter that avoids a width jump is set for every page in style.css). */
html:has(dialog.modal[open]) { overflow: hidden; }

/* 1. Grid + card layout (card face: .promo-card in style.css) ------------------------------- */
.promo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--space-md); }
.promo-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
/* The banners are square and carry text: the box keeps their exact ratio, so nothing is cropped. */
.promo-card__media { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-header); }
.promo-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; padding: 14px; }
.promo-card__title { color: var(--text-main); font-size: 16px; font-weight: 500; line-height: 1.45; }
.promo-card__summary { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.promo-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px; }
.promo-card__actions .btn { padding: 0 10px; }

/* 2. Register CTA: the effect itself is the global .register-cta in style.css.
   Here only a start offset per card, so the cards do not flash in unison. */
.promo-card:nth-child(4n + 2) .register-cta--shine::after { animation-delay: .45s; }
.promo-card:nth-child(4n + 3) .register-cta--shine::after { animation-delay: .9s; }
.promo-card:nth-child(4n + 4) .register-cta--shine::after { animation-delay: 1.35s; }

/* 3. Detail dialog (frame: .modal in style.css) ---------------------------------------------- */
@media (min-width: 600px) { .modal--promo-detail { max-width: min(780px, calc(100vw - 24px)); } }
.modal--promo-detail[open] .modal__panel { animation: promo-in 200ms ease both; }
.modal--promo-detail .modal__panel { overscroll-behavior: contain; }
.modal--promo-detail .modal__close { background: rgba(15, 15, 15, .72); }   /* stays readable over the banner on mobile */
@keyframes promo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.promo-detail { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.promo-detail__media { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.promo-detail__content { display: grid; gap: 12px; min-width: 0; }
.promo-detail__title { padding-right: 40px; color: var(--text-main); font-size: 18px; font-weight: 500; line-height: 1.4; }
.promo-detail__label { color: var(--gold); font-size: 13px; font-weight: 400; letter-spacing: .03em; }
.promo-detail__list { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.promo-detail__list li { position: relative; padding-left: 16px; color: var(--text-main); font-size: 14px; line-height: 1.6; }
.promo-detail__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.promo-detail__note { color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.promo-detail__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 4. Responsive: 4 columns (wide) / 2 / 1 ---------------------------------------------------- */
@media (max-width: 1199px) {
    .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .promo-detail { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .promo-detail__media { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 599px) {
    .promo-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
    .promo-card__actions .btn, .promo-detail__actions .btn { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .modal--promo-detail[open] .modal__panel { animation: none; }
}