/* ============================================================
   campaign_hero — Summer of Skills
   FULL REPLACEMENT for pagebuilder/campaign_hero/campaign_hero.css
   Delete everything currently in that file and paste this.

   Restores the settled design (absolute canvas, corner beach
   circle, continuously floating letters) on the new design system:
   every colour a token, no --ch-* vars, no font-family, no literals.

   Architecture: the WRAP is the query container and owns the height.
   Height is a function of WIDTH (--ch-h), and every internal value is
   in cqi (1cqi = 1% of hero width), so the whole composition scales as
   one locked unit at any viewport. Do not mix in cqb: it decouples the
   type from the artwork and shrinks it on a height-capped hero.
   ============================================================ */

.campaign-hero-wrap {
   position: relative;
   /* clears the overhanging logo mark (0 for every brand but UCNL) */
   padding-inline-start: var(--logo-clear);
   width: 100%;
   /* Height is tied to WIDTH so every cqi-based value stays in proportion.
       --ch-h is the one knob: 56.25vw = the original 16:9 canvas,
       48vw = current (shorter, same internal proportions). */
   --ch-h: 48vw;
   height: clamp(30rem, var(--ch-h), 60rem);
   container-type: inline-size;
   container-name: chhero;
}

.campaign-hero {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 0;
   padding: 0;
   margin: 0;
   max-width: none;
   isolation: isolate;
   background: linear-gradient(170deg, var(--sos-teal) 0%, var(--sos-teal-deep) 100%);
}

/* ---- WATER SURFACE ----------------------------------------
   Aerial wave crests sweeping toward the beach corner.
   ---------------------------------------------------------- */
.campaign-hero::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image:
      radial-gradient(ellipse 32% 16% at 26% 36%, rgba(var(--on-dark-rgb), 0.08), transparent 70%),
      radial-gradient(ellipse 26% 12% at 70% 56%, rgba(var(--on-dark-rgb), 0.06), transparent 70%),
      repeating-linear-gradient(135deg,
         transparent 0, transparent 90px,
         rgba(var(--on-dark-rgb), 0.045) 100px,
         rgba(var(--on-dark-rgb), 0.085) 110px,
         rgba(var(--on-dark-rgb), 0.045) 120px,
         transparent 130px, transparent 260px),
      repeating-linear-gradient(127deg,
         transparent 0, transparent 180px,
         rgba(var(--on-dark-rgb), 0.025) 196px,
         rgba(var(--on-dark-rgb), 0.05) 208px,
         rgba(var(--on-dark-rgb), 0.025) 220px,
         transparent 236px, transparent 460px);
   background-size: 200% 100%, 180% 100%, 220% 130%, 280% 150%;
   background-repeat: no-repeat, no-repeat, repeat, repeat;
   mix-blend-mode: screen;
   animation: chSeaSurface 36s ease-in-out infinite;
}

@keyframes chSeaSurface {

   0%,
   100% {
      background-position: 10% 30%, 80% 60%, 0 0, 0 0;
   }

   50% {
      background-position: 14% 28%, 76% 62%, 280px 280px, -360px -360px;
   }
}

/* ---- BEACH -------------------------------------------------
   Large circle pushed into the bottom-right corner, two foam
   bands riding the arc as box-shadow rings.
   ---------------------------------------------------------- */
.campaign-hero__beach {
   --beach-size: 92cqi;
   position: absolute;
   inset: auto auto calc(var(--beach-size) * -0.72) calc(var(--beach-size) * -0.5);
   left: auto;
   right: calc(var(--beach-size) * -0.5);
   bottom: calc(var(--beach-size) * -0.72);
   width: var(--beach-size);
   height: var(--beach-size);
   border-radius: 50%;
   background: var(--sos-gold);
   box-shadow:
      0 0 0 1.4cqi var(--sos-cream),
      0 0 0 3.1cqi var(--sos-sky);
   z-index: 1;
   margin: 0;
   padding: 0;
   pointer-events: none;
}

.campaign-hero__beach::before {
   content: none;
}

/* ---- TYPE -------------------------------------------------- */
.campaign-hero__type {
   position: absolute;
   top: 40%;
   left: 45%;
   transform: translate(-50%, -50%);
   width: 96%;
   margin: 0;
   padding: 0;
   text-align: center;
   z-index: 5;
   pointer-events: none;
}

.campaign-hero .campaign-hero__title {
   display: flex;
   justify-content: center;
   gap: 0.005em;
   font-size: 20cqi;
   font-weight: 900;
   line-height: 0.7;
   letter-spacing: -0.1em;
   text-transform: uppercase;
   color: var(--white);
   text-shadow: 0 0.4cqi 1.2cqi rgba(var(--sos-scrim-rgb), 0.16);
   margin: 0;
   padding: 0;
   max-width: none;
}

.campaign-hero .campaign-hero__title::before,
.campaign-hero .campaign-hero__title::after {
   content: none;
}

.campaign-hero .campaign-hero__subtitle {
   display: block;
   font-size: 8cqi;
   font-weight: 800;
   font-style: normal;
   line-height: 1;
   letter-spacing: -0.03em;
   color: var(--white);
   text-shadow: 0 0.3cqi 0.8cqi rgba(var(--sos-scrim-rgb), 0.16);
   margin: 0.6cqi 0 0 -1em;
   padding: 0;
   max-width: none;
}

/* Continuous gentle bob — each letter on its own delay */
.campaign-hero .campaign-hero__letter,
.campaign-hero .campaign-hero__subletter {
   display: inline-block;
   color: inherit;
   letter-spacing: inherit;
   transform-origin: 50% 60%;
   animation: chLetterBob 5s ease-in-out infinite;
   opacity: 1;
}

@keyframes chLetterBob {

   0%,
   100% {
      transform: translateY(0) rotate(var(--tilt, 0deg));
   }

   50% {
      transform: translateY(-0.5cqi) rotate(calc(var(--tilt, 0deg) * -1));
   }
}

.campaign-hero__letter:nth-child(1) {
   animation-delay: 0s;
   --tilt: -1.2deg;
}

.campaign-hero__letter:nth-child(2) {
   animation-delay: 0.4s;
   --tilt: 0.4deg;
   padding-top: 0.08em;
}

.campaign-hero__letter:nth-child(3) {
   animation-delay: 0.8s;
   --tilt: -0.4deg;
}

.campaign-hero__letter:nth-child(4) {
   animation-delay: 1.2s;
   --tilt: 0.6deg;
   padding-top: 0.11em;
}

.campaign-hero__letter:nth-child(5) {
   animation-delay: 1.6s;
   --tilt: -0.5deg;
}

.campaign-hero__letter:nth-child(6) {
   animation-delay: 2.0s;
   --tilt: 0.8deg;
   padding-top: 0.05em;
}

.campaign-hero__subletter--gap {
   margin-inline-end: 0.32em;
}

.campaign-hero__subletter:nth-child(1) {
   animation-delay: 0.2s;
   --tilt: -1deg;
}

.campaign-hero__subletter:nth-child(2) {
   animation-delay: 0.5s;
   --tilt: 0.6deg;
}

.campaign-hero__subletter:nth-child(3) {
   animation-delay: 0.8s;
   --tilt: -0.5deg;
}

.campaign-hero__subletter:nth-child(4) {
   animation-delay: 1.1s;
   --tilt: 0.7deg;
}

.campaign-hero__subletter:nth-child(5) {
   animation-delay: 1.4s;
   --tilt: -0.6deg;
}

.campaign-hero__subletter:nth-child(6) {
   animation-delay: 1.7s;
   --tilt: 0.8deg;
}

.campaign-hero__subletter:nth-child(7) {
   animation-delay: 2.0s;
   --tilt: -0.5deg;
}

.campaign-hero__subletter:nth-child(8) {
   animation-delay: 2.3s;
   --tilt: 0.6deg;
}

/* ---- FLOATING ELEMENTS ------------------------------------- */
.campaign-hero__el {
   position: absolute;
   margin: 0;
   padding: 0;
   line-height: 0;
   pointer-events: none;
   user-select: none;
}

.campaign-hero .campaign-hero__el img {
   display: block;
   width: 100%;
   height: 100%;
   max-width: none;
   max-height: none;
   min-height: 0;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   object-fit: contain;
   opacity: 1;
}

.campaign-hero__el--hang {
   transform-origin: 50% 0%;
   animation: chSwing 6s ease-in-out infinite;
}

.campaign-hero__el--float {
   animation: chFloatBob 5s ease-in-out infinite;
}

.campaign-hero__el--tilt {
   transform-origin: 50% 50%;
   animation: chMicroTilt 4s ease-in-out infinite;
}

@keyframes chSwing {

   0%,
   100% {
      transform: rotate(-2.5deg);
   }

   50% {
      transform: rotate(2.5deg);
   }
}

@keyframes chFloatBob {

   0%,
   100% {
      transform: translateY(0) rotate(var(--r, 0deg));
   }

   50% {
      transform: translateY(-1cqi) rotate(calc(var(--r, 0deg) + 2deg));
   }
}

@keyframes chMicroTilt {

   0%,
   100% {
      transform: rotate(-2deg);
   }

   50% {
      transform: rotate(2deg);
   }
}

/* Locked positions */
.campaign-hero__el--watermelon {
   top: 9.6%;
   left: 18.8%;
   width: 14%;
   aspect-ratio: 194/150;
   z-index: 4;
   animation-delay: -2s;
   animation-duration: 5.5s;
}

.campaign-hero__el--ring {
   top: 8.4%;
   left: 40.8%;
   width: 15%;
   aspect-ratio: 1;
   z-index: 4;
   animation-delay: -4s;
   animation-duration: 6.5s;
}

.campaign-hero__el--camera {
   top: 13.4%;
   left: 73%;
   width: 9.5%;
   aspect-ratio: 137/105;
   z-index: 6;
   animation-delay: -1s;
   animation-duration: 7s;
}

.campaign-hero__el--starfish {
   top: 39%;
   left: 7%;
   width: 7%;
   aspect-ratio: 1;
   z-index: 6;
   --r: -8deg;
   animation-delay: -1.5s;
}

.campaign-hero__el--glasses {
   top: 42%;
   left: 27%;
   width: 11%;
   aspect-ratio: 160/63;
   z-index: 6;
   --r: -4deg;
}

.campaign-hero__el--crab {
   top: 45%;
   left: 54%;
   width: 7.5%;
   aspect-ratio: 122/76;
   z-index: 6;
   animation-delay: -3s;
}

.campaign-hero__el--lolly {
   top: 35%;
   left: 81%;
   width: 5%;
   aspect-ratio: 96/138;
   z-index: 6;
   --r: 6deg;
   animation-delay: -2.2s;
}

.campaign-hero__el--ball {
   bottom: 21%;
   right: 27%;
   width: 6.5%;
   aspect-ratio: 1;
   z-index: 7;
}

.campaign-hero__el--redstar {
   bottom: 26%;
   right: 17%;
   width: 4.2%;
   aspect-ratio: 1;
   z-index: 7;
}

.campaign-hero__el--flipflops {
   bottom: 4%;
   right: 13%;
   width: 6%;
   aspect-ratio: 76/86;
   z-index: 7;
}

/* ---- CONTENT ----------------------------------------------- */
.campaign-hero__content {
   position: absolute;
   bottom: 6%;
   left: 4%;
   max-width: 46%;
   margin: 0;
   padding: 0;
   text-align: start;
   z-index: 8;
}

.campaign-hero .campaign-hero__date {
   display: inline-block;
   font-size: max(var(--fs-min), 1.3cqi);
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--white);
   background: var(--sos-ink);
   padding: 0.54em 1.08em;
   border-radius: var(--radius-pill);
   margin: 0 0 0.77em;
}

.campaign-hero .campaign-hero__strap {
   font-size: max(var(--fs-min), 2.6cqi);
   font-weight: 600;
   font-style: italic;
   line-height: 1.15;
   color: var(--white);
   text-shadow: 0 0.2cqi 0.6cqi rgba(var(--sos-scrim-rgb), 0.2);
   margin: 0;
   padding: 0;
   max-width: none;
}

.campaign-hero__ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 0.53em;
   margin-top: 0.62em;
   justify-content: flex-start;
}

.campaign-hero .campaign-hero__btn {
   display: inline-flex;
   align-items: center;
   font-size: max(var(--fs-min), 1.5cqi);
   font-weight: 700;
   line-height: 1.3;
   text-decoration: none;
   background-image: none;
   border: 0;
   padding: 0.73em 1.33em;
   border-radius: var(--radius-pill);
   max-width: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.campaign-hero .campaign-hero__btn::before,
.campaign-hero .campaign-hero__btn::after {
   content: none;
   display: none;
}

.campaign-hero .campaign-hero__btn--primary {
   background: var(--sos-ink);
   color: var(--white);
}

.campaign-hero .campaign-hero__btn--lime {
   background: var(--lime);
   color: var(--sos-ink);
}

.campaign-hero .campaign-hero__btn:hover,
.campaign-hero .campaign-hero__btn:focus-visible {
   transform: translateY(-2px);
   box-shadow: 0 8px 22px rgba(var(--sos-scrim-rgb), 0.3);
}

/* ---- TABLET & MOBILE: FLOW REFLOW -------------------------
   Below 1100px the type block and the content stack are taken OUT of
   absolute positioning and laid out in normal flow. Absolute type +
   absolute content cannot guarantee clearance once the CTA label wraps,
   which is what caused the overlap on "of Skills". In flow they stack,
   so the hero grows to fit the copy instead of colliding with it.
   The beach and the floating SVGs stay absolute — artwork unchanged.
   ---------------------------------------------------------- */
@container chhero (max-width: 1100px) {
   .campaign-hero-wrap {
      height: auto;
   }

   .campaign-hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      min-height: 34rem;
      padding: 6cqi 5cqi 7cqi;
      gap: 3cqi;
   }

   /* out of absolute positioning */
   .campaign-hero__type {
      position: static;
      transform: none;
      top: auto;
      left: auto;
      width: 100%;
      text-align: center;
   }

   .campaign-hero__content {
      position: static;
      bottom: auto;
      left: auto;
      max-width: 34rem;
      width: 100%;
   }

   .campaign-hero .campaign-hero__title {
      font-size: min(19cqi, 10rem);
   }

   .campaign-hero .campaign-hero__subtitle {
      font-size: min(7.5cqi, 4rem);
   }

   .campaign-hero .campaign-hero__date {
      font-size: var(--fs-min);
   }

   .campaign-hero .campaign-hero__strap {
      font-size: clamp(var(--fs-min), 4.2cqi, 1.75rem);
   }

   .campaign-hero .campaign-hero__btn {
      font-size: clamp(var(--fs-min), 2.8cqi, 1.25rem);
   }

   /* keep decoration clear of the copy */
   .campaign-hero__el--starfish,
   .campaign-hero__el--redstar,
   .campaign-hero__el--flipflops {
      display: none;
   }

   .campaign-hero__el--watermelon {
      width: 15%;
      left: 12%;
      top: 12%;
   }

   .campaign-hero__el--ring {
      width: 18%;
      left: 42%;
      top: 8%;
   }

   .campaign-hero__el--camera {
      width: 12%;
      left: 79%;
      top: 13%;
   }

   .campaign-hero__el--glasses {
      width: 16%;
      left: 16%;
      top: 34%;
   }

   .campaign-hero__el--crab {
      width: 11%;
      left: 72%;
      top: 36%;
   }

   .campaign-hero__el--lolly {
      width: 6.5%;
      left: 90%;
      top: 26%;
   }

   .campaign-hero__el--ball {
      width: 11%;
      right: 5%;
      bottom: 5%;
   }
}

/* ---- MOBILE ------------------------------------------------ */
@container chhero (max-width: 700px) {
   .campaign-hero {
      min-height: 30rem;
      padding: 9cqi 6cqi 11cqi;
      gap: 4cqi;
   }

   .campaign-hero .campaign-hero__title {
      font-size: 24cqi;
   }

   .campaign-hero .campaign-hero__subtitle {
      font-size: 10cqi;
   }

   .campaign-hero .campaign-hero__strap {
      font-size: clamp(var(--fs-min), 6cqi, 1.5rem);
   }

   .campaign-hero .campaign-hero__btn {
      font-size: clamp(var(--fs-min), 4cqi, 1.2rem);
   }

   /* CTA full width so a long label wraps cleanly instead of ballooning */
   .campaign-hero__ctas {
      width: 100%;
   }

   .campaign-hero .campaign-hero__btn {
      width: 100%;
      justify-content: center;
      text-align: center;
   }

   .campaign-hero__el--glasses,
   .campaign-hero__el--camera {
      display: none;
   }

   .campaign-hero__el--watermelon {
      width: 20%;
      left: 6%;
      top: 10%;
   }

   .campaign-hero__el--ring {
      width: 26%;
      left: 40%;
      top: 5%;
   }

   .campaign-hero__el--crab {
      width: 15%;
      left: 74%;
      top: 30%;
   }

   .campaign-hero__el--lolly {
      width: 9%;
      left: 90%;
      top: 20%;
   }

   .campaign-hero__el--ball {
      width: 15%;
      right: 4%;
      bottom: 3%;
   }
}

/* ---- REDUCED MOTION ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {

   .campaign-hero::after,
   .campaign-hero__letter,
   .campaign-hero__subletter,
   .campaign-hero__el {
      animation: none !important;
   }

   .campaign-hero__letter,
   .campaign-hero__subletter {
      opacity: 1;
      transform: none;
   }
}