/* =============================================================================
   Craft Blocks — Page Heading - Keyword Typewriter
   Matches the reference Hero — Typewriter block from animated-blocks.
   Light background, dark text, solid accent-colour cycling keyword.
   Font size, text colour, and keyword colour are set via CSS custom properties
   injected as inline styles from the Twig template.
   ============================================================================= */

.cb-phkt {
  --phkt-font-size: 96px;
  --phkt-text: #111111;
  --phkt-accent: #D60000;
  --phkt-muted: #6b7280;
  --phkt-bg: #F4F6F6;

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--phkt-bg);
  padding: min(8rem, 10vh) 3rem min(5rem, 6vh);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cb-phkt__content {
  width: 100%;
  max-width: 80rem; /* 1280px — matches feature block carousel intro */
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  min-width: 0;
}

/* -------------------------------------------------------
   Main headline — size driven by --phkt-font-size
   ------------------------------------------------------- */
.cb-phkt__headline {
  font-size: clamp(1.75rem, 4vw + 1.1rem, var(--phkt-font-size));
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--phkt-text);
  margin: 0;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------
   Typewriter keyword — solid accent colour
   ------------------------------------------------------- */
.cb-phkt__word {
  display: inline-block;
  min-width: 1ch;
  color: var(--phkt-accent);
}

/* -------------------------------------------------------
   Blinking cursor
   ------------------------------------------------------- */
.cb-phkt__cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background-color: var(--phkt-accent);
  vertical-align: middle;
  margin-left: 2px;
  animation: cb-phkt-blink 0.75s step-end infinite;
}

@keyframes cb-phkt-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* -------------------------------------------------------
   Subheadline — same size as the main heading
   ------------------------------------------------------- */
.cb-phkt__subheadline {
  font-size: clamp(1.75rem, 4vw + 1.1rem, var(--phkt-font-size));
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--phkt-text);
  margin: 0 0 1.5rem;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------
   Optional headline — small muted supporting line
   ------------------------------------------------------- */
.cb-phkt__optional-headline {
  font-size: clamp(0.875rem, 1.35vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--phkt-muted);
  margin: 0 0 1.25rem;
  max-width: 55ch;
}

.cb-phkt__subheadline + .cb-phkt__optional-headline {
  margin-top: -0.5rem;
}

/* -------------------------------------------------------
   Primary CTA (uses shared .cb-btn + appearance.css)
   ------------------------------------------------------- */
.cb-phkt__actions {
  margin: 0 0 1.5rem;
}

.cb-phkt__cta {
  width: fit-content;
}

/* -------------------------------------------------------
   Description paragraph
   ------------------------------------------------------- */
.cb-phkt__description {
  font-size: 1rem;
  font-weight: 400;
  color: var(--phkt-muted);
  max-width: 55ch;
  line-height: 1.65;
  margin: 0 0 2rem;
}

/* -------------------------------------------------------
   Scroll indicator — centred at the bottom of the hero
   ------------------------------------------------------- */
.cb-phkt__scroll-indicator {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: var(--phkt-scroll-color, var(--phkt-muted));
}

.cb-phkt__scroll-text {
  font-size: var(--phkt-scroll-font-size, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Each character starts invisible, appears as a thin outline, then fills solid */
.cb-phkt__scroll-char {
  opacity: 0;
  -webkit-text-stroke: 1px currentColor;
  color: transparent;
  transition: opacity 0.15s ease, color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}

.cb-phkt__scroll-char.is-drawing {
  opacity: 1;
}

.cb-phkt__scroll-char.is-solid {
  color: currentColor;
  -webkit-text-stroke-color: transparent;
}

.cb-phkt__scroll-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Bounce animation */
@keyframes cb-phkt-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%  { transform: translateY(8px); }
  60%  { transform: translateY(4px); }
}

.cb-phkt__scroll-indicator--bounce .cb-phkt__scroll-icon {
  animation: cb-phkt-bounce 2s ease infinite;
}

/* Pencil-draw: hidden until JS starts the character-by-character animation */
.cb-phkt__scroll-indicator--pencil-draw {
  visibility: hidden;
}

/* =============================================================================
   Narrow viewports — full-width content, comfortable insets
   ============================================================================= */

@media (max-width: 48rem) {
  .cb-phkt {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(2.5rem, 8vh, 5rem) 1.25rem clamp(2rem, 5vh, 3.5rem);
  }

  .cb-phkt__content {
    padding: 0;
  }
}

@media (max-width: 30rem) {
  .cb-phkt {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}