/* Styles for modern store and insurance pages */

/* Hero section with background image */
.hero-modern {
  position: relative;
  /* Default to a self-contained gradient so pages don't depend on 3rd-party images. */
  background-image:
    radial-gradient(1200px circle at 15% 20%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #f1f4f7 0%, #dee5ec 100%);
  background-size: cover;
  background-position: center;
  min-height: clamp(16rem, 38vh, 24rem);
  display: flex;
  align-items: center;
  color: #152638;
}

/* Keep a subtle overlay so background transitions look intentional on all pages. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2));
  z-index: 1;
}

.hero-modern .container {
  position: relative;
  z-index: 2;
}

.hero-modern.text-white,
.hero-modern.text-white h1,
.hero-modern.text-white h2,
.hero-modern.text-white h3,
.hero-modern.text-white p,
.hero-modern .text-white {
  color: #152638 !important;
}

.hero-modern .text-white-50 {
  color: #4b5d6f !important;
  opacity: 1;
}

.hero-modern .btn-outline-light {
  border-color: #889bab;
  color: #203548;
}

.hero-modern .btn-outline-light:hover,
.hero-modern .btn-outline-light:focus {
  border-color: #1f6d9d;
  background: #1f6d9d;
  color: #fff;
}

/* Card styling utility for pages that explicitly opt in. */
.pwp-lift-cards .card.shadow-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pwp-lift-cards .card.shadow-sm:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}