/* Rind live layer — minimal. Restores behaviours the removed Strikingly runtime
   provided. Adds NO new layout; only un-hides and un-freezes what the runtime
   would have. Everything else is the original bundle CSS untouched. */

/* 1) reveal — Strikingly hides sections/items until its JS runs */
.s-section,
.s-section .transition,
.transition { opacity: 1 !important; }
[style*="opacity: 0"] { opacity: 1 !important; }

/* 1b) full-screen hero. The first cover section (home) is meant to fill the viewport.
   The bundle only grants 100vh via `.slide.s-only-one-section.first-section-full-height
   .s-section{min-height:100vh}` — but those trigger classes (s-only-one-section,
   first-section-full-height) were added to the <li.slide> by the runtime. Stripped of
   the runtime they're gone, so the cover collapses to content height (a short band).
   Rind's hero is the S6 "block" section (.s6-section); restore the full-screen cover on
   the first visible section (covering both the s-section-full and s6 hero variants). The
   section is already display:flex; align-items:center, so its content stays centred. */
.slide.s-first-visible-section .s-section.s-section-full,
.slide.s-first-visible-section .s-section.s6-section {
  min-height: 100vh !important;
}

/* 2) product-row sections (services / portfolio).
   These are NOT carousels — each product is a 2-column row (image + title/description),
   repeated 3x, with a frozen single-image slick inside each. The saved slick is frozen
   at width:0 and its disabled "Previous/Next" buttons render as broken glyphs.
   Fix: restore the 2-column row layout, drop the frozen slick entirely (killing the
   broken arrows), and show the static duplicate image that sits beside it. */
.ml-slider .s-ecommerce-row-view-wrapper { max-width: 1080px; margin: 0 auto; }
/* CSS Grid (not flex): minmax(0,..) tracks shrink below the image's intrinsic width,
   so the full-size image can't starve the text column (the flexbox min-content trap).
   The bundle floats BOTH .columns children right (`.s-ecommerce-row-view-product .columns
   {float:right}`) — that is the narrow right-strip bug; we neutralise float/width here. */
.ml-slider .s-ecommerce-row-view-product {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 44px !important; align-items: center !important;
  width: 100% !important; max-width: 1080px !important; margin: 0 auto 56px !important; float: none !important;
}
/* neutralise the Skeleton floats/widths on BOTH direct .columns children */
.ml-slider .s-ecommerce-row-view-product > .columns,
.ml-slider .s-ecommerce-row-view-image-package,
.ml-slider .s-ecommerce-row-view-product-detail-panel {
  width: auto !important; max-width: 100% !important; min-width: 0 !important;
  float: none !important; margin: 0 !important; padding: 0 !important;
  display: block !important; position: static !important; text-align: left !important;
}
/* constrain the image so it fills its own track and never overflows the grid */
.ml-slider .s-ecommerce-row-view-product-image-wrapper,
.ml-slider .s-ecommerce-row-view-product-image-wrapper .image-wrapper,
.ml-slider .s-ecommerce-row-view-product-image-wrapper .s-img-wrapper {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important;
}
.ml-slider .s-ecommerce-row-view-product-image-wrapper img {
  width: 100% !important; height: auto !important; display: block !important; border-radius: 4px !important;
}
@media (max-width: 800px) {
  .ml-slider .s-ecommerce-row-view-product { grid-template-columns: 1fr !important; gap: 20px !important; }
}
/* drop the frozen slick (removes the "Previous/Next" arrow glyphs); show static image */
.ml-slider .slider-wrapper { display: none !important; }
.ml-slider .image-wrapper,
.ml-slider .s-img-wrapper { display: block !important; width: 100% !important; }
.ml-slider .image-wrapper img,
.ml-slider .s-img-wrapper img {
  width: 100% !important; height: auto !important; display: block !important;
  border-radius: 4px !important;
}
/* safety: if any slick survives elsewhere, neutralise its arrows/dots and freeze-width */
.ml-slider .slick-arrow, .ml-slider .slick-dots { display: none !important; }
.slick-slide[style*="width: 0"] { width: auto !important; }

/* 2b) blog section (services) — grid of post cards. The runtime sized the thumbnail
   avatars; without it the .s-blog-avatar divs have no height so their background
   images collapse. Restore a card grid and give avatars a real aspect box. */
.s-blog-posts-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important; float: none !important;
}
/* .s-blog-posts-columns also carries .clearfix, whose ::before/::after have
   content+display:block — in a grid they become phantom items (the empty first
   cell that shifts the posts over). Remove them. */
.s-blog-posts-columns::before,
.s-blog-posts-columns::after { display: none !important; content: none !important; }
.s-blog-posts-columns .s-blog-entry {
  width: auto !important; float: none !important; margin: 0 !important; min-width: 0 !important;
}
.s-blog-posts-columns .s-blog-entry-inner { display: block !important; }
.s-blog-posts-columns .s-blog-entry-left,
.s-blog-posts-columns .s-blog-avatar-container { width: 100% !important; float: none !important; margin: 0 !important; }
.s-blog-posts-columns .s-blog-avatar {
  display: block !important; width: 100% !important;
  aspect-ratio: 16 / 10 !important; min-height: 190px;
  background-size: cover !important; background-position: center !important;
  background-repeat: no-repeat !important; border-radius: 6px !important;
}
.s-blog-posts-columns .s-blog-entry-right { width: auto !important; float: none !important; padding: 14px 2px 0 !important; }
@media (max-width: 800px) { .s-blog-posts-columns { grid-template-columns: 1fr !important; } }

/* 2d) portfolio tiled gallery (.s-new-gallery) — the runtime normally (a) toggled
   desktop/mobile blocks, (b) sized each tiled item to an aspect box and painted the
   photo as a background-image on the absolutely-positioned .image-wrapper, with the
   real <img> hidden (.image-wrapper img{display:none}). Without the runtime BOTH the
   desktop and mobile blocks render (dupes), every .image-wrapper is an empty 0-height
   absolute box, and the two columns stack full-width. Result: an empty gallery.
   Fix: drop the mobile dupe, lay the two columns 2-up, and un-hide the <img> so the
   photo flows and gives the item real height. */
.s-new-gallery .s-new-gallery-tiled-mobile { display: none !important; }
.s-new-gallery .s-new-gallery-tiled-desktop { display: block !important; }
.s-new-gallery-content .s-new-gallery-tiled-columns.two {
  width: 50% !important; box-sizing: border-box !important; padding: 0 5px !important;
}
.s-new-gallery-content .s-new-gallery-item .image-wrapper {
  position: static !important; height: auto !important; width: 100% !important;
}
.s-new-gallery-content .s-new-gallery-item .image-wrapper img,
.s-new-gallery-content .s-new-gallery-item .s-img-wrapper img {
  display: block !important; width: 100% !important; height: auto !important;
  border-radius: 4px !important;
}
.s-new-gallery-content .s-new-gallery-item .s-img-wrapper { display: block !important; width: 100% !important; }
@media (max-width: 800px) {
  .s-new-gallery-content .s-new-gallery-tiled-columns.two { width: 100% !important; float: none !important; }
}

/* 2d-grid) Rind's portfolio uses the GRID gallery variant (.s-new-gallery-grid-item),
   not the tiled one above. Each item's 2-column masonry position was painted by a
   runtime-injected per-item emotion scope (css-2fl5bq, css-cax6ar, …); those scopes are
   undefined once the runtime is stripped, so every .s-new-gallery-grid-item falls back to
   the bundle's width:100% and the whole gallery stacks in a single column. Lay the `.two`
   items out as a real full-bleed 2-column grid (matching the original edge-to-edge look). */
.s-new-gallery-content:has(.s-new-gallery-grid-item.two) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important; font-size: 0 !important;
}
.s-new-gallery-content .s-new-gallery-grid-item.two {
  width: auto !important; display: block !important; float: none !important;
  margin: 0 !important; vertical-align: top !important;
}
.s-new-gallery-content .s-new-gallery-grid-item .s-component,
.s-new-gallery-content .s-new-gallery-grid-item .s-component-content,
.s-new-gallery-content .s-new-gallery-grid-item .item { display: block !important; height: 100% !important; }
.s-new-gallery-content .s-new-gallery-grid-item img {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 0 !important;
}
@media (max-width: 800px) {
  .s-new-gallery-content:has(.s-new-gallery-grid-item.two) { grid-template-columns: 1fr !important; }
}

/* 2e) contact.html map — the transform (step 6c) replaces the dead #s-map placeholder
   with a static Google-Maps embed iframe. Keep the map column visible and make the
   #s-map box + its iframe fill the reserved height so the map renders in place, exactly
   where the original placed it (between the form and the contact-info). */
.s-contact-section-columns .s-google-maps-column { display: block !important; }
#s-map {
  visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
  min-height: 246px !important; overflow: hidden !important;
}
#s-map .s-map-blur-layer, #s-map .fill-spinner-wrapper { display: none !important; }
#s-map iframe { display: block !important; width: 100% !important; height: 100% !important; min-height: 246px !important; border: 0 !important; }

/* 2c) navbar styling — NONE. Rind's navbar is natively dark (#0d0d0e background,
   white text via s-bg-light-text). That background is defined in the embedded
   emotion scope '.css-y5wxnt.s-nav.navigator .s-navbar-desktop{background:#0d0d0e}',
   which we keep intact, so the dark bar renders correctly with no override. We must
   NOT flip it to white, and NOT add an ml-scrolled solid-white state (Rind's navbar
   is the 'normal' non-sticky variant and stays dark). Both overrides are omitted here. */

/* 4) mobile menu toggle (hamburger) — shown open when we add .ml-open */
.s-uncollapsed-nav.ml-open { display: block !important; }

/* 5) Dark-section text colour. Rind's sub-pages (About/Articles/Events/Shop) use
   Strikingly's runtime "new-text-color-logic": on an s-bg-dark section the runtime
   paints titles and body text light. That runtime is stripped in the fork, so text
   falls back to the theme's default dark grey (#4b5056) and is nearly invisible on
   the dark background. Restore light text on every dark section (light home page
   sections are s-bg-light / s-no-bg and are untouched). */
.s-section.s-bg-dark .s-font-title,
.s-section.s-bg-dark .s-font-body,
.s-section.s-bg-dark .s-item-title,
.s-section.s-bg-dark .s-item-text,
.s-section.s-bg-dark .s-rich-text-content,
.s-section.s-bg-dark h1, .s-section.s-bg-dark h2, .s-section.s-bg-dark h3,
.s-section.s-bg-dark h4, .s-section.s-bg-dark p, .s-section.s-bg-dark li,
.s-section.s-bg-dark .s-text-color-default { color: #fff !important; }
/* secondary text (prices / subtitles) stays legible but slightly dimmed */
.s-section.s-bg-dark .s-item-subtitle,
.s-section.s-bg-dark .s-ecommerce-row-view-product-pricing { color: rgba(255,255,255,.75) !important; }