/* Weekly giveaway landing page.
 *
 * This file is the whole stylesheet for the page - the site's styles.css is
 * never loaded here (see render.go). That is why it starts from a reset and
 * declares its tokens on :root instead of scoping them to [data-page]: there is
 * nothing to collide with.
 *
 * Measurements come from the Figma board at 393 wide. Below 640 the page scales
 * with the viewport; above it the column is capped so the design does not
 * stretch into a layout it was never drawn for.
 */

/* Self hosted because the Content-Security-Policy is style-src 'self', which
 * rules out the Google Fonts stylesheet. Only the latin subset is shipped - the
 * face is used for digits and a currency symbol. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("DMSans-Black.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2212;
}

:root {
  --gw-page-bg: #f5f5f5;
  --gw-card: #fff;
  --gw-card-radius: 16px;

  --gw-text-strong: rgba(0, 0, 0, .9);
  --gw-text-primary: #1a1a1a;
  --gw-text-secondary: rgba(0, 0, 0, .6);
  --gw-text-muted: #666;

  --gw-orange: #f50;

  --gw-hero-amber: #ffeb99;
  --gw-badge-text: #f40;
  --gw-badge-gradient: linear-gradient(-65.36deg, #ffe370 7.8%, #fff3c2 100%);

  --gw-slot-bg: #f7f7f7;
  --gw-slot-radius: 12px;

  /* Warmed off the page grey so the monogram disc reads as a deliberate plate
   * rather than an unpainted gap. */
  --gw-avatar-bg: #efebe7;
  --gw-avatar-text: rgba(0, 0, 0, .45);

  --gw-featured-gradient: linear-gradient(284deg, #ffe370 0%, #fff3c2 100%);
  --gw-featured-alpha: .3;
  --gw-featured-border: rgba(255, 85, 0, .06);
  --gw-featured-radius: 12px;

  --gw-thumb-radius: 8px;
  --gw-thumb-scrim: rgba(0, 0, 0, .03);

  --gw-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gw-numeric: "DM Sans", var(--gw-sans);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* The countdown block is 265 wide inside 16 of card padding and 8 of card
   * margin: 313. Narrower than 320 and it would overflow. */
  min-width: 320px;
  background: var(--gw-page-bg);
  color: var(--gw-text-primary);
  font-family: var(--gw-sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

.gw-page {
  max-width: 420px;
  margin: 0 auto;
  padding-bottom: 42px;
}

/* ---------- Hero ---------- */

.gw-hero {
  position: relative;
  aspect-ratio: 393 / 238;
  overflow: hidden;
}

/* Four exported layers rather than hand-rolled CSS gradients: the base is a
 * radial, the glow two masked circles and the halo three blurred conic
 * gradients, and approximating that stack in CSS would drift from the board. */
.gw-hero-art { position: absolute; inset: 0; }
.gw-hero-art img { position: absolute; }
.gw-hero-base, .gw-hero-glow { inset: 0; width: 100%; height: 100%; }
.gw-hero-halo { left: 50.2%; top: 9.57%; width: 49.87%; }
.gw-hero-band { left: 0; bottom: 0; width: 100%; height: 26.89%; }

.gw-hero > :not(.gw-hero-art) { position: absolute; z-index: 1; }

.gw-badge {
  left: 4.07%;
  top: 6.72%;
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--gw-badge-gradient);
  color: var(--gw-badge-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.gw-hero-title {
  left: 4.07%;
  top: 18.49%;
  width: 59.3%;
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 28px;
  font-weight: 800;
  /* Two lines, clipped: the title comes from the campaign and a long one would
   * otherwise run under the prize shot. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.gw-hero-subtitle {
  left: 4.07%;
  top: 44.54%;
  width: 53.94%;
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-retail {
  left: 4.07%;
  top: 56.3%;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--gw-hero-amber);
}

.gw-retail-symbol {
  font-family: var(--gw-numeric);
  font-size: 16px;
  line-height: 20px;
  font-weight: 900;
  align-self: flex-start;
}

.gw-retail-amount {
  font-family: var(--gw-numeric);
  font-size: 24px;
  line-height: 24px;
  font-weight: 900;
}

.gw-retail-label { font-size: 14px; line-height: 18px; font-weight: 700; }

.gw-hero-prize {
  left: 62.34%;
  top: 8.82%;
  width: 33.59%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* ---------- Cards ---------- */

.gw-card {
  position: relative;
  margin: 0 8px;
  padding: 0 16px;
  border-radius: var(--gw-card-radius);
  background: var(--gw-card);
}

.gw-card-title {
  margin: 0;
  color: var(--gw-text-strong);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.gw-card-subtitle {
  margin: 0;
  color: var(--gw-text-secondary);
  font-size: 14px;
  line-height: 18px;
}

/* ---------- Draw card ---------- */

.gw-draw {
  /* Overlaps the hero by 64, as drawn. */
  margin-top: -64px;
  padding-top: 14px;
  padding-bottom: 16px;
  text-align: center;
}

.gw-draw .gw-card-title + .gw-card-subtitle { margin-top: 2px; }
.gw-card-subtitle-alone { padding: 12px 0; }

.gw-countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  margin-top: 30px;
}

.gw-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
}

.gw-slot b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--gw-slot-radius);
  background: var(--gw-slot-bg);
  color: var(--gw-text-primary);
  font-family: var(--gw-numeric);
  font-size: 24px;
  line-height: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.gw-slot i {
  margin-top: 6px;
  color: var(--gw-text-secondary);
  font-size: 14px;
  line-height: 18px;
  font-style: normal;
  /* Uppercased here rather than in the markup so a screen reader still reads
   * "Days" instead of spelling it out. */
  text-transform: uppercase;
}

/* The colons sit centred on the 52 tall boxes, not on the whole slot. Their
 * 5 width plus the 7 gaps reproduces the 71 centre-to-centre pitch. */
.gw-colon {
  display: flex;
  align-items: center;
  height: 52px;
  width: 5px;
  color: var(--gw-text-primary);
  font-family: var(--gw-numeric);
  font-size: 24px;
  line-height: 28px;
  font-weight: 900;
}

.gw-cta {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 32px;
  border: 0;
  border-radius: 100px;
  background: var(--gw-orange);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  cursor: pointer;
}

.gw-cta:active { filter: brightness(.94); }

/* ---------- Recent winners ---------- */

.gw-winners {
  margin-top: 8px;
  padding-top: 16px;
  padding-bottom: 24px;
}

/* Two separate sprigs around a flex column, so they track the heading's width
 * as the campaign's schedule line changes length. */
.gw-winners-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.gw-winners-heading { text-align: center; }
.gw-laurel { flex: none; width: 21px; height: 48px; }
.gw-laurel-right { transform: scaleX(-1); }

.gw-featured {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 88px;
  margin-top: 16px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--gw-featured-border);
  border-radius: var(--gw-featured-radius);
}

/* The 30% applies to the gradient, not to the winner's name sitting on it. */
.gw-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gw-featured-gradient);
  opacity: var(--gw-featured-alpha);
}

.gw-featured > * { position: relative; }

.gw-featured-text { flex: 1; min-width: 0; }
.gw-featured-text > p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-featured-text > p + p { margin-top: 4px; }

.gw-featured-badge {
  color: var(--gw-orange);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.gw-featured-name {
  color: var(--gw-text-primary);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.gw-featured-prize {
  color: var(--gw-text-muted);
  font-size: 12px;
  line-height: 16px;
}

.gw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  margin-top: 16px;
}

.gw-row-text { flex: 1; min-width: 0; }
.gw-row-text > p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-row-text > p + p { margin-top: 4px; }

.gw-row-name {
  color: var(--gw-text-primary);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.gw-row-prize {
  color: var(--gw-text-muted);
  font-size: 12px;
  line-height: 16px;
}

.gw-row-date {
  flex: none;
  margin: 0 4px 0 0;
  color: var(--gw-text-muted);
  font-size: 12px;
  line-height: 16px;
}

.gw-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gw-avatar-bg);
  overflow: hidden;
}

.gw-avatar-lg { width: 56px; height: 56px; }
.gw-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Monogram fallback: upstream has never sent an avatar_url, and an empty disc
 * reads as a loading failure rather than as a person. */
.gw-avatar b {
  color: var(--gw-avatar-text);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.gw-avatar-lg b { font-size: 20px; }

/* Product shots are mostly on white, so a plain white plate would dissolve into
 * the card. The scrim is what separates them. */
.gw-thumb {
  position: relative;
  flex: none;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--gw-thumb-radius);
  background: #fff;
  overflow: hidden;
}

.gw-thumb-lg { width: 72px; height: 72px; }
.gw-thumb img { width: 100%; height: 100%; object-fit: cover; }

.gw-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gw-thumb-scrim);
  pointer-events: none;
}

/* ---------- Legal ---------- */

.gw-legal {
  margin: 22px 0 0;
  text-align: center;
  color: var(--gw-text-muted);
  font-size: 14px;
  line-height: 18px;
}

.gw-legal a { color: inherit; text-decoration: none; }
.gw-legal a:hover { text-decoration: underline; }
.gw-legal span { margin: 0 8px; }

/* ---------- Narrow phones ---------- */

@media (max-width: 359px) {
  /* At 320 the hero is 194 tall and two lines of 24 no longer clear the
   * subtitle underneath. */
  .gw-hero-title { font-size: 22px; line-height: 26px; }
}