/* Port layer — DECLARED hand corrections over the ported cascade (10-wp.css). Every rule says what
 * live did with JS or markup that the port does differently, and why. Scoped to pages carrying the
 * site's chrome marker so /admin is untouched. */

/* 1. Device-only Flex elements. Flo printed them as text/template and its JS inserted only the copy
 *    for the current device (desktop ≥768px, mobile ≤767px); the port prints both and hides the other. */
@media only screen and (max-width: 767px) {
  :where(html.sb) [data-sb-device="desktop"] { display: none !important; }
}
@media only screen and (min-width: 768px) {
  :where(html.sb) [data-sb-device="mobile"] { display: none !important; }
}

/* 2. Slideshows (tabs2). slick's fade mode laid every slide in one row and pulled each back over the
 *    first with an inline `left: -n×width`, then faded opacity. The port stacks them in one grid cell
 *    instead (same result, no measured widths); SlideshowRuntime fades opacity as slick did.
 *    `visibleNearby` carousels were a floated row slick translated by one slide per arrow; the port is a
 *    flex row SlideshowRuntime translates the same way (slide width and gap are Flo's own variables). */
:where(html.sb) [data-sb-slideshow="fade"] .flex-element-type-tabs2__slider .slick-track {
  display: grid;
  width: 100%;
  height: 100%;
}
:where(html.sb) [data-sb-slideshow="row"] .flex-element-type-tabs2__slider .slick-track {
  display: flex;
  height: 100%;
  transition: transform var(--slideSpeed, 600ms) ease;
}
:where(html.sb) [data-sb-slideshow="row"] .flex-element-type-tabs2__slider .slick-track > .slick-slide {
  flex: none;
  float: none;
  height: 100%;
}
:where(html.sb) [data-sb-slideshow="fade"] .flex-element-type-tabs2__slider .slick-track > .slick-slide {
  grid-area: 1 / 1;
  float: none;
  width: 100%;
  height: 100%;
}

/* 3. Images. Flo's lazy loader started every Flex image at opacity 0 + blur(5px) and revealed it with
 *    JS once loaded (its `.no-lazy` rule is the revealed state). The port uses the browser's native
 *    lazy loading, so images are simply shown. */
:where(html.sb) .flex-block__element img.flex-img-tag {
  opacity: 1;
  filter: none;
}

/* 4. Instagram strip. Smash Balloon's JS set each `.sbi_photo` to an inline height equal to its width
 *    (square tiles, 231.656px at 1440). The port gets the same square from aspect-ratio. */
:where(html.sb) #sb_instagram .sbi_photo {
  aspect-ratio: 1 / 1;
  height: auto;
}
:where(html.sb) #sb_instagram .sbi_photo img {
  height: 100%;
}

/* 5. Instagram strip on phones. Smash Balloon's JS showed `data-nummobile` (4) posts at its mobile
 *    breakpoint (≤480px) and the full `data-num` (6) above it; the port prints all six and hides the rest. */
@media (max-width: 480px) {
  :where(html.sb) #sb_instagram #sbi_images .sbi_item:nth-child(n + 5) { display: none; }
}