/* ==========================================================================
   CLUNKY DESIGN SYSTEM
   Hero
   File: /assets/css/layout/hero.css

   Sprint 1 canonical version.

   RESPONSIBILITY
   - Article hero
   - Hero eyebrow
   - Hero title
   - Hero lead/supporting copy
   - Hero metadata
   - Hero actions
   - Hero spacing and responsive behaviour

   DO NOT PUT HERE
   - Global H1/H2 typography -> typography.css
   - Button appearance      -> buttons.css
   - Global containers       -> layout.css

   FUTURE EXTENSION POINTS
   1. .hero--pillar
      For large pillar pages.

   2. .hero--resource
      For interactive tools and downloadable resources.

   3. .hero--minimal
      For shorter supporting articles.

   4. .hero-visual
      For future SVG/illustration/interactive hero artwork.
========================================================================== */


/* ==========================================================================
   1. BASE HERO
========================================================================== */

.hero {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: var(
    --color-surface,
    #ffffff
  );

  color: var(
    --color-text,
    #111827
  );
}


/* ==========================================================================
   2. ARTICLE HERO
========================================================================== */

.hero--article {
  padding-block: clamp(
    4rem,
    9vw,
    7.5rem
  );
}


/* ==========================================================================
   3. HERO CONTENT
========================================================================== */

.hero-content {
  width: min(
    100%,
    880px
  );

  margin-inline: auto;

  text-align: center;
}


/* ==========================================================================
   4. EYEBROW
========================================================================== */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-bottom: 1rem;

  padding: 0.375rem 0.75rem;

  border: 1px solid var(
    --color-border,
    #e5e7eb
  );

  border-radius: 999px;

  background: var(
    --color-surface-subtle,
    #f8fafc
  );

  color: var(
    --color-accent,
    #2563eb
  );

  font-size: 0.8125rem;
  font-weight: 750;

  line-height: 1.3;

  letter-spacing: 0.04em;
}

.hero-description{
    display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-bottom: 1rem;

  padding: 0.375rem 0.75rem;

  
}


/* ==========================================================================
   5. HERO TITLE
========================================================================== */

.hero h1 {
  max-width: 900px;

  margin-inline: auto;

  color: var(
    --color-heading,
    #111827
  );

  font-size: clamp(
    2.5rem,
    6vw,
    5rem
  );

  line-height: 0.98;

  letter-spacing: -0.055em;

  text-wrap: balance;
}


/* ==========================================================================
   6. HERO TITLE ACCENT
========================================================================== */

.hero-title-accent {
  display: block;

  margin-top: 0.35em;

  color: var(
    --color-text-muted,
    #64748b
  );

  font-size: 0.62em;

  font-weight: 650;

  line-height: 1.1;

  letter-spacing: -0.035em;
}


/* ==========================================================================
   7. HERO LEAD
========================================================================== */

.hero-lead {
  max-width: 760px;

  margin: 1.75rem auto 0;

  color: var(
    --color-text,
    #334155
  );

  font-size: clamp(
    1.125rem,
    2vw,
    1.375rem
  );

  line-height: 1.65;

  text-wrap: balance;
}


/* ==========================================================================
   8. HERO SUPPORTING COPY
========================================================================== */

.hero-supporting {
  max-width: 680px;

  margin: 1rem auto 0;

  color: var(
    --color-text-muted,
    #64748b
  );

  font-size: 1rem;

  line-height: 1.7;
}


/* ==========================================================================
   9. HERO METADATA
========================================================================== */

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0.625rem;

  margin-top: 1.5rem;

  color: var(
    --color-text-muted,
    #64748b
  );

  font-size: 0.875rem;

  line-height: 1.5;
}


.hero-meta strong {
  color: var(
    --color-text,
    #334155
  );

  font-weight: 700;
}


/* ==========================================================================
   10. HERO ACTIONS
========================================================================== */

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0.75rem;

  margin-top: 2rem;
}


/* ==========================================================================
   11. HERO DECORATIVE BACKGROUND
==========================================================================

   Subtle radial gradients give the hero some visual depth without turning
   the page into a marketing landing page.

   The gradients use currentColor so they remain compatible with dark mode.
========================================================================== */

.hero::before {
  content: "";

  position: absolute;

  top: -15rem;
  left: 50%;

  width: min(
    60rem,
    90vw
  );

  height: 35rem;

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--color-accent, #2563eb) 8%,
        transparent
      ) 0%,
      transparent 68%
    );

  pointer-events: none;
}


.hero-content {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   12. ARTICLE HERO VISUAL DIVIDER
========================================================================== */

.hero--article::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background: var(
    --color-border,
    #e5e7eb
  );
}


/* ==========================================================================
   13. FUTURE EXTENSION — PILLAR HERO
==========================================================================

   When we build:

   /blog/context-switching.html
   /blog/developer-productivity.html
   /blog/developer-experience.html
   /blog/software-complexity.html
   /blog/ai-workflow.html

   we can introduce:

   .hero--pillar {}

   without changing .hero--article.

   The pillar hero can then receive a larger visual treatment and possibly
   an interactive framework graphic.

========================================================================== */


/* ==========================================================================
   14. FUTURE EXTENSION — HERO VISUAL
==========================================================================

   Reserved for:

   .hero-visual
   .hero-visual svg
   .hero-visual img
   .hero-visual-caption

   This is where we can eventually place:

   - Workflow Friction Iceberg™
   - Workflow Friction Pyramid™
   - Context Switching diagram
   - AI Workflow visualisations

========================================================================== */


/* ==========================================================================
   15. RESPONSIVE — TABLET
========================================================================== */

@media (max-width: 900px) {

  .hero--article {
    padding-block: clamp(
      3.5rem,
      8vw,
      5rem
    );
  }


  .hero h1 {
    font-size: clamp(
      2.5rem,
      8vw,
      4rem
    );
  }


  .hero-lead {
    max-width: 680px;
  }

}


/* ==========================================================================
   16. RESPONSIVE — MOBILE
========================================================================== */

@media (max-width: 600px) {

  .hero--article {
    padding-block: 3.25rem 4rem;
  }


  .hero-content {
    text-align: left;
  }


  .hero-eyebrow {
    margin-bottom: 0.875rem;
  }


  .hero h1 {
    font-size: clamp(
      2.25rem,
      12vw,
      3.25rem
    );

    line-height: 1;

    letter-spacing: -0.05em;
  }


  .hero-title-accent {
    margin-top: 0.5em;

    font-size: 0.64em;
  }


  .hero-lead {
    margin-top: 1.25rem;

    font-size: 1.0625rem;

    line-height: 1.6;
  }


  .hero-supporting {
    font-size: 0.9375rem;

    line-height: 1.65;
  }


  .hero-meta {
    justify-content: flex-start;

    font-size: 0.8125rem;
  }


  .hero-actions {
    justify-content: flex-start;

    align-items: stretch;
    flex-direction: column;

    margin-top: 1.5rem;
  }


  .hero-actions .btn {
    width: 100%;
  }

}


/* ==========================================================================
   17. DARK MODE
========================================================================== */

@media (prefers-color-scheme: dark) {

  .hero {
    background: var(
      --color-surface-dark,
      #0f172a
    );

    color: var(
      --color-text-dark,
      #f8fafc
    );
  }


  .hero h1 {
    color: var(
      --color-heading-dark,
      #f8fafc
    );
  }


  .hero-title-accent {
    color: var(
      --color-text-muted-dark,
      #94a3b8
    );
  }


  .hero-lead {
    color: var(
      --color-text-dark,
      #e2e8f0
    );
  }


  .hero-supporting,
  .hero-meta {
    color: var(
      --color-text-muted-dark,
      #94a3b8
    );
  }


  .hero-meta strong {
    color: var(
      --color-text-dark,
      #e2e8f0
    );
  }


  .hero-eyebrow {
    background: var(
      --color-surface-subtle-dark,
      #172033
    );

    border-color: var(
      --color-border-dark,
      #273449
    );
  }


  .hero--article::after {
    background: var(
      --color-border-dark,
      #273449
    );
  }

}


/* ==========================================================================
   18. REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .hero::before {
    transition: none;
  }

}

/* ==========================================================================
   HERO ACTIONS
   Sprint 1
========================================================================== */

.hero-actions {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.875rem;

    margin-top: 2rem;

    width: 100%;

}


/* ==========================================================================
   HERO META
========================================================================== */

.hero-meta {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.5rem;

    width: 100%;

    margin-top: 1.25rem;

    text-align: center;

}

.hero-meta-separator {
    opacity: 0.5;
}


/* ==========================================================================
   HERO CONTENT ALIGNMENT
========================================================================== */

.hero-content {

    max-width: 800px;

    margin-inline: auto;

    text-align: center;

}


/* ==========================================================================
   HERO RESPONSIVE
========================================================================== */

@media (max-width: 600px) {

    .hero-actions {

        flex-direction: column;

        width: 100%;

    }


    .hero-actions .button {

        width: 100%;

        max-width: 320px;

    }


    .hero-meta {

        flex-direction: column;

        gap: 0.25rem;

    }

}