/* =====================================================================
   SHIM-ME Hub — Hero shortcode CSS
   Scoped to #shim-hero (the WPBakery row's el_id).
   Enqueued by the plugin only on pages that render [shim_hero].
   ===================================================================== */

#shim-hero {
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--shim-line);
  background: var(--shim-bg);
  color: var(--shim-text);
}

/* background ornaments */
#shim-hero .shim-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--shim-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--shim-grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 80%);
}
#shim-hero .shim-hero__glow {
  position: absolute;
  right: -10%; top: 10%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, var(--shim-red-glow) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

/* inner grid layout */
#shim-hero .shim-hero__inner {
  position: relative;
  max-width: var(--shim-container);
  margin: 0 auto;
  padding: 0 var(--shim-gutter) 60px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 640px;
}

#shim-hero .shim-hero__title {
  font-family: var(--shim-display);
  font-weight: 900;
  font-size: clamp(54px, 7.2vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 14px 0 24px;
  color: var(--shim-text);
}
#shim-hero .shim-hero__sub {
  font-size: 18px; line-height: 1.6;
  color: var(--shim-text-dim);
  max-width: 56ch;
  margin: 0 0 36px;
}
#shim-hero .shim-hero__cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 56px;
}

/* stats strip */
#shim-hero .shim-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--shim-line);
  padding-top: 28px;
  max-width: 540px;
}
#shim-hero .shim-stat { padding-right: 16px; }
#shim-hero .shim-stat + .shim-stat {
  padding-left: 24px;
  border-left: 1px solid var(--shim-line);
}
#shim-hero .shim-stat__num {
  font-family: var(--shim-display); font-weight: 800;
  font-size: 56px; line-height: 1;
  color: #fff;
}
#shim-hero .shim-stat__num span {
  font-family: var(--shim-mono); font-size: 14px; font-weight: 500;
  color: var(--shim-text-mute);
  margin-left: 4px;
}
#shim-hero .shim-stat__lbl {
  font-family: var(--shim-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--shim-text-mute); margin-top: 10px;
  line-height: 1.4;
}

/* right column — product card */
#shim-hero .shim-hero__right { position: relative; }
#shim-hero .shim-hero__product {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 50%),
    radial-gradient(ellipse at center, rgba(227, 29, 30, 0.18) 0%, transparent 65%),
    var(--shim-bg-2);
  border: 1px solid var(--shim-line);
  padding: 30px 30px 18px;
}
#shim-hero .shim-hero__product-stage {
  position: relative;
  height: 540px;
}
#shim-hero .shim-hero__product-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
#shim-hero .shim-hero__callouts {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#shim-hero .shim-hero__callout-lbl {
  position: absolute;
  font-family: var(--shim-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shim-text-dim);
  min-width: 80px;
}
#shim-hero .shim-cal__k { color: var(--shim-red); font-weight: 600; }
#shim-hero .shim-cal__v { color: #fff; margin-top: 2px; }
#shim-hero .shim-hero__product-foot {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--shim-text-mute);
  text-transform: uppercase; letter-spacing: 0.16em;
  padding-top: 18px; margin-top: 8px;
  border-top: 1px solid var(--shim-line);
}

/* ---------- Note text ------------------------------------------------ */
body #shim-hero .shim-hero__note {
  font-size: 13px !important;
  color: var(--shim-text-mute) !important;
  margin-top: -40px; /* pulls up under the CTA row */
  margin-bottom: 40px;
  max-width: 56ch;
}
body #shim-hero .shim-hero__note a {
  color: var(--shim-red) !important;
  text-decoration: underline;
}

/* ---------- Installation Guide modal --------------------------------- */
body .shim-hero-modal {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 99990;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
body .shim-hero-modal.is-open {
  display: flex !important;
}

.shim-hero-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.shim-hero-modal__box {
  position: relative;
  z-index: 1;
  background: var(--shim-bg-2);
  border: 1px solid var(--shim-line);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shim-hero-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
  background: transparent;
  border: 1px solid var(--shim-line);
  color: var(--shim-text-dim);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  transition: border-color 0.15s, color 0.15s;
}
.shim-hero-modal__close:hover {
  border-color: var(--shim-red);
  color: var(--shim-red);
}

/* video wrapper — replicates setupvideos.com embed snippet */
.shim-hero-modal .sv_iframe {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  width: 100%;
  flex: 1 1 auto;
}
.shim-hero-modal .sv_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* footer row */
.shim-hero-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--shim-line);
  gap: 12px;
  flex-shrink: 0;
}
.shim-hero-modal__dl {
  font-size: 13px !important;
}

/* ---------- Responsive ----------------------------------------------- */
@media (max-width: 1100px) {
  #shim-hero .shim-hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #shim-hero .shim-hero__inner { padding-left: 20px; padding-right: 20px; }
  #shim-hero .shim-hero__stats { grid-template-columns: repeat(3, 1fr); }
  #shim-hero .shim-stat__num   { font-size: 36px; }
  #shim-hero .shim-hero__product-stage { height: 420px; }
  .shim-hero-modal__box { max-height: 95vh; }
  .shim-hero-modal__footer { padding: 10px 14px; }
}