/*
 * The homepage campaign card, and the dialog it opens. Both classes are built by
 * announcement.js, so a homepage with no live announcement renders exactly as it did
 * before this file existed.
 */

.home-event {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  color: #3a1f02;
  background: linear-gradient(135deg, #ffe391, #f7b636 56%, #ef8a1f);
  box-shadow: 0 10px 24px rgba(240, 138, 30, 0.34), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  animation: home-event-in 260ms ease-out;
}

.home-event-art {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: #dd7a0d;
  background: rgba(255, 253, 244, 0.92);
  box-shadow: 0 4px 10px rgba(120, 62, 0, 0.22);
}

.home-event-art svg {
  width: 20px;
  height: 20px;
}

.home-event-copy {
  flex: 1;
  min-width: 0;
}

.home-event-kicker {
  display: block;
  color: #9a5305;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Two lines is the ceiling: the operator's title is capped at 40 characters, and the
   card is a flow element, so an unusually long one must not push the page around. */
.home-event-title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: #3a1f02;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  /* A two-char orphan ("3.000 / xu") is what an unbalanced break produces here. */
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* The countdown pill rides under the title only while the operator set an end date. */
.home-event-deadline {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fffdf4;
  background: rgba(7, 63, 57, 0.88);
  font-size: 10px;
  font-weight: 900;
}

.home-event-deadline[hidden] {
  display: none;
}

.home-event-cta {
  flex: none;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fffdf4;
  background: #073f39;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.home-event:focus-visible,
.zf-announcement-close:focus-visible,
.zf-announcement-channel:focus-visible {
  outline: 3px solid #073f39;
  outline-offset: 3px;
}

@keyframes home-event-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The narrowest phones give the card about 278px of room, and the call to action takes a
   fixed slice of it, so everything scales down to keep the title inside two lines. */
@media (max-width: 359px) {
  .home-event {
    gap: 10px;
    padding: 8px 10px;
  }

  .home-event-art {
    width: 32px;
    height: 32px;
  }

  .home-event-art svg {
    width: 18px;
    height: 18px;
  }

  .home-event-kicker {
    font-size: 9px;
  }

  .home-event-title {
    font-size: 13px;
  }

  .home-event-cta {
    padding: 8px 11px;
    font-size: 11px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .home-event:hover {
    background: linear-gradient(135deg, #ffeba6, #f9c355 56%, #f39626);
  }

  .zf-announcement-close:hover {
    background: rgba(255, 255, 255, 0.85);
  }

  .zf-announcement-channel:hover {
    filter: brightness(1.08);
  }
}

/* The card is full width on every breakpoint, so the desktop treatment is scale, not
   layout. */
@media (min-width: 768px) {
  .home-event {
    gap: 16px;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 20px;
  }

  /* The shell is up to 1408px wide here, so the art, the copy and the button travel as
     one centred group instead of being pushed to opposite ends. */
  .home-event-copy {
    flex: 0 1 auto;
  }

  .home-event-art {
    width: 40px;
    height: 40px;
  }

  .home-event-art svg {
    width: 22px;
    height: 22px;
  }

  .home-event-kicker {
    font-size: 11px;
  }

  .home-event-title {
    margin-top: 4px;
    font-size: 18px;
  }

  .home-event-cta {
    padding: 12px 22px;
    font-size: 13px;
  }
}

/* Dialog. Warm banner, task card, and two brand buttons: the campaign has to look like a
   game event, not like a form. */
.zf-announcement-overlay {
  position: fixed;
  z-index: 320;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 16, 15, 0.6);
}

.zf-announcement-overlay[hidden] {
  display: none;
}

.zf-announcement-card {
  position: relative;
  width: min(340px, 100%);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  border-radius: 18px;
  background: #fffdf4;
  box-shadow: 0 0 0 4px rgba(247, 209, 103, 0.32), 0 24px 56px rgba(2, 16, 15, 0.5);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  text-align: center;
  animation: zf-announcement-rise 240ms ease-out;
}

@keyframes zf-announcement-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.zf-announcement-banner {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 22px 22px 18px;
  border-radius: 18px 18px 0 0;
  color: #3a1f02;
  background: radial-gradient(125% 145% at 50% 0%, #ffe391, #f7b636 55%, #ef8a1f);
}

.zf-announcement-burst {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 16px rgba(120, 62, 0, 0.25);
}

.zf-announcement-burst svg {
  width: 25px;
  height: 25px;
}

.zf-announcement-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.zf-announcement-body {
  margin: 14px 16px 0;
  padding: 13px 15px;
  border-radius: 12px;
  color: #4a3312;
  background: #fff5e1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  /* The operator writes one step per line; the breaks are the list. */
  white-space: pre-line;
}

/* The end date prints under the steps only while the operator set one. */
.zf-announcement-deadline {
  margin: 12px 16px 0;
  color: #9a5305;
  font-size: 12px;
  font-weight: 800;
}

.zf-announcement-deadline[hidden] {
  display: none;
}

.zf-announcement-channels {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 18px 16px 22px;
}

.zf-announcement-channel {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 50%;
  color: #fffdf4;
  box-shadow: 0 8px 18px rgba(2, 16, 15, 0.24);
}

.zf-announcement-channel svg {
  width: 21px;
  height: 21px;
}

.zf-announcement-channel[data-channel="x"] {
  background: linear-gradient(180deg, #26292f, #0b0d10);
}

.zf-announcement-channel[data-channel="facebook"] {
  background: linear-gradient(180deg, #3d8cff, #1877f2);
}

.zf-announcement-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #6b4a12;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.zf-announcement-close svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .home-event,
  .zf-announcement-card {
    animation: none;
  }
}