/* Selected distribution composition: panoramic route and clear glass. */
.home-page #red-vitreaux.distribution-glass {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  aspect-ratio: 2.23;
  min-height: 900px;
  padding: 64px 2.4% 155px;
  overflow: hidden;
  background: #e5eff9;
}

.distribution-glass .campaign-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.distribution-glass .campaign-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.distribution-glass .campaign-art::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(120px, 12vw, 220px);
  background: linear-gradient(180deg, #f5f8fd 0%, rgba(245, 248, 253, .94) 16%, rgba(245, 248, 253, .6) 44%, rgba(245, 248, 253, .18) 74%, rgba(245, 248, 253, 0) 100%);
  pointer-events: none;
}

.distribution-glass .campaign-panel {
  position: relative;
  z-index: 1;
  width: 49%;
  padding: 58px 60px 48px;
  border: 2px solid #ffffffdb;
  border-radius: 48px;
  background: rgba(255, 255, 255, .60);
  box-shadow: 0 12px 36px #294d6e12, inset 0 1px 0 #ffffffb3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.distribution-glass .campaign-eyebrow {
  position: relative;
  width: fit-content;
  margin-bottom: 36px;
  padding-bottom: 17px;
  font-size: 1.1rem;
  letter-spacing: .19em;
}

.distribution-glass .campaign-eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(105deg, #0059ff, #c500a8 40%, #00a0ca 74%, #009d75);
}

.distribution-glass h2 {
  font-size: clamp(2.8rem, 4.6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.distribution-glass h2 .rainbow { display: block; }

.distribution-glass .campaign-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 32px 0 36px;
  padding: 0;
}

.distribution-glass .campaign-regions li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 32px;
  background: #fffffff0;
  box-shadow: 0 5px 18px #1837610c;
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

.distribution-glass .region-pin {
  display: block;
  flex: none;
  width: 25px;
  height: 29px;
  color: var(--pin-color);
}

.distribution-glass .campaign-invite {
  max-width: 100%;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.45;
  color: #061d62;
}

.distribution-glass .vitreaux-name { color: #e60000; }

.distribution-glass .campaign-cta {
  min-height: 62px;
  margin-top: 30px;
  padding: 17px 35px;
  font-size: 1.4rem;
}

@media (min-width: 2000px) {
  .distribution-glass .campaign-panel { padding: 70px 78px 60px; }
}

@media (max-width: 999px) {
  .home-page #red-vitreaux.distribution-glass {
    display: block;
    min-height: 0;
    aspect-ratio: auto;
    padding: 0 0 120px;
    background: #e9f2fb;
  }
  .distribution-glass .campaign-art { position: relative; display: block; }
  .distribution-glass .campaign-art img {
    height: auto;
    aspect-ratio: 2.05;
    object-fit: cover;
    object-position: left bottom;
  }
  .distribution-glass .campaign-panel {
    width: calc(100% - 48px);
    margin: -28px auto 0;
    padding: 35px;
    border-radius: 32px;
    background: rgba(255, 255, 255, .74);
  }
  .distribution-glass .campaign-art::after { height: clamp(64px, 12vw, 96px); }
  .distribution-glass h2 { font-size: clamp(2rem, 5.6vw, 3.5rem); }
  .distribution-glass .campaign-eyebrow { font-size: .9rem; margin-bottom: 24px; }
  .distribution-glass .campaign-regions { gap: 10px; margin: 25px 0; }
  .distribution-glass .campaign-regions li { font-size: 1rem; padding: 10px 15px; }
  .distribution-glass .region-pin { width: 20px; height: 24px; }
  .distribution-glass .campaign-invite { font-size: 1.1rem; }
  .distribution-glass .campaign-cta { font-size: 1.1rem; margin-top: 26px; min-height: 52px; }
}

@media (max-width: 550px) {
  .home-page #red-vitreaux.distribution-glass { padding-bottom: 110px; }
  .distribution-glass .campaign-art img { aspect-ratio: 1.6; }
  .distribution-glass .campaign-panel { width: calc(100% - 32px); padding: 27px 23px; border-radius: 27px; }
  .distribution-glass h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .distribution-glass .campaign-regions { gap: 8px; }
  .distribution-glass .campaign-regions li { padding: 9px 12px; font-size: .94rem; }
  .distribution-glass .campaign-invite { font-size: 1.08rem; line-height: 1.6; }
}