/* ============================================================
   site-v24.css — v1.6.0
   1. Hero image: show full image (no left/right crop)
   2. Pull-quote: tighter gap + premium image styling
   ============================================================ */

/* ── 1. Hero image — fit fully, no cropping ──────────── */
.hero-grid {
  grid-template-columns: 1fr 1.15fr !important;
  gap: clamp(20px, 2.4vw, 36px) !important;
  align-items: center !important;
}
.hero-media-frame {
  aspect-ratio: 16 / 9 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: linear-gradient(135deg, #f5f8ff 0%, #e4ecfb 100%) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 40px -18px rgba(20,33,61,0.20),
              0 6px 18px -8px rgba(79,142,220,0.18) !important;
}
.hero-media-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 10px !important;
  border-radius: 0 !important;
}
.hero-media-badge { left: 16px !important; bottom: 16px !important; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .hero-media-frame { aspect-ratio: 16 / 10 !important; max-width: 100% !important; }
}

/* ── 2. Pull-quote — tighter + premium image ─────────── */
.pull-quote.pull-quote-split { padding: clamp(36px, 4vw, 64px) 0 !important; }
.pq-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(12px, 1.6vw, 24px) !important;
  align-items: center !important;
}
.pq-text blockquote { max-width: 26ch !important; }

/* Premium image frame */
.pq-media { padding: 0 !important; }
.pq-media-frame {
  position: relative;
  max-width: 100% !important;
  width: 100% !important;
  aspect-ratio: 16 / 11 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  isolation: isolate;
  box-shadow:
    0 24px 48px -20px rgba(20,33,61,0.28),
    0 10px 24px -10px rgba(79,142,220,0.22),
    0 0 0 1px rgba(20,33,61,0.04) !important;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.7,.2,1),
              box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.pq-media-frame:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 60px -20px rgba(20,33,61,0.35),
    0 16px 32px -10px rgba(79,142,220,0.28),
    0 0 0 1px rgba(79,142,220,0.25) !important;
}
.pq-media-frame img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 22px !important;
  transition: transform .8s cubic-bezier(.2,.7,.2,1),
              filter .5s ease;
  animation: pq-img-in 1100ms cubic-bezier(.2,.7,.2,1) both !important;
}
.pq-media-frame:hover img {
  transform: scale(1.08) !important;
  filter: saturate(1.1) contrast(1.03) !important;
}

/* Gradient overlay on hover */
.pq-media-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg,
    rgba(79,142,220,0.15) 0%,
    rgba(79,142,220,0) 35%,
    rgba(20,33,61,0) 65%,
    rgba(20,33,61,0.25) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  border-radius: 22px;
}
.pq-media-frame:hover::before { opacity: 1; }

/* Shine sweep */
.pq-media-frame::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  z-index: 3;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.0) 30%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.0) 70%,
    transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
.pq-media-frame:hover::after {
  animation: pq-shine 1.1s ease-out 1;
}
@keyframes pq-shine {
  from { left: -120%; }
  to   { left: 130%; }
}

/* Floating accent dot top-right */
.pq-media-frame .pq-accent {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #66b3ff, #4F8EDC);
  box-shadow: 0 8px 20px -4px rgba(79,142,220,0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  animation: pq-img-in 1200ms cubic-bezier(.2,.7,.2,1) both 300ms,
             pq-accent-bob 4s ease-in-out 1500ms infinite;
}
@keyframes pq-accent-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Blob backdrop — softer */
.pq-blob {
  width: 86% !important; height: 86% !important;
  top: 8% !important; left: 7% !important;
  opacity: 0.35 !important;
  filter: blur(56px) !important;
}

@media (max-width: 880px) {
  .pq-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .pq-media-frame { max-width: 480px !important; margin: 0 auto !important; aspect-ratio: 16 / 11 !important; }
  .pq-text blockquote { max-width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-media-frame, .pq-media-frame img, .pq-media-frame::after, .pq-media-frame .pq-accent { animation: none !important; transition: none !important; }
}