/* Campaign artwork only. The original page layout and template remain in style.css. */
.campaign-slide {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 220px;
  aspect-ratio: 916 / 325;
  overflow: hidden;
  background-color: #e8f3ff;
  background-repeat: no-repeat;
  container-type: inline-size;
  font-family: "Prompt", sans-serif;
}
.campaign-slide--beta {
  background-color: #4778b8;
}
.campaign-slide--beta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/artwork/slide-native.webp') center / cover;
  transform: scaleX(-1);
}
.campaign-slide--beta .campaign-slide__copy {
  background: linear-gradient(90deg, #eaf5ff 0%, #eaf5ff 30%, transparent 64%);
}
.campaign-slide--events {
  background-color: #edf8ee;
  background-image: url('../img/campaign-2026/activities-hd.webp');
  background-size: auto 100%;
  background-position: right center;
}
.campaign-slide--friends {
  background-color: #fff1f5;
  background-image: url('../img/artwork/poring-promo.webp');
  background-size: auto 100%;
  background-position: right center;
}
.campaign-slide__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding: 20px 5.5%;
  color: #234b80;
}
.campaign-slide--events .campaign-slide__copy {
  background: linear-gradient(90deg, #edf8ee 0%, #edf8ee 35%, transparent 52%);
}
.campaign-slide--events .campaign-slide__copy > * { max-width: 49%; }
.campaign-slide--friends .campaign-slide__copy {
  background: linear-gradient(90deg, #fff1f5 0%, #fff1f5 28%, transparent 72%);
}
#carouselExampleIndicators .campaign-slide .campaign-logo {
  width: 140px !important;
  max-width: 23%;
  height: auto !important;
  flex-shrink: 0;
  object-fit: contain;
  margin-bottom: 4px;
}
.campaign-eyebrow { font-size: clamp(9px, 1.5cqw, 14px); font-weight: 500; }
.campaign-slide h2 {
  margin: 7px 0;
  font-family: inherit;
  font-size: clamp(20px, 4cqw, 38px);
  line-height: 1.25;
  font-weight: 700;
}
.campaign-slide p { margin: 0; font-size: clamp(10px, 1.7cqw, 16px); }
.campaign-slide .campaign-date { color: #a36720; font-size: clamp(14px, 2.6cqw, 25px); font-weight: 600; }
.campaign-slide--events .campaign-date { margin-top: 14px; }
.campaign-event {
  display: flex;
  flex-direction: column;
  width: 291px;
  max-width: calc(50% - 3px);
  aspect-ratio: 291 / 263;
  overflow: hidden;
  border-radius: 14px;
  background-color: #e8f3ff;
  container-type: inline-size;
  font-family: "Prompt", sans-serif;
}
.hm-events .campaign-event__art {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1586 / 992;
  object-fit: contain;
  border-radius: 0;
  flex-shrink: 0;
}
.hm-events .campaign-event__art:hover { transform: none; }
.campaign-event__copy {
  flex: 1;
  padding: 8px 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #234b80;
  background: #eaf4ff;
  border-top: 2px solid #fff;
}
.campaign-event__copy strong { font-size: clamp(13px, 9cqw, 26px); font-weight: 700; line-height: 1.25; }
.campaign-event__copy span { margin-top: 4px; font-size: clamp(9px, 5.2cqw, 15px); font-weight: 500; }
.campaign-event--activities .campaign-event__copy { color: #347557; background: #edf9ef; }
.campaign-event--activities strong { font-size: clamp(12px, 7.2cqw, 21px); }
.campaign-brand {
  position: relative;
  width: 322px;
  max-width: 100%;
  aspect-ratio: 322 / 181;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.campaign-brand--1 { background-image: url('../img/artwork/rabbit-original.webp'); }
.campaign-brand--2 { background-image: url('../img/img-fin2.png'); }
.campaign-brand--3 { background-image: url('../img/img-fin3.png'); }
.campaign-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff2f6 0%, #fff2f6 40%, transparent 65%);
}
.campaign-brand--2::before { background: linear-gradient(90deg, #fff6e3 0%, #fff6e3 43%, transparent 68%); }
.campaign-brand--3::before { background: linear-gradient(90deg, #edf9e2 0%, #edf9e2 43%, transparent 68%); }
.campaign-brand img {
  position: relative;
  width: 126px;
  height: auto;
  margin: 19px 0 0 12px;
}
.campaign-brand span { position: relative; display: block; margin: 3px 0 0 12px; color: #31537b; font: 500 11px "Prompt", sans-serif; }
.campaign-welcome {
  position: relative;
  aspect-ratio: 5 / 1;
  container-type: inline-size;
  background: #e8f6e8;
}
.hm-banner.campaign-welcome > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.campaign-welcome__copy {
  position: absolute;
  inset: 0 27% 0 29%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #426d4b;
  font-family: "Prompt", sans-serif;
  text-shadow: 0 2px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff;
}
.campaign-welcome__copy h2 {
  font: italic 800 clamp(16px, 4.2cqw, 54px)/1.1 "Prompt", sans-serif;
  margin: 0 0 6px;
  white-space: nowrap;
}
.campaign-welcome__copy p {
  font-size: clamp(8px, 1.2cqw, 16px);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.campaign-welcome__break { display: none; }
@media (max-width: 575.98px) {
  .campaign-slide { min-height: 190px; }
  .campaign-slide__copy { padding-top: 12px; padding-bottom: 28px; }
  #carouselExampleIndicators .campaign-slide .campaign-logo { width: 90px !important; max-width: 26%; }
  .campaign-slide--events { background-size: 55% auto; }
  .campaign-slide--events .campaign-slide__copy { background: linear-gradient(90deg, #edf8ee 0%, #edf8ee 42%, transparent 62%); }
  .campaign-welcome__copy h2 { margin-bottom: 3px; }
  .campaign-welcome__break { display: initial; }
}