/* ==========================================================================
   House of Winners — promotion page

   Two pieces: a static hero image and a card grid. Deliberately no slideshow
   and no announcement bar — the frame has neither, so nothing here pulls in
   .intro-slider or .hw-announce from css/home.css.

   Card content is admin-uploaded: the artwork carries the baked-in
   "WELCOME BONUS 100% UP TO RM888" text, the title row is promotion_name, and
   the description is only ever seen inside the modal. So the card styles have
   to survive artwork of any aspect ratio — see .hw-promo__media.
   ========================================================================== */

.hw-promo{
  background:var(--hw-page-bg,#000);
  padding:0 0 60px;
}

/* --------------------------------------------------------------------------
   Hero
   Full-bleed, not held to the content column: the frame runs it edge to edge
   at 1440. Height is left to the artwork's own ratio rather than fixed, so a
   re-export at a different size doesn't get letterboxed or cropped.
   -------------------------------------------------------------------------- */
.hw-promo__hero{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 40px;
}

.hw-promo__inner{
  width:100%;
  max-width:var(--hw-container);
  margin-inline:auto;
  padding:0 20px;
}

/* --------------------------------------------------------------------------
   Grid
   Three across at the design width. Cards stretch to equal height per row
   (grid default), which matters because promotion names wrap to two lines at
   random and the button rows would otherwise sit at different heights.
   -------------------------------------------------------------------------- */
.hw-promo__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}

.hw-promo__cell{display:flex;}

/* No padding on the card itself: the artwork sits flush against the border on
   three sides. The inset the text rows need is applied to those rows instead —
   .hw-promo__body and .hw-promo__actions below. overflow:hidden is what lets
   the media square off its own corners and still be clipped to the card's
   radius. */
.hw-promo__card{
  display:flex;
  flex-direction:column;
  width:100%;
  background:#0D0D0D;
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:var(--hw-radius,5px);
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   Artwork
   Fills the box edge to edge — no letterbox bands.

   The box ratio is the artwork's own, not the frame's. The live promotions are
   now 386x148, so 386/148 lets each upload fill exactly and lose nothing.
   Holding a fixed ratio (rather than letting each image size itself) is what
   keeps a row of cards level; `cover` centre-crops anything off-ratio instead
   of letterboxing it.

   This was 1000/233, matching the older 1000x233 batch. Left at that, the new
   386x148 art would have been cropped by ~39% of its height — enough to cut
   the "WELCOME BONUS" line off the top and "UP TO RM888" off the bottom, since
   this copy is baked into the image. It also happens to make the card artwork
   taller: 90px -> 148px at the 3-across desktop width.

   If promotion artwork is re-exported at a different shape again, change this
   one ratio to match it — nothing else here depends on the number.
   -------------------------------------------------------------------------- */
.hw-promo__media{
  display:block;
  width:100%;
  aspect-ratio:386 / 148;
  background:#000;
  overflow:hidden;
  cursor:pointer;
}
/* aspect-ratio fallback for older WebKit — same ratio, padding-box trick. */
@supports not (aspect-ratio:1/1){
  .hw-promo__media{height:0;padding-top:38.34%;position:relative;}
  .hw-promo__media img{position:absolute;inset:0;}
}
.hw-promo__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}
.hw-promo__media:hover img{transform:scale(1.03);}
/* Negative offset, not positive: the card clips to its radius, so a ring drawn
   outside the media box would be cut off. */
.hw-promo__media:focus-visible{
  outline:2px solid var(--hw-focus,#FACF5A);
  outline-offset:-2px;
}

/* --------------------------------------------------------------------------
   Title row
   min-height reserves the second line so a one-line and a two-line name give
   the same card height inside a row that has both.
   -------------------------------------------------------------------------- */
.hw-promo__body{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  padding:22px 12px;
}
.hw-promo__title{
  margin:0;
  font-family:var(--hw-font);
  font-size:var(--hw-fs,1.4rem);
  font-weight:700;
  line-height:1.3;
  color:var(--hw-on-surface,#fff);
}

/* --------------------------------------------------------------------------
   Actions
   Equal halves. Both are rendered as links/buttons but sized identically, so
   the pair reads as one control strip regardless of label length or language.
   -------------------------------------------------------------------------- */
.hw-promo__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:0 12px 16px;   /* card has no padding of its own — see .hw-promo__card */
}
.hw-promo__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 10px;
  border-radius:3px;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-btn,1.4rem);
  font-weight:700;
  line-height:1.1;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.hw-promo__btn:focus-visible{
  outline:2px solid var(--hw-focus,#FACF5A);
  outline-offset:2px;
}

/* More Info — outline. Border is the neutral rule, not gold: in the frame the
   gold weight belongs to Join Now alone, and two gold buttons side by side
   would flatten that hierarchy. */
.hw-promo__btn--info{
  appearance:none;
  background:transparent;
  border:1px solid var(--hw-rule,#4D4E4C);
  color:var(--hw-on-surface,#fff);
}
.hw-promo__btn--info:hover,
.hw-promo__btn--info:focus{
  border-color:var(--hw-gold,#FACF5A);
  color:var(--hw-gold,#FACF5A);
  text-decoration:none;
}

/* Join Now — the same gold gradient as the header's Join Now button. */
.hw-promo__btn--join{
  border:0;
  background:var(--hw-gold-gradient);
  color:#000;
}
.hw-promo__btn--join:hover,
.hw-promo__btn--join:focus{
  filter:brightness(1.08);
  color:#000;
  text-decoration:none;
}

.hw-promo__empty{
  margin:40px 0 0;
  font-family:var(--hw-font);
  font-size:var(--hw-fs,1.4rem);
  color:var(--hw-muted,#B3B3B3);
  text-align:center;
}

/* --------------------------------------------------------------------------
   Detail modal
   Markup and the promoAjax handler are unchanged from the old page; only the
   skin is retouched, because the theme's default modal is white-on-white and
   sat badly against the new black page. Scoped to #promo-modal so no other
   modal in the theme is affected.
   -------------------------------------------------------------------------- */
#promo-modal .modal-content{
  background:var(--hw-surface,#121212);
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:var(--hw-radius,5px);
}
#promo-modal .modal-body{padding:30px;}
/* The modal reuses the login/register form shell for markup parity, and
   style.css:14745 gives .form-box a white sheet, a light drop shadow and its
   own 2.2rem/4.4rem padding:
     .form-box{background-color:#fff;padding:2.2rem 2rem 4.4rem;
               box-shadow:0 3px 16px rgba(51,51,51,.1);max-width:575px}
   Inside a dark modal that paints white over everything, and because
   #promo-content forces its text white further down, the copy came out
   white-on-white and vanished. Nothing here is layout — .modal-body above
   already supplies the inset, so the shell just needs to stop drawing. */
#promo-modal .form-box,
#promo-modal .form-tab,
#promo-modal .tab-content,
#promo-modal .tab-pane{
  background:transparent;
  box-shadow:none;
  max-width:none;
  padding:0;
  color:inherit;
}
#promo-modal .close{
  color:var(--hw-muted,#B3B3B3);
  opacity:1;
  text-shadow:none;
}
#promo-modal .close:hover{color:var(--hw-gold,#FACF5A);}
#promo-modal .nav-pills{
  border-bottom:1px solid var(--hw-rule,#4D4E4C);
  margin-bottom:20px;
}
#promo-modal #promo-title{
  margin:0 0 12px;
  padding:0;
  background:transparent;
  font-family:var(--hw-font);
  font-size:1.8rem;
  font-weight:700;
  color:var(--hw-gold,#FACF5A);
  text-transform:none;
}
/* The description is CKEditor output — arbitrary tags, and it commonly carries
   inline colours authored for the old white modal. Forcing colour on the
   descendants is intentional; anything left un-forced renders black on black. */
#promo-modal #promo-content,
#promo-modal #promo-content *{
  color:var(--hw-on-surface,#fff) !important;
  background:transparent !important;
  font-family:var(--hw-font);
}
#promo-modal #promo-content{
  font-size:var(--hw-fs,1.4rem);
  line-height:1.6;
  max-height:60vh;
  overflow-y:auto;
}
#promo-modal #promo-content img{max-width:100%;height:auto;}
#promo-modal #promo-content a,
#promo-modal #promo-content a *{color:var(--hw-gold,#FACF5A) !important;}

/* --------------------------------------------------------------------------
   Responsive
   Card artwork is wide and text-bearing, so it drops to a single column
   earlier than the game grid does — two 4:1 banners side by side on a phone
   makes the baked-in copy unreadable.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hw-promo__grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .hw-promo__hero{margin-bottom:30px;}
}
@media (max-width:680px){
  .hw-promo{padding-bottom:40px;}
  .hw-promo__inner{padding:0 12px;}
  .hw-promo__grid{grid-template-columns:1fr;gap:14px;}
  .hw-promo__body{padding:12px 10px;}
  .hw-promo__actions{gap:8px;padding:0 10px 10px;}
  .hw-promo__btn{font-size:var(--hw-fs-sm,1.2rem);padding:8px 6px;}
  #promo-modal .modal-body{padding:20px;}
}