/* ============================================================================
   PAGE TITLE COMPONENT

   Full-width page title banner with gradient background and optional
   screenshot collage effect.

   Purpose: Display page title with decorative background for legal pages,
   feature pages, and other content pages.

   Required HTML Structure:

   <section class="page-title">
     <div class="screenshot-collage">
       <!-- Optional: Background screenshot images -->
       <div class="screenshot-item screen-1">
         <img src="path/to/screenshot.png" alt="">
       </div>
       <div class="screenshot-item screen-2">
         <img src="path/to/screenshot.png" alt="">
       </div>
     </div>
     <div class="auto-container">
       <h1>Your Page Title</h1>
     </div>
   </section>

   Modifiers:
   - .page-title--no-collage    # Hide screenshot collage background

   Notes:
   - Screenshots are optional decorative elements
   - Collage automatically hides on mobile (<600px)
   - Title has gradient text effect
   ============================================================================ */

.page-title {
  background: linear-gradient(
    180deg,
    var(--section-dark) 0%,
    var(--navy-dark) 100%
  ) !important;
  padding: 70px 0 20px;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
  border-bottom: none;
}

.page-title::before {
  content: "";
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(
    180deg,
    var(--section-dark) 0%,
    var(--navy-dark) 100%
  );
  opacity: 0.9;
}

.page-title .container,
.page-title .auto-container {
  position: relative;
  z-index: var(--z-index-content);
}

.page-title h1 {
  text-align: center;
  color: var(--text-primary);
  font-weight: 700;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    var(--light-blue) 50%,
    var(--sky-blue) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ===== Screenshot Collage Background (Optional) ===== */

.page-title .screenshot-collage {
  position: absolute;
  top: -200px;
  left: 0;
  width: 100%;
  height: calc(100% + 200px);
  z-index: var(--z-index-background);
  pointer-events: none;
}

.page-title .screenshot-item {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-title .screenshot-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.08;
  filter: blur(1px);
}

/* Default positioning for 2-screenshot layout */
.page-title .screen-1 {
  width: 500px;
  height: 340px;
  top: 250px;
  left: 5%;
  transform: rotate(-5deg);
}

.page-title .screen-2 {
  width: 450px;
  height: 310px;
  top: 180px;
  right: 10%;
  transform: rotate(3deg);
}


/* ===== Responsive Breakpoints ===== */

@media (max-width: 1400px) {
  .page-title .screen-1 {
    width: 450px;
    height: 300px;
  }

  .page-title .screen-2 {
    width: 400px;
    height: 270px;
  }
}

@media (max-width: 1200px) {
  .page-title .screen-1 {
    width: 400px;
    height: 270px;
    left: 2%;
  }

  .page-title .screen-2 {
    width: 350px;
    height: 240px;
    right: 5%;
  }

  .page-title .screenshot-item img {
    opacity: 0.06;
  }
}

@media (max-width: 1024px) {
  .page-title .screen-1 {
    width: 350px;
    height: 240px;
    top: 200px;
  }

  .page-title .screen-2 {
    width: 300px;
    height: 210px;
    top: 150px;
  }

  .page-title .screenshot-item img {
    opacity: 0.05;
    filter: blur(1.5px);
  }
}

@media (max-width: 768px) {
  .page-title .screen-1 {
    width: 280px;
    height: 190px;
    top: 180px;
    left: -5%;
  }

  .page-title .screen-2 {
    width: 250px;
    height: 170px;
    top: 140px;
    right: -5%;
  }

  .page-title .screenshot-item img {
    opacity: 0.04;
    filter: blur(2px);
  }
}

/* Hide collage on mobile */
@media (max-width: 600px) {
  .page-title .screenshot-collage {
    display: none;
  }
}


/* ===== Modifier: No Collage ===== */

.page-title--no-collage .screenshot-collage {
  display: none;
}