/* ==========================================================================
   pages/home.css — homepage-only layout

   Primitives (buttons, cards, badges, grids) live in components.css, and
   blocks shared with other pages (the clock, the service list, project and
   community cards, the social hub) live in content.css. Only layout that
   exists nowhere but the homepage belongs in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__title {
  margin-top: var(--space-4);
}

.hero__title .accent {
  /* The gradient sits on the theme accent, so the name recolours with the
     theme along with everything else. */
  background: linear-gradient(120deg, var(--accent-soft), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fallback for browsers that cannot clip a gradient to text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title .accent {
    background: none;
    color: var(--accent-soft);
  }
}

/* Typing line ------------------------------------------------------------ */

.type {
  position: relative;
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  color: var(--text-dim);
}

.type__prefix {
  color: var(--text-mute);
}

.type__text {
  color: var(--accent-soft);
}

/* The caret. Hidden under reduced motion, where the text does not animate. */
.type__text::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.15em;
  vertical-align: -0.18em;
  background: var(--accent);
  animation: caret 1.05s steps(2, start) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* An invisible copy of the longest phrase, inserted by JS. It reserves the
   width so the line below the heading never reflows mid-animation. */
.type__sizer {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .type__text::after {
    display: none;
  }
}

.hero__lead {
  max-width: 52ch;
  margin-top: var(--space-5);
  color: var(--text-dim);
  font-size: var(--fs-md);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* Live panel ------------------------------------------------------------- */
/* The clock and a status glance, right there in the hero. */

.live-panel {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* A soft accent bloom in the corner, so the panel reads as the focal point
   without needing a heavy border or a glass effect. */
.live-panel::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -25%;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  opacity: 0.5;
  pointer-events: none;
}

.live-panel > * {
  position: relative;
}

.live-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.live-panel__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.live-panel__divider {
  height: 1px;
  margin-block: var(--space-5);
  background: var(--border);
}

.live-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.live-panel__row + .live-panel__row {
  margin-top: var(--space-3);
}

.live-panel__row-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.live-panel__foot {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Status feature

   Deliberately the largest, most prominent block on the page after the hero.
   Every value in it comes from /api/status; nothing here is decorative.
   -------------------------------------------------------------------------- */

.status-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(40rem 20rem at 0% 0%, var(--accent-wash), transparent 70%),
    var(--surface-1);
}

.status-feature__intro h2 {
  margin-top: var(--space-3);
}

.status-feature__text {
  margin-top: var(--space-4);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.status-feature__pill {
  margin-top: var(--space-5);
}

.status-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.status-feature__panel {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
}

.status-feature__panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.status-feature__panel-title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.status-feature__checked {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .hero__grid,
  .status-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__grid {
    gap: var(--space-8);
  }

  /* On one column the panel no longer needs to compete with the text. */
  .live-panel {
    max-width: 30rem;
  }
}

@media (max-width: 40rem) {
  .hero__actions .btn,
  .status-feature__actions .btn {
    /* Full-width buttons beat two cramped half-width ones on a phone. */
    flex: 1 1 100%;
  }

  .live-panel {
    padding: var(--space-5);
  }
}