/* ============================================================
   PAYGERFIE — V14.10 "Notre Histoire" editorial section
   Replaces the former newsletter block. Premium full-bleed
   storytelling card with a luxe background image, dark overlay,
   editorial typography. Drops in just above the footer.
============================================================ */

.pg-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 13vw, 160px) 24px;
  color: white;
  text-align: center;
  background-color: #0a0a0a;
}

/* Background image: a curated luxe editorial photo. Crop is
   safe for both desktop (16:9-ish) and mobile (centered, no
   loss of the focal area). */
.pg-story-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=85');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 8s ease-out;
}
.pg-story:hover .pg-story-bg { transform: scale(1.05); }

/* Multi-layer overlay for readability + cinematic feel */
.pg-story-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.75) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%);
}

/* Inner container */
.pg-story-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}

.pg-story-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 500;
  color: #d4a575;       /* champagne accent */
  margin-bottom: 22px;
}

.pg-story-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(42px, 7vw, 78px);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin-bottom: 26px;
  color: white;
}

.pg-story-divider {
  width: 56px;
  height: 1px;
  background: rgba(255,255,255,0.4);
  margin: 0 auto 30px;
}

.pg-story-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.75;
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  margin: 0 auto 22px;
  max-width: 640px;
  font-style: italic;
  letter-spacing: 0.2px;
}
.pg-story-text:last-of-type { margin-bottom: 38px; }

.pg-story-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  overflow: hidden;
}
.pg-story-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: white;
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.pg-story-cta:hover {
  color: #0a0a0a;
  border-color: white;
}
.pg-story-cta:hover::before { transform: translateX(0); }

@media (max-width: 768px) {
  .pg-story { padding: 70px 22px; }
  .pg-story-text { font-size: 16.5px; line-height: 1.7; }
  .pg-story-cta { padding: 14px 28px; font-size: 10.5px; letter-spacing: 2.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-story-bg { transition: none; transform: none; }
  .pg-story:hover .pg-story-bg { transform: none; }
}