/**
 * sinopak/hub-hero block styles
 *
 * Prototype: solutions-hub.html .hero / .hero-panel — brand gradient band,
 * photographic layer on the right, glassy copy panel with breadcrumb, h1,
 * h2 subtitle, lead and anchor CTA. The photo layer arrives per instance via
 * the --spk-x-hub-hero-image custom property (inline style from render.php).
 */
@layer spk-block {
  .spk-x-hub-hero {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    color: var(--wp--preset--color--white);
    background: linear-gradient(115deg, #17b7d8 0%, #0d8fbe 30%, #086199 62%, #06366b 100%);
  }
  .spk-x-hub-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
      linear-gradient(90deg, rgba(2, 23, 51, 0.95) 0%, rgba(6, 43, 92, 0.82) 42%, rgba(6, 43, 92, 0.38) 70%, rgba(2, 23, 51, 0.7) 100%),
      radial-gradient(circle at 12% 10%, rgba(8, 168, 210, 0.32), transparent 34%),
      var(--spk-x-hub-hero-image, none) right center / 68% auto no-repeat,
      linear-gradient(115deg, #17b7d8 0%, #0d8fbe 30%, #086199 62%, #06366b 100%);
    filter: saturate(0.9) contrast(1.02);
  }
  .spk-x-hub-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(2, 23, 51, 0.12), transparent 52%, rgba(2, 23, 51, 0.12));
    opacity: 0.28;
  }

  .spk-x-hub-hero .spk-x-hub-hero__shell {
    position: relative;
    z-index: 1;
    /* Shared inner-page top offset so the panel clears the solid header and
       lines up with every other hero band. */
    min-height: calc(500px - 86px);
    display: grid;
    align-items: center;
    padding: var(--spk-x-hero-pad-top) 0 0;
  }

  .spk-x-hub-hero__panel {
    width: min(640px, 52vw);
    padding: clamp(26px, 3vw, 38px);
    border-radius: 12px;
    background: linear-gradient(115deg, rgba(2, 23, 51, 0.58), rgba(2, 23, 51, 0.1));
  }

  .spk-x-hub-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .spk-x-hub-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.88);
  }
  .spk-x-hub-hero__crumb {
    color: rgba(255, 255, 255, 0.72);
  }
  .spk-x-hub-hero__sep {
    color: rgba(255, 255, 255, 0.42);
  }

  .spk-x-hub-hero__heading {
    margin: 0;
    color: var(--wp--preset--color--white);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 0.97;
    letter-spacing: -0.04em;
  }

  .spk-x-hub-hero__subheading {
    margin: 18px 0 12px;
    color: var(--wp--preset--color--white);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .spk-x-hub-hero .spk-x-hub-hero__text {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(15px, 1.06vw, 18px);
    line-height: 1.5;
  }

  .spk-x-hub-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    margin-top: 22px;
    border: 0;
    border-radius: 10px;
    padding: 0 30px;
    background: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--white);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  .spk-x-hub-hero__cta:hover,
  .spk-x-hub-hero__cta:focus-visible {
    transform: translateY(-2px);
    background: #ff902d;
    box-shadow: none;
  }
}

@layer spk-responsive {
  @media (max-width: 1180px) {
    .spk-x-hub-hero__panel {
      width: min(720px, 92vw);
    }
  }
  @media (max-width: 720px) {
    .spk-x-hub-hero {
      min-height: 390px;
    }
    .spk-x-hub-hero::before {
      background:
        linear-gradient(90deg, rgba(2, 23, 51, 0.94), rgba(6, 43, 92, 0.68)),
        var(--spk-x-hub-hero-image, none) center / cover no-repeat,
        linear-gradient(115deg, #17b7d8 0%, #0d8fbe 30%, #086199 62%, #06366b 100%);
    }
    .spk-x-hub-hero .spk-x-hub-hero__shell {
      min-height: calc(500px - 76px);
    }
    .spk-x-hub-hero__panel {
      width: 100%;
      padding: 26px;
    }
  }
}