/* =============================================================================
   HERO.CSS — Split Hero Section (v1.0.12 redesign)
   Hello Elementor Child Theme

   Structure:
     .hec-hero                (dark gradient: black → #320707)
       .hec-hero__overlay     (radial amber glows @ 30% opacity)
       .hec-hero__content     (flex row, site max width)
         .hec-hero__text      (60% — category badge + auto-fitted title)
         .hec-hero__media     (40% — featured image/video/gif in a
                               neon-outlined frame; hero-media.js injects
                               video/gif)

   Design intent:
     - The featured media is a framed exhibit beside the title, not an
       enlarged background. Title (left, 60%) and media (right, 40%)
       sit side by side within the hero height.
     - Background is always the same dark gradient regardless of theme,
       with two soft radial amber glows (30% opacity) for depth.
     - Title font size starts at the fluid clamp() maximum and is stepped
       down by initHeroTitleFit() (main.js) until the whole text fits the
       available column height.
     - ≤768px the row stacks: title first, media below (see §9).
   ============================================================================= */


/* =============================================================================
   1. HERO ROOT
   ============================================================================= */

   /*
    * v1.0.12 HERO REDESIGN — split layout.
    * The featured image is no longer an enlarged full-bleed background.
    * Background: linear gradient black → #320707 (--hec-brand-maroon-deep)
    * with radial amber glows at 30% opacity (overlay layer).
    * Content: text column (60%) + neon-framed media column (40%).
    */
   .hec-hero {
    position:         relative;
    width:            100%;
    height:           var(--hec-hero-height);
    min-height:       var(--hec-hero-min-height);
    overflow:         hidden;
    display:          flex;
    align-items:      stretch;

    /* Dark base gradient — pure black into deep maroon #320707. */
    background:       linear-gradient(
                        135deg,
                        var(--hec-black)             0%,
                        #1a0404                     55%,
                        var(--hec-brand-maroon-deep) 100%
                      );

    /*
     * Isolation creates a new stacking context.
     * This prevents z-index from leaking to/from Elementor's header.
     */
    isolation:        isolate;
    /* will-change:transform removed in v1.0.12 — no parallax bg anymore,
       and it created a containing block that trapped fixed children. */
  }


  /* =============================================================================
     2. RADIAL GLOW OVERLAY
     Decorative amber glows at 30% opacity over the dark gradient.
     One large glow biased toward the media column, one faint echo
     bottom-left under the title. Never intercepts pointer events.
     ============================================================================= */

  .hec-hero__overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;

    background:
      radial-gradient(
        ellipse 55% 70% at 78% 45%,
        rgba(209, 106, 11, 0.30) 0%,
        rgba(209, 106, 11, 0.00) 65%
      ),
      radial-gradient(
        ellipse 45% 55% at 12% 88%,
        rgba(114, 36, 16, 0.30) 0%,
        rgba(114, 36, 16, 0.00) 70%
      );

    pointer-events: none;
  }


  /* =============================================================================
     3. HERO CONTENT — flex row: text (60%) | media (40%)
     ============================================================================= */

  .hec-hero__content {
    position:      relative;
    z-index:       2;
    width:         100%;
    /* v1.0.13: hard-bind the row to the hero's fixed height so the text
       column is genuinely bounded — the flex auto-minimum was letting the
       content grow taller than the hero and defeat both the CSS cap and
       the JS fitter's overflow measurement. */
    height:        100%;
    max-height:    100%;
    min-height:    0;
    max-width:     var(--hec-site-max-width);
    margin:        0 auto;
    padding:       var(--hec-space-8) var(--hec-article-side-padding);

    display:       flex;
    flex-direction: row;
    align-items:   center;
    gap:           var(--hec-space-8);
  }

  /* TEXT COLUMN — 60% of the available width, bounded by hero height. */
  .hec-hero__text {
    flex:           0 0 60%;
    min-width:      0;
    height:         100%;   /* v1.0.13: explicit — was max-height + stretch */
    max-height:     100%;
    min-height:     0;

    display:        flex;
    flex-direction: column;
    justify-content: center;
    align-items:    flex-start;
    gap:            var(--hec-space-4);
    overflow:       hidden; /* fitter's overflow measurement needs a real bound */
  }

  /* No-media variant — text takes the full row. */
  .hec-hero--no-media .hec-hero__text {
    flex-basis: 100%;
  }

  /* MEDIA COLUMN — 40% of the available width, neon-outlined frame. */
  .hec-hero__media {
    flex:           1 1 40%;
    min-width:      0;
    align-self:     center;
    max-height:     calc(var(--hec-hero-height) - (2 * var(--hec-space-8)));

    position:       relative;
    border-radius:  var(--hec-radius-lg);
    overflow:       hidden;

    /* Neon outline — thin gold line + layered amber/gold glow. */
    border:         1px solid rgba(255, 191, 0, 0.65);
    box-shadow:
      0 0 8px  rgba(255, 191, 0, 0.55),
      0 0 24px rgba(209, 106, 11, 0.45),
      0 0 56px rgba(255, 191, 0, 0.22),
      inset 0 0 14px rgba(255, 191, 0, 0.12);
  }

  .hec-hero__media img,
  .hec-hero__media video {
    display:    block;
    width:      100%;
    height:     100%;
    max-height: calc(var(--hec-hero-height) - (2 * var(--hec-space-8)));
    object-fit: cover;
    object-position: center center;
  }
  
  
  /* =============================================================================
     5. DARK MODE TOGGLE — positioned in hero
     ============================================================================= */
  
  /*
   * Toggle uses two themable CSS variables so the same rules render
   * a light pill in light mode and a dark pill in dark mode without
   * duplicating the whole declaration block. Defaults below match
   * light mode; the [data-theme="dark"] block overrides them.
   */
  .hec-dark-mode-toggle {
    /* Themable surface */
    --hec-toggle-fill-1:    rgba(255, 250, 243, 0.78);
    --hec-toggle-fill-2:    rgba(255, 250, 243, 0.62);
    --hec-toggle-sheen:     rgba(255, 255, 255, 0.45);
    --hec-toggle-text:      #2a1a0a;
    --hec-toggle-border:    rgba(209, 106, 11, 0.40);
    --hec-toggle-border-hv: rgba(209, 106, 11, 0.75);
    --hec-toggle-shadow-1:  rgba(0, 0, 0, 0.18);
    --hec-toggle-shadow-2:  rgba(209, 106, 11, 0.18);
    --hec-toggle-shadow-hv: rgba(209, 106, 11, 0.35);
    --hec-toggle-icon:      var(--hec-brand-amber);
    --hec-toggle-icon-hv:   var(--hec-brand-amber-dark);
    --hec-toggle-halo:      rgba(255, 191, 0, 0.22);
  
    /*
     * FIX M1 (v1.0.12): offset below the Elementor sticky header so the
     * toggle no longer overlaps the "Book a demo" CTA in the top-right
     * corner. Tune --hec-fixed-header-offset to match the live header
     * height if it changes.
     */
    --hec-fixed-header-offset: 96px;

    position:         fixed;
    top:              var(--hec-fixed-header-offset);
    right:            var(--hec-space-6);
    z-index:          var(--hec-z-dark-toggle);
  
    display:          inline-flex;
    align-items:      center;
    gap:              var(--hec-space-2);
  
    padding:          10px 18px;
    border-radius:    16px!important;
  
    /* Two-layer fill: soft sheen + main surface. */
    background:
      linear-gradient(
        180deg,
        var(--hec-toggle-sheen) 0%,
        rgba(255, 255, 255, 0.00) 55%
      ),
      linear-gradient(
        135deg,
        var(--hec-toggle-fill-1) 0%,
        var(--hec-toggle-fill-2) 100%
      );
    color:            var(--hec-toggle-text);
  
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
  
    border:           1px solid var(--hec-toggle-border);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.35) inset,
      0 0 0 1px rgba(0, 0, 0, 0.04),
      0 10px 24px var(--hec-toggle-shadow-1),
      0 0 22px var(--hec-toggle-shadow-2);
  
    font-family:      var(--hec-font-ui);
    font-size:        11px;
    font-weight:      var(--hec-weight-semibold);
    letter-spacing:   0.10em;
    text-transform:   uppercase;
    line-height:      1;
  
    cursor:           pointer;
    appearance:       none;
    -webkit-appearance: none;
    outline:          none;
  
    transition:
      transform    220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow   220ms ease,
      border-color 220ms ease,
      background   220ms ease,
      color        220ms ease;
  }
  
  .hec-dark-mode-toggle:hover {
    transform:    translateY(-1px);
    border-color: var(--hec-toggle-border-hv);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.40) inset,
      0 0 0 1px rgba(0, 0, 0, 0.05),
      0 14px 28px var(--hec-toggle-shadow-1),
      0 0 28px var(--hec-toggle-shadow-hv);
  }
  
  .hec-dark-mode-toggle:focus-visible {
    border-color: var(--hec-brand-amber);
    box-shadow:
      0 0 0 3px rgba(209, 106, 11, 0.30),
      0 14px 28px var(--hec-toggle-shadow-1);
  }
  
  .hec-dark-mode-toggle:active {
    transform: translateY(0) scale(0.98);
  }
  
  /* Icon disc — small halo around the sun/moon. */
  .hec-dark-mode-toggle__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    flex-shrink:     0;
    border-radius:   50%;
    background:      radial-gradient(
                       circle at 30% 30%,
                       var(--hec-toggle-halo) 0%,
                       rgba(255, 255, 255, 0.00) 70%
                     );
    color:           var(--hec-toggle-icon);
    transition:      transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
                     color    220ms ease,
                     filter   220ms ease;
  }
  
  .hec-dark-mode-toggle__icon svg {
    width:  16px;
    height: 16px;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
  }
  
  .hec-dark-mode-toggle:hover .hec-dark-mode-toggle__icon {
    transform: rotate(-18deg) scale(1.08);
    color:     var(--hec-toggle-icon-hv);
    filter:    drop-shadow(0 0 8px var(--hec-toggle-halo));
  }
  
  .hec-dark-mode-toggle__label {
    font-size:      11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space:    nowrap;
    color:          inherit;
  }
  
  /* DARK MODE — override the themable variables only. */
  [data-theme="dark"] .hec-dark-mode-toggle {
    --hec-toggle-fill-1:    rgba(22, 17, 11, 0.92);
    --hec-toggle-fill-2:    rgba(10, 6, 2, 0.92);
    --hec-toggle-sheen:     rgba(255, 255, 255, 0.06);
    --hec-toggle-text:      #f5ede0;
    --hec-toggle-border:    rgba(255, 191, 0, 0.30);
    --hec-toggle-border-hv: rgba(255, 191, 0, 0.65);
    --hec-toggle-shadow-1:  rgba(0, 0, 0, 0.45);
    --hec-toggle-shadow-2:  rgba(255, 191, 0, 0.12);
    --hec-toggle-shadow-hv: rgba(255, 191, 0, 0.30);
    --hec-toggle-icon:      var(--hec-brand-gold);
    --hec-toggle-icon-hv:   #ffd564;
    --hec-toggle-halo:      rgba(255, 191, 0, 0.30);
  }
  
  /* Hide label on small screens — icon only */
  @media (max-width: 480px) {
    .hec-dark-mode-toggle__label {
      display: none;
    }
  
    .hec-dark-mode-toggle {
      padding: 10px 12px;
    }
  }
  
  
  /* =============================================================================
     6. CATEGORY BADGE
     ============================================================================= */
  
  .hec-hero__category-wrap {
    display:    flex;
    align-items: center;
  }
  
  .hec-hero__category-badge {
    display:          inline-flex;
    align-items:      center;
    padding:          var(--hec-space-1) var(--hec-space-4);
    border-radius:    var(--hec-radius-full);
  
    background-color: var(--hec-color-hero-badge-bg);
    color:            var(--hec-color-hero-badge-text);
  
    font-family:      var(--hec-font-meta);
    font-size:        var(--hec-text-xs);
    font-weight:      var(--hec-weight-semibold);
    letter-spacing:   var(--hec-tracking-widest);
    text-transform:   uppercase;
    white-space:      nowrap;
  
    border:           1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter:  blur(4px);
  
    transition:
      background-color var(--hec-transition-fast),
      transform        var(--hec-transition-fast),
      box-shadow       var(--hec-transition-fast);
  
    /*
     * Entrance animation — badge slides up and fades in
     * after the page loads. Class toggled by animations.js.
     */
    opacity:    0;
    transform:  translateY(8px);
    animation:  hec-hero-badge-enter
                var(--hec-duration-slow)
                var(--hec-ease-spring)
                0.1s
                forwards;
  }
  
  @keyframes hec-hero-badge-enter {
    to {
      opacity:   1;
      transform: translateY(0);
    }
  }
  
  .hec-hero__category-badge:hover {
    background-color: var(--hec-brand-amber-light);
    transform:        translateY(-1px);
    box-shadow:       var(--hec-shadow-amber);
  }
  
  
  /* =============================================================================
     7. POST TITLE
     ============================================================================= */
  
  .hec-hero__title {
    font-family:    var(--hec-font-heading);
    /*
     * v1.0.15: the length/height cap formula lives HERE (stylesheet),
     * fed by two plain numbers from hero.php's inline style:
     *   --hec-hero-title-tier   length-based starting size (e.g. 48px)
     *   --hec-hero-title-lines  estimated lines × line-height (e.g. 4.72)
     * Complex math in the inline style itself was rejected by the browser.
     *
     * Size resolution:
     *   1. --hec-hero-title-size  (JS fitter, wins when set)
     *   2. --hec-hero-title-max   (computed below — guarantees fit, no JS)
     *   3. --hec-text-hero        (fluid clamp fallback)
     */
    --hec-hero-title-max: min(
                      var(--hec-hero-title-tier, 68px),
                      calc(
                        (var(--hec-hero-height) - 130px)
                        / var(--hec-hero-title-lines, 1.2)
                      )
                    );
    font-size:      var(
                      --hec-hero-title-size,
                      var(--hec-hero-title-max, var(--hec-text-hero))
                    );
    font-weight:    var(--hec-weight-bold);
    line-height:    var(--hec-leading-tight);
    letter-spacing: var(--hec-tracking-tight);
    color:          var(--hec-color-hero-text);

    /* Column width (60%) constrains the line length now — no ch cap. */
    max-width:      100%;

    /*
     * Text shadow gives the title a subtle lift above the dark
     * gradient and the radial glow.
     */
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.35),
      0 1px 3px  rgba(0, 0, 0, 0.25);
  
    /*
     * Entrance animation — title slides up from below.
     * Delayed slightly after the badge so they stagger.
     */
    opacity:   0;
    transform: translateY(16px);
    animation: hec-hero-title-enter
               var(--hec-duration-slow)
               var(--hec-ease-spring)
               0.2s
               forwards;
  }
  
  @keyframes hec-hero-title-enter {
    to {
      opacity:   1;
      transform: translateY(0);
    }
  }
  
  /*
   * Accent underline on the last word of the title.
   * Creates a subtle brand moment without overwhelming the heading.
   * Applied via JS in main.js wrapping the last word in a <span>.
   */
  .hec-hero__title .hec-title-accent {
    position:         relative;
    display:          inline-block;
    color:            var(--hec-brand-gold);
  }
  
  .hec-hero__title .hec-title-accent::after {
    content:          '';
    position:         absolute;
    bottom:           -4px;
    left:             0;
    right:            0;
    height:           3px;
    background:       linear-gradient(
                        90deg,
                        var(--hec-brand-amber) 0%,
                        var(--hec-brand-gold)  100%
                      );
    border-radius:    var(--hec-radius-full);
    transform:        scaleX(0);
    transform-origin: left;
    animation:        hec-title-underline
                      var(--hec-duration-slow)
                      var(--hec-ease-out)
                      0.5s
                      forwards;
  }
  
  @keyframes hec-title-underline {
    to { transform: scaleX(1); }
  }
  
  
  /* =============================================================================
     8. SCROLL INDICATOR
     A subtle animated chevron at the bottom of the hero inviting
     the reader to scroll down into the content.
     ============================================================================= */
  
  /* v1.0.12: chevron removed from the split-layout hero — it overlapped
     the media frame. Rule kept as display:none so any cached markup or
     JS class toggles stay harmless. */
  .hec-hero::after {
    content: none;
    display: none;
  }
  
  /* v1.0.12: hec-scroll-bounce keyframes and .hec-hero--scrolled rule
     removed with the chevron. main.js still toggles the class — harmless. */
  
  
  /* =============================================================================
     9. RESPONSIVE
     ============================================================================= */
  
  @media (max-width: 1024px) {
    .hec-hero__content {
      gap: var(--hec-space-6);
    }
  }

  /*
   * v1.0.12: below 768px the 60/40 row STACKS — title first, media below
   * (with the neon frame intact). The hero height becomes content-driven
   * so nothing is clipped while stacked.
   */
  @media (max-width: 768px) {
    .hec-hero {
      height:     auto;
      min-height: 0;
      align-items: stretch;
    }

    .hec-hero__content {
      flex-direction: column;
      align-items:    stretch;
      padding:        var(--hec-space-8) var(--hec-space-6);
      gap:            var(--hec-space-5);
    }

    .hec-hero__text {
      flex-basis: auto;
      height:     auto;
      max-height: none;
      overflow:   visible; /* height is content-driven — no fitting needed */
    }

    /* v1.0.13: stacked layout has no height constraint, so ignore the
       desktop sizing chain entirely and use a plain fluid size. This
       declaration overrides the base font-size (later in cascade). */
    .hec-hero__title {
      font-size: clamp(1.625rem, 1.1rem + 3.4vw, 2.5rem);
    }

    .hec-hero__media {
      flex-basis:   auto;
      width:        100%;
      max-height:   none;
      aspect-ratio: 16 / 9;
    }

    .hec-hero__media img,
    .hec-hero__media video {
      max-height: none;
    }
  }

  @media (max-width: 480px) {
    .hec-hero__content {
      padding: var(--hec-space-6) var(--hec-space-5);
    }
  }
  
  
  /* =============================================================================
     10. REDUCED MOTION
     ============================================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    .hec-hero__category-badge,
    .hec-hero__title {
      animation:  none;
      opacity:    1;
      transform:  none;
    }
  
    .hec-hero__title .hec-title-accent::after {
      animation:  none;
      transform:  scaleX(1);
    }
  
    .hec-hero::after {
      display: none;
    }
  }