/* ==========================================================
     NOOR HERO (Single Slide)
     - Background video
     - Glass card + CTA
     - Responsive behavior:
       * Desktop: book cover visible, hero taller for wave clearance
       * <=1200px: hide book, center card, force H1 to 2 lines
       * <=768px: smaller hero height + tighter card padding
     ========================================================== */

  /* --------------------------
     1) HERO WRAPPER + HEIGHT
     -------------------------- */
  .hero-scroll {
    position: relative;
    width: 100%;

    /* Extra breathing room so bottom wave doesn’t overlap */
    height: 112vh;
    min-height: 720px;

    overflow: hidden;
  }

  @media (max-width: 768px) {
    .hero-scroll {
      height: 90vh;   /* smaller on mobile */
      min-height: 420px;
    }
  }

  /* --------------------------
     2) BACKGROUND VIDEO LAYER
     -------------------------- */
  .hero-scroll .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* --------------------------
     3) SLIDE LAYOUT (single)
     -------------------------- */
  .hero-scroll .slide {
    position: relative;
    z-index: 2; /* above video */
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* --------------------------
     4) HERO CARD (glass)
     -------------------------- */
  .hero-scroll .hero-card {
    display: inline-block;

    /* Wider on desktop so it doesn't become a tall column */
    max-width: clamp(560px, 46vw, 740px);

    /* Comfortable padding (slightly tighter vertically) */
    padding: 18px 22px;
    border-radius: 16px;

    /* Glass look */
    background: rgba(40, 50, 52, 0.44);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  }

  /* Card typography + spacing */
  .hero-scroll .hero-card h1 {
    margin: 0 0 8px;
  }

  .hero-scroll .hero-card p {
    margin: 0 0 12px;
    line-height: 1.45;
  }

  .hero-scroll .hero-card .cta-group {
    margin-top: 10px;
  }

  /* Slightly tighter card on mobile */
  @media (max-width: 768px) {
    .hero-scroll .hero-card {
      max-width: 100%;
      padding: 16px 16px;
      border-radius: 14px;
    }
  }

  /* --------------------------
     5) HERO IMAGE (book cover)
     -------------------------- */
  .hero-scroll .hero-img {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .hero-scroll .hero-img img {
    /* Bigger + responsive (and wins against theme img rules) */
    width: clamp(320px, 34vw, 520px) !important;
    max-width: none !important;
    height: auto !important;
    display: block;
  }

  /* Utility: hide image on very small screens (extra safety) */
  @media (max-width: 767px) {
    .hide-on-mobile {
      display: none !important;
    }
  }

  /* --------------------------
     6) MID BREAKPOINT RE-LAYOUT
     <=1200px: hide book, center card,
     shrink H1 and force title to 2 lines
     -------------------------- */
  @media (max-width: 1200px) {
    /* Hide the right column (book cover) */
    .hero-scroll .hero-img {
      display: none !important;
    }

    /* Center the content row */
    .hero-scroll .row {
      justify-content: center;
    }

    /* Make the left column span full width */
    .hero-scroll .col-lg-6 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    /* Center the card within the hero */
    .hero-scroll .slide {
      justify-content: center;
    }

    /* Wider centered card */
    .hero-scroll .hero-card {
      max-width: min(860px, 92vw) !important;
      width: 100%;
      margin: 0 auto;
      text-align: center;
    }

    .hero-scroll .hero-card .cta-group {
      justify-content: center;
    }

    /* Smaller H1 at this breakpoint */
    .hero-scroll .hero-card h1 {
      font-size: clamp(44px, 6vw, 64px);
      line-height: 1.05;
      margin-bottom: 14px;
    }

    /* Force 2 lines by constraining the title span */
    .hero-scroll .hero-card h1 span {
      display: block;
      max-width: 10ch; /* adjust 9–12ch to taste */
      margin: 0 auto;
    }
  }