/* Homepage-only overrides for the Elementor rebuild (post 7899).
   Enqueued conditionally in functions.php — see hipp_enqueue_homepage_assets(). */

/* Hero (variant D, "Foto met grijze overlay"): Elementor's own background_image +
   background_overlay (a left-to-right gradient, dark behind the text, lighter on the right so
   the red lanyards show) give the photo + scrim. This adds the extra red radial glow from the prototype
   on top, and keeps hero text readable over the photo. */
.elementor-element-hero-section {
  position: relative;
}
.elementor-element-hero-section::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 800px 500px at 90% 50%, rgba(227,6,19,.16) 0%, transparent 60%);
}
.elementor-element-hero-section > .elementor-container { position: relative; z-index: 2; }
.elementor-element-hero-desc,
.elementor-element-hero-desc p {
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* Single column on phones: the text runs the full width, so the gradient's light right side
   would sit under it. Flat scrim instead (Elementor's overlay colours aren't responsive). */
@media (max-width: 767px) {
  .elementor-element-hero-section > .elementor-background-overlay {
    background: rgba(29,28,28,.86) !important;
  }
}

/* Everything below in this block exists because Elementor's "shortcode" widget sanitizes
   its stored value at RENDER time (not just on save) — confirmed by comparing intended vs.
   rendered HTML. It strips <svg> tags outright, strips whole declarations built on rgba()
   backgrounds/borders, strips backdrop-filter and box-shadow, strips the CSS `inset`
   shorthand, and mangles font-family values that quote a multi-word name (e.g. 'Hanken
   Grotesk', truncated to just ", sans-serif"). Simple hex-color / unitless declarations
   survive fine. So every non-trivial style for shortcode-widget content lives here instead,
   targeted at stable classes/IDs written into that widget's HTML.
   Ref: hero-eyebrow, hero-sidebar-card, visie-image-card, online-video-panel, testimonials,
   stripe_panel_html() in update-homepage-v4.php. */
.hipp-eyebrow-row span {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.hipp-floating-card {
  box-shadow: 0 24px 50px -30px rgba(29,28,28,.22);
}
.hipp-floating-card div, .hipp-floating-card h3, .hipp-floating-card p {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.hipp-stripe-label {
  background: rgba(255,255,255,.7);
}
.hipp-video-label {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: rgba(255,255,255,.6);
}
.hipp-video-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
}
.hipp-play-btn {
  box-shadow: 0 20px 40px -12px rgba(227,6,19,.45);
}
.hipp-play-triangle {
  display: inline-block;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #fff;
  margin-left: 4px; /* optical centering: a triangle's centroid sits left of its bounding box */
}

/* Button-pair rows (hero + online-cta): built as a 50/50 two-column inner section, but
   two auto-width buttons in even columns leaves a huge empty gap before the second one
   starts — the prototype uses a plain flex row with a 12px gap. Shrink both columns to
   their content width so the buttons sit close together instead. */
.elementor-element-hero-buttons-section > .elementor-container,
.elementor-element-online-buttons-section > .elementor-container {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.elementor-element-hero-btn-col-1, .elementor-element-hero-btn-col-2,
.elementor-element-online-btn-col-1, .elementor-element-online-btn-col-2 {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.elementor-element-hero-btn-col-1, .elementor-element-online-btn-col-1 {
  margin-right: 12px;
}

.hipp-ee-sidebar {
  background: rgba(87,87,86,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px -24px rgba(0,0,0,.6);
}
.hipp-ee-cta {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .15s, border-color .15s;
}
.hipp-ee-cta:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff !important; }
.hipp-ee-sidebar, .hipp-ee-sidebar * {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* "Van idee tot uitvoering" (visie-section): the photo column only has a background (image or
   slideshow, set in Elementor), so it gets its own height here, otherwise it collapses to 0 on
   phones. Rounded photo, room between photo and text, text centred; the transparent CTA button
   lines up with the text. On phones the photo sits above the text with a 10px page gutter. */
.elementor-element-visie-col-right { min-height: 340px; border-radius: 8px; overflow: hidden; }
.elementor-element-visie-col-left > .elementor-widget-wrap { align-content: center; padding: 8px 0 8px 56px !important; }
.elementor-element-visie-cta .elementor-button { padding-left: 0; }
@media (max-width: 1024px) {
  .elementor-element-visie-col-left > .elementor-widget-wrap { padding-left: 32px !important; }
}
@media (max-width: 767px) {
  .elementor-element-visie-section > .elementor-container { padding: 0 10px; }
  .elementor-element-visie-col-right { min-height: 0; aspect-ratio: 4 / 3; margin-bottom: 24px; }
  .elementor-element-visie-col-left > .elementor-widget-wrap { padding: 0 !important; }
}