/* ================================================================
   TILLFORGE — PAGE HERO ANIMATION SYSTEM
   Shared CSS for Two-column Split + Full-background hero variants
   ================================================================ */

/* ── BASE SETUP ─────────────────────────────────────────────────── */

.page-hero {
  padding-top: var(--nav-h, 72px);
  background: var(--clr-bg);
  overflow: hidden;
}

/* ── SPLIT HERO (text + canvas side by side) ─────────────────────── */

.page-hero--split {
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding-block: var(--nav-h, 72px) 0;
}

.page-hero--split .container {
  display: grid;
  grid-template-columns: 56% 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* Reversed: canvas left, text right */
.page-hero--split-rev .container {
  grid-template-columns: 1fr 56%;
}

.page-hero--split-rev .page-hero__text {
  order: 2;
}

.page-hero--split-rev .page-hero__canvas-frame {
  order: 1;
}

/* Canvas instrument frame */
.page-hero__canvas-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(233, 69, 96, 0.14);
  border-radius: 6px;
  overflow: hidden;
  background: var(--clr-surface, #0D0D14);
}

.page-hero__canvas-frame canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Frame corner accents — architectural detail */
.page-hero__canvas-frame::before,
.page-hero__canvas-frame::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--clr-red);
  border-style: solid;
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}

.page-hero__canvas-frame::before {
  top: 0; left: 0;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 6px 0 0 0;
}

.page-hero__canvas-frame::after {
  bottom: 0; right: 0;
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 6px 0;
}

/* Frame label — top right corner */
.page-hero__canvas-label {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(233, 69, 96, 0.4);
  z-index: 3;
  pointer-events: none;
}

/* ── FULL-BACKGROUND HERO (work, blog) ──────────────────────────── */

.page-hero--full-bg {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  padding-block: var(--nav-h, 72px) 4rem;
}

.page-hero__canvas-bg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.page-hero--full-bg .page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgba(6,6,10,0.96) 0%,  rgba(6,6,10,0.70) 55%, rgba(6,6,10,0.30) 100%),
    linear-gradient(to bottom, rgba(6,6,10,0.50) 0%,  transparent 40%,       rgba(6,6,10,0.90) 100%);
}

.page-hero--full-bg .container {
  position: relative;
  z-index: 2;
}

/* ── TEXT CONTENT INSIDE HEROES ─────────────────────────────────── */

.page-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clr-red);
  margin-bottom: 1.2rem;
}

.page-hero__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw + 0.5rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 1.2rem;
}

.page-hero__heading span { color: var(--clr-red); }

.page-hero__sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 50ch;
  margin-bottom: 2rem;
}

.page-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .page-hero--split .container,
  .page-hero--split-rev .container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .page-hero--split-rev .page-hero__text,
  .page-hero--split-rev .page-hero__canvas-frame {
    order: unset;
  }

  .page-hero__canvas-frame {
    aspect-ratio: 16 / 9;
    max-height: 280px;
  }

  .page-hero--split {
    min-height: auto;
    padding-bottom: 3rem;
  }
}

@media (max-width: 480px) {
  .page-hero__canvas-frame { display: none; }
  .page-hero--full-bg { min-height: 50vh; }
}