/* Base Layout */
.vipac-hero-block { position: relative; }
.vipac-hero { width: 100%; height: calc(100vh - 142px); }
.vipac-hero .swiper-slide { position: relative; overflow: hidden; }
.vipac-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Overlay */
.vipac-hero-overlay {
  position: absolute; inset: 0; display: block; place-content: end; text-align: center;
  padding: 8vh 12vw 5.5vh; color: #fff;
  background: radial-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}
.vipac-hero-overlay h1 { font-size: 3rem; color: #fff; line-height: 1.2; margin: 0 0 1.375rem; opacity: .95; filter: drop-shadow(5.5px 5.5px 2.75px rgba(0, 0, 0, 0.6)); }
.vipac-hero-overlay h2 { font-size: 1.2rem; color: #fff; line-height: 1.2; margin: 0; opacity: .95; filter: drop-shadow(5.5px 5.5px 2.75px rgba(0, 0, 0, 0.6)); font-weight: 400; }
.vipac-hero-btn { display: inline-block; margin: 2.75rem 0 0; padding: 0.6875rem 1.375rem; text-decoration: none; background: #ed1a39; color: #fff;}
.vipac-hero-btn:hover { color: #fff; text-decoration: underline; }

/* Pagination + Arrows */
.vipac-hero .swiper-pagination-bullet { width: 10px; height: 10px; opacity: 0.7; }
.vipac-hero .swiper-pagination-bullet-active { opacity: 1; }
.vipac-hero .swiper-button-prev, .vipac-hero .swiper-button-next { color: #fff; }

/* Hide Arrows when Disabled */
.vipac-hero[data-arrows="false"] .swiper-button-prev,
.vipac-hero[data-arrows="false"] .swiper-button-next { display: none; }

/* Editor Placeholder */
.vipac-hero-placeholder { width: 100%; height: 100%; background: #f3f4f6; display: grid; place-items: center; color: #6b7280; }

/* Slide Form */
.vipac-slide-form-wrap { background: #f8fafc; padding: 12px; border-radius: 10px; }
.vipac-slide-form h1, .vipac-slide-form h3 { margin: 8px 0; }
.vipac-slide-media { margin-bottom: 8px; }
.vipac-urlinput label { display:block; margin: 8px 0 4px; font-size: 12px; color:#475569; }

/* Safe Text Area Grid */
.vipac-safe-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.12) 0 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.12) 0 1px, transparent 1px);
  background-size: 8% 100%, 100% 12.5%;
  mix-blend-mode: overlay;
}