/* ==========================================================================
   promotion.css — /promotion/ only (the list and its detail dialog).
   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. List: one card per row    2. Detail dialog    3. 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. List: one card per row (card face: .promo-card in style.css) --------------------------- */
.promo-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-md); }
.promo-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
/* The banners are wide (2172 x 724) and carry text: full width, height from the picture's own ratio. Nothing is cropped or stretched. */
.promo-card__media { display: block; width: 100%; height: auto; aspect-ratio: 2172 / 724; object-fit: contain; }
.promo-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; border-top: 1px solid var(--border); }
.promo-card__title { color: var(--logo-gold-light); font-size: 20px; font-weight: 500; line-height: 1.45; }
.promo-card__summary { max-width: 820px; color: var(--text-body); font-size: 15px; line-height: 1.7; }
.promo-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.promo-card__actions .btn { min-width: 180px; height: 44px; padding: 0 18px; }

/* 2. Detail dialog: one <dialog> for every promotion (frame: .modal in style.css, content: promotion.js) --- */
.promo-card__detail[hidden] { display: none; }
.modal--promo-detail { width: min(92vw, 900px); max-width: 900px; max-height: 88vh; }
.modal--promo-detail::backdrop { background: rgba(0, 10, 7, .72); animation: promo-fade 180ms ease-out both; }
.modal--promo-detail .modal__panel {
    display: block; max-height: 88vh; padding: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid rgba(250, 226, 113, .22); border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 26px rgba(63, 214, 148, .07);
}
.modal--promo-detail[open] .modal__panel { animation: promo-in 200ms ease-out both; }
@keyframes promo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes promo-fade { from { opacity: 0; } to { opacity: 1; } }
/* the X stays in the corner while the content scrolls, readable over the banner */
.modal--promo-detail .modal__close {
    position: sticky; top: 10px; float: right; margin: 10px 10px -46px 0;
    width: 36px; height: 36px; border: 1px solid rgba(250, 226, 113, .3); border-radius: 50%;
    background: rgba(3, 22, 17, .88); color: var(--text-strong);
}
.modal--promo-detail .modal__close:hover { background: var(--bg-active); }
.promo-detail__media { display: block; width: 100%; height: auto; aspect-ratio: 2172 / 724; object-fit: contain; border: 0; border-radius: 0; }
.promo-detail__content { padding: 18px 24px 24px; border-top: 1px solid var(--border); }
.promo-detail__label { padding-left: 9px; border-left: 3px solid var(--logo-green-light); color: var(--text-muted); font-size: 11px; line-height: 1.25; letter-spacing: .08em; }
.promo-detail__title { margin-top: 10px; color: var(--logo-gold-light); font-size: 24px; font-weight: 600; line-height: 1.4; text-wrap: balance; outline: 0; }
.promo-detail__text { display: grid; gap: 12px; margin-top: 12px; color: var(--text-primary); font-size: 16px; line-height: 1.8; }
.promo-detail__text ul { display: grid; gap: 6px; list-style: none; }
.promo-detail__text li { position: relative; padding-left: 18px; }
.promo-detail__text li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: var(--logo-gold-main); }
/* conditions / remarks */
.promo-detail__text .promo-note { padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--logo-gold-main); border-radius: var(--radius-md); background: var(--bg-raised); color: var(--text-body); font-size: 15px; }
.promo-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.promo-detail__actions .btn { min-width: 180px; height: 44px; padding: 0 18px; }

/* 3. Responsive: always one column; on a phone the two buttons share the row ------------------- */
@media (max-width: 599px) {
    .promo-list { gap: 14px; margin-top: 14px; }
    .promo-card__body { padding: 12px 14px 14px; }
    .promo-card__title { font-size: 17px; }
    .promo-card__summary { font-size: 14px; }
    .promo-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .promo-card__actions .btn { min-width: 0; padding: 0 8px; }
    .modal--promo-detail { width: calc(100% - 24px); max-height: 90vh; margin: auto; }      /* centred, not the bottom sheet of the other dialogs */
    .modal--promo-detail .modal__panel { max-height: 90vh; }
    .promo-detail__content { padding: 16px 16px 18px; }
    .promo-detail__title { font-size: 20px; }
    .promo-detail__text { font-size: 15px; }
    .promo-detail__text .promo-note { font-size: 14px; }
    .promo-detail__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .promo-detail__actions .btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .modal--promo-detail[open] .modal__panel, .modal--promo-detail::backdrop { animation: none; }
}