/* Two art-directed formats; only the original campaign words, no website CTA. */
@font-face {
  font-family: "Montserrat Campaign";
  src: url("/wp-content/plugins/rios-site-release/public/assets/fonts/Montserrat-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

.home-static-hero {
  position: relative;
  padding-top: var(--header-height);
  height: calc(var(--header-height) + var(--page-intro-height));
  background: #255d40;
  display: flex;
  align-items: end;
  justify-content: center;
  /* Clip oversized transparent artwork without creating a focus-scroll container. */
  overflow: clip;
  touch-action: pan-y pinch-zoom;
}

.home-slide { position: absolute; inset: var(--header-height) 0 0; display: flex; align-items: end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.home-slide.is-active { opacity: 1; visibility: visible; }
.home-slide img { user-select: none; -webkit-user-drag: none; }
.home-slide--ceci { background: #386B54; }
.ceci-campaign { position: relative; width: 100%; height: 100%; max-width: calc(var(--page-intro-height) * 3); font-family: "Montserrat Campaign", sans-serif; }
.ceci-campaign__heading { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ceci-campaign__heading > span { position: absolute; left: 0; top: 9%; width: 100%; text-align: center; color: #FCC44D; font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; }
.ceci-campaign__heading h2 { color: #fff; margin: 0; font-size: clamp(60px, 7vw, 104px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.ceci-campaign__word--salsa, .ceci-campaign__word--ceci { position: absolute; top: 53%; transform: translateY(-50%); white-space: nowrap; }
.ceci-campaign__word--salsa { left: 15%; }
.ceci-campaign__word--ceci { right: 15%; }
.ceci-campaign__photo { position: absolute; z-index: 1; width: min(48vw, calc(var(--page-intro-height) * 1.22)); height: auto; left: 50%; top: 53%; transform: translate(-50%, -50%); }
.ceci-campaign__chickpeas { position: absolute; z-index: 2; width: 190px; height: auto; left: calc(50% + 85px); top: 56%; }
.home-carousel-controls { position: absolute; z-index: 3; bottom: 12px; inset-inline: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.home-carousel-controls[hidden] { display: none; }
.home-carousel-controls button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; color: white; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.home-carousel-dot span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: background .2s; }
.home-carousel-dot[aria-pressed="true"] span { background: #FCC44D; }
.home-carousel-controls button:focus-visible { outline: 2px solid #FCC44D; outline-offset: -8px; border-radius: 50%; }
@media (max-width: 800px) {
  .ceci-campaign__heading { inset: 9% 0 auto; text-align: center; }
  .ceci-campaign__heading > span { position: static; font-size: 20px; }
  .ceci-campaign__heading h2 { display: flex; justify-content: center; gap: .2em; font-size: clamp(44px, 8vw, 64px); margin-top: 6px; }
  .ceci-campaign__word--salsa, .ceci-campaign__word--ceci { position: static; transform: none; }
  .ceci-campaign__photo { width: 450px; max-width: 100%; top: 60%; }
  .ceci-campaign__chickpeas { width: 160px; left: calc(50% + 70px); top: 60%; }
  .home-carousel-controls { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-slide, .home-carousel-dot span { transition: none; }
}

.home-campaign { position: relative; width: 100%; height: 100%; }
.home-campaign picture { display: block; height: 100%; }
.home-campaign__desktop-copy { display: none; }

.home-static-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 480px) {
  .ceci-campaign__heading h2 { font-size: clamp(30px, 9vw, 43px); }
  .ceci-campaign__photo { width: 370px; max-width: 105%; top: 61%; }
  .ceci-campaign__chickpeas { width: 130px; left: calc(50% + 45px); top: 60%; }
  .home-campaign, .home-campaign picture { height: 100%; }
  .home-static-hero__photo { height: 100%; object-fit: cover; object-position: center; }
}

@media (min-width: 801px) {
  .home-campaign { max-width: none; height: 100%; container-type: inline-size; }
  .home-campaign picture { height: 100%; }
  .home-static-hero__photo { height: 100%; object-fit: cover; object-position: right bottom; }
  .home-campaign__desktop-copy {
    display: block;
    position: absolute;
    inset: 0;
    color: #fff;
    font-family: "Montserrat Campaign", sans-serif;
    pointer-events: none;
  }
  .home-campaign__heading { position: absolute; left: 5%; top: 24%; }
  .home-campaign__heading > span { display: block; margin-bottom: .9cqw; color: #FCC44D; font-size: 2cqw; font-weight: 800; line-height: 1.1; }
  .home-campaign__heading > strong { display: block; font-size: 5.45cqw; font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
  .home-campaign__flavor { position: absolute; top: 26%; transform: translateX(-50%) rotate(-7deg); font-size: 1.75cqw; font-weight: 750; line-height: 1.2; }
  .home-campaign__flavor--strawberry { left: 47%; }
  .home-campaign__flavor--raspberry { left: 68%; }
  .home-campaign__flavor--peach { left: 88%; }
}

/* Keep all three products visible when a wide banner fills a taller viewport. */
@media (min-width: 801px) and (max-width: 1200px) {
  .home-campaign__heading { top: 6%; }
  .home-campaign__heading > span { font-size: 18px; margin-bottom: 8px; }
  .home-campaign__heading > strong { font-size: clamp(38px, 4.5vw, 54px); }
  .home-campaign__heading > strong br { display: none; }
  .home-campaign__flavor { font-size: 20px; }
  .home-campaign__flavor--strawberry { left: calc(100% - var(--page-intro-height) * 1.59); }
  .home-campaign__flavor--raspberry { left: calc(100% - var(--page-intro-height) * .96); }
  .home-campaign__flavor--peach { left: calc(100% - var(--page-intro-height) * .36); }
}