/* home_popups.css — admin-managed home popup ads.
 *
 * Extracted from home.css so BOTH home feeds can style them. The classic
 * feed loads home.css, the personalized feed loads home_personal.css, so
 * rules living in home.css alone left the popup markup rendered but
 * completely UNSTYLED (and effectively invisible) on the personal feed.
 * Pairs with js/home_popups.js — keep the two loaded together.
 */

/* ── Home popup ads (admin-managed) ──
   Flow layout everywhere: side by side on desktop (wrapping into rows),
   stacked one above the other on mobile. The overlay scrolls when the set
   doesn't fit the screen. */
.wg-hpop-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.45);
  overflow-y: auto;
}
.wg-hpop-stack {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch;
  justify-content: center; max-width: 1120px; margin: auto;
}
.wg-hpop-card {
  position: relative; background: #fff; border-radius: 16px; box-shadow: var(--wg-shadow-pop, 0 18px 50px rgba(0,0,0,.25));
  max-width: 285px; width: 100%; padding: 16px 14px 13px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
/* Mobile: one above the other, centred, scrollable when many.
   The stack allows a bit more width than a text card wants so a portrait POSTER
   can scale up (event posters are portrait and read small otherwise); non-media
   text cards are held back to their old 280px so only the posters grow. The
   93vw ceiling keeps even the widest poster clear of the screen edge. */
@media (max-width: 700px) {
  .wg-hpop-stack { flex-direction: column; align-items: center; width: 100%; max-width: min(290px, 92vw); }
  .wg-hpop-card { max-width: 100%; }
  .wg-hpop-card:not(.is-media) { max-width: min(280px, 93vw); }
}
@media (prefers-reduced-motion: no-preference) {
  .wg-hpop-card { animation: wg-hpop-in .28s ease backwards; }
  @keyframes wg-hpop-in { from { opacity: 0; } }
}
.wg-hpop-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1; font-weight: 300;
  color: #2b2b2b;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
  transition: transform .18s var(--wg-ease-spring, cubic-bezier(.34,1.56,.64,1)),
              background .16s var(--wg-ease-out, ease), color .16s, box-shadow .16s;
}
.wg-hpop-x:hover { background: #fff; color: #000; transform: scale(1.1) rotate(90deg); box-shadow: 0 4px 16px rgba(16, 24, 40, 0.24); }
.wg-hpop-x:active { transform: scale(.92); }
.wg-hpop-x:focus-visible { outline: none; box-shadow: var(--wg-focus-ring, 0 0 0 3px rgba(14,175,76,0.22)); }
@media (prefers-reduced-motion: reduce) { .wg-hpop-x { transition: none; } .wg-hpop-x:hover { transform: none; } }
/* The card takes the artwork's shape (class set from the real dimensions in
   home_popups.js). `contain` everywhere: a popup image is a poster, and cropping
   one loses the very information it was made to show. The height caps are in vh
   so a tall poster can never make the card taller than the screen. */
.wg-hpop-img {
  width: 100%; max-height: 145px; object-fit: cover; border-radius: 10px;
  display: block; background: #f4f6f8;
}
.wg-hpop-card.is-landscape .wg-hpop-img { max-height: min(30vh, 190px); object-fit: contain; }
.wg-hpop-card.is-square    .wg-hpop-img { max-height: min(34vh, 250px); object-fit: contain; }
.wg-hpop-card.is-portrait  .wg-hpop-img { max-height: min(46vh, 360px); object-fit: contain; width: auto; max-width: 100%; }
/* Poster-only ads (no title/body): the picture IS the ad, so give it the room.
   Flagged with a class from JS rather than :has(), which would silently do
   nothing on older browsers and leave the poster shrunk for those readers. */
.wg-hpop-card.is-media.is-portrait  .wg-hpop-img { max-height: min(58vh, 460px); }
.wg-hpop-card.is-media.is-square    .wg-hpop-img { max-height: min(44vh, 340px); }
.wg-hpop-card.is-media.is-landscape .wg-hpop-img { max-height: min(38vh, 260px); }
/* A portrait card does not need the full landscape width. Poster-only portraits
   (the event-poster case) are allowed a little wider still, since the picture is
   the whole ad and reads small on a phone otherwise. */
.wg-hpop-card.is-portrait { max-width: 270px; }
.wg-hpop-card.is-media.is-portrait { max-width: min(290px, 92vw); }
.wg-hpop-icon { color: var(--wg-muted); line-height: 0; }
.wg-hpop-title { margin: 0; font-size: 0.98rem; }
.wg-hpop-body { margin: 0; color: var(--wg-muted); font-size: .84rem; line-height: 1.45; }

/* Lucky-draw popup countdown: the same flip-clock the lucky-draw page uses,
   but that clock is built to overlay a dark card image (position:absolute +
   dark gradient + light labels). In the flow-layout popup we drop it into its
   own dark band and un-absolute it, so it reads the same but sits inline. */
.wg-hpop-cd {
  width: 100%; margin: 2px 0 1px;
  display: flex; justify-content: center;
  background: linear-gradient(180deg, #1c2230, #12151c);
  border-radius: 12px; padding: 8px 8px 9px;
}
.wg-hpop-cd .wg-cd-flip { position: static; background: none; padding: 0; pointer-events: auto; }
.wg-hpop-cta { width: auto; padding: 8px 22px; border-radius: 999px; margin-top: 2px; text-decoration: none; }
/* Built-in Find It promo: CTA + browse button share one row, scaled to fit. */
.wg-hpop-btnrow { display: flex; gap: 8px; width: 100%; margin-top: 2px; }
.wg-hpop-btnrow .wg-hpop-cta {
  flex: 1 1 0; min-width: 0; margin-top: 0; padding: 8px 10px;
  font-size: 0.76rem; line-height: 1.25; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.wg-hpop-cta2 {
  border-radius: 999px; border: 1.5px solid var(--wg-color, #0eaf4c);
  color: var(--wg-color-dark, var(--wg-color, #0eaf4c)); background: #fff;
  font-weight: 700; text-decoration: none;
}
.wg-hpop-cta2:hover { background: var(--wg-tint, #f4fbf7); }
.wg-hpop-later {
  background: none; border: none; color: var(--wg-muted); font-size: .78rem;
  text-decoration: underline; cursor: pointer; padding: 2px 4px;
}

/* ── Deck layout ──────────────────────────────────────────────────────────────
   When a row (or column) of cards would run off the screen, they become a
   fanned deck instead: stacked on top of each other, each card behind offset up
   and to the left so a slice of its top and left edge stays visible. Every ad
   therefore stays inside the viewport no matter how many are live. Positions
   come from home_popups.js, which knows how many cards are left. */
.wg-hpop-stack.is-deck {
  display: block; position: relative; flex-wrap: nowrap;
  margin: auto; max-width: 100%;
}
.wg-hpop-stack.is-deck .wg-hpop-card {
  position: absolute; top: 0; left: 0; margin: 0;
  transition: transform .22s var(--wg-ease-out, ease), box-shadow .22s ease;
}
/* Cards behind: dimmed and non-interactive, but tappable to bring forward. */
.wg-hpop-stack.is-deck .wg-hpop-card.is-behind { cursor: pointer; }
.wg-hpop-stack.is-deck .wg-hpop-card.is-behind::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: rgba(15, 23, 42, .28); z-index: 3;
}
.wg-hpop-stack.is-deck .wg-hpop-card.is-behind:hover::after { background: rgba(15, 23, 42, .16); }
/* The X on a buried card would be a trap: tapping it should raise the card. */
.wg-hpop-stack.is-deck .wg-hpop-card.is-behind .wg-hpop-x { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .wg-hpop-stack.is-deck .wg-hpop-card { transition: none; }
}

/* ── 'bg' layout: AI background artwork behind the localized HTML/CSS copy ──
   The image is decorative and text-free by contract (generate_popup_art);
   the scrim keeps white copy legible over any palette. One image serves all
   six languages because the words are never part of the artwork. */
.wg-hpop-card.is-art { position: relative; overflow: hidden; aspect-ratio: 4 / 5; justify-content: flex-end; }
.wg-hpop-card.is-art .wg-hpop-artbg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.wg-hpop-card.is-art .wg-hpop-artscrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 16, 28, .78) 0%, rgba(10, 16, 28, .38) 45%, rgba(10, 16, 28, .05) 75%);
}
.wg-hpop-card.is-art .wg-hpop-title,
.wg-hpop-card.is-art .wg-hpop-body,
.wg-hpop-card.is-art .wg-hpop-cd,
.wg-hpop-card.is-art .wg-hpop-cta,
.wg-hpop-card.is-art .wg-hpop-btnrow,
.wg-hpop-card.is-art .wg-hpop-later { position: relative; z-index: 2; }
.wg-hpop-card.is-art .wg-hpop-title { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.wg-hpop-card.is-art .wg-hpop-body { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.wg-hpop-card.is-art .wg-hpop-later { color: rgba(255, 255, 255, .85); }
.wg-hpop-card.is-art .wg-hpop-x { z-index: 4; background: rgba(15, 23, 42, .45); color: #fff; }