/* BUILD 40 | Finish yellow ribbons and use one smooth hero photo contour.
   No changes to the original LEGO textures, red bricks, logo or page dimensions. */

/* The ribbon remains skewed and its red brick remains outside its left edge.
   Only the upright texture receives a real, rounded clipping container.
   This avoids overflow:hidden on the heading, which would crop that red brick. */
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon::after,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon::after {
  content:none!important;
  display:none!important;
}
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon > .rbh-ribbon-texture-clip,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon > .rbh-ribbon-texture-clip {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  transform:none!important;
  border-radius:inherit!important;
  overflow:hidden!important;
  z-index:0!important;
  pointer-events:none!important;
}
.rbh-ribbon-texture-pattern {
  position:absolute;
  inset:-15px -26px;
  display:block;
  pointer-events:none;
  background:url('/assets/yellow-texture.webp') center / auto 280px repeat;
  transform:skewX(17deg);
  transform-origin:center;
  /* Match the full-strength yellow greebling on the main hero header. */
  opacity:1;
  mix-blend-mode:normal;
}
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon > .rbh-ribbon-label,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon > .rbh-ribbon-label {
  display:inline-block;
  position:relative;
  z-index:3;
  min-width:0;
  /* Preserve the existing inverse-skew of ribbon lettering. */
  transform:skewX(17deg);
}
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon::before,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon::before {
  z-index:2!important;
}

/* One shared rounded parallelogram for every activity, service, event and
   mosaic hero. Multiple short segments approximate smooth curved corners on
   all browsers, including iPhone Safari, without relying on an SVG mask.
   The outer white shape and inset image use the SAME contour. */
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame {
  --rbh-photo-smooth-contour:polygon(
    12.7% 0%,94.2% 0%,
    95.6% .25%,96.8% .85%,97.9% 1.9%,98.6% 3.25%,98.8% 4.9%,
    90.9% 94.9%,
    90.5% 96.45%,89.75% 97.8%,88.5% 98.95%,87.2% 99.7%,85.8% 100%,
    5.1% 100%,
    3.65% 99.75%,2.45% 99.1%,1.4% 98.05%,.8% 96.65%,.65% 95.05%,
    9.05% 5.1%,
    9.5% 3.55%,10.3% 2.1%,11.4% .7%,12.7% 0%
  );
  position:relative!important;
  background:#fff!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  -webkit-clip-path:var(--rbh-photo-smooth-contour)!important;
  clip-path:var(--rbh-photo-smooth-contour)!important;
}
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-play-hero-open {
  position:absolute!important;
  inset:5px!important;
  display:block!important;
  box-sizing:border-box!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:transparent!important;
  -webkit-clip-path:var(--rbh-photo-smooth-contour)!important;
  clip-path:var(--rbh-photo-smooth-contour)!important;
}
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-play-hero-open img {
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
  -webkit-clip-path:none!important;
  clip-path:none!important;
}
/* Retire the competing, sharp-cornered polygon SVG stroke. The 5px inset is
   now the single continuous white border rather than a second outline. */
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-hero-outline {
  display:none!important;
}

/* Build 40 refinement: Safari may paint the clipped inset image right to the
   lower frame edge. Reinstate the continuous lower white stroke at a fixed
   six-pixel thickness. The existing outer rounded contour clips this band
   naturally at the slanted left/right corners. */
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame::after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:6px;
  background:#fff;
  z-index:7;
  pointer-events:none;
}

/* The image needs its own gently rounded inner contour. The earlier identical
   percentage polygon gave the inset photo sharp-looking corners, particularly
   at the lower edge on iPhone Safari. This contour rounds the inner image
   further inside the white frame without changing the outside silhouette. */
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-play-hero-open {
  --rbh-photo-inner-contour:polygon(
    12.8% 0%,94% 0%,
    95.5% .4%,96.7% 1.3%,97.7% 2.7%,98.2% 4.2%,98.35% 6%,
    91.15% 87%,
    90.75% 91.8%,89.6% 95.2%,87.9% 97.6%,85.8% 99.3%,83.5% 100%,
    7.2% 100%,
    5.1% 99.3%,3.3% 97.8%,2% 95.6%,1.35% 92.8%,1.65% 89.4%,
    9% 7%,
    9.4% 4.6%,10.2% 2.5%,11.4% .85%,12.8% 0%
  );
  -webkit-clip-path:var(--rbh-photo-inner-contour)!important;
  clip-path:var(--rbh-photo-inner-contour)!important;
}