/* ==========================================================================
   Page-specific overrides. Keep this file small — most styling lives in
   components.css / tokens.css. Add a clearly delimited block per page.
   ========================================================================== */

/* ---- Home: Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-lg) var(--space-md);
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--navbar-height));
  min-height: calc(100dvh - var(--navbar-height));
}

@media (min-width: 768px) {
  .hero { padding-block: var(--space-xl) var(--space-lg); }
}

.hero h1 { font-size: clamp(1.75rem, 6.5vw, 2.25rem); }

@media (min-width: 768px) {
  .hero h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
}

.hero__bg {
  position: absolute;
  inset: -2% -2%;
  z-index: 0;
  background-image:
    linear-gradient(100deg, rgba(5, 15, 38, 0.55) 0%, rgba(5, 15, 38, 0.28) 45%, rgba(5, 15, 38, 0.1) 70%),
    url("/assets/images/hero/hero-photo.jpg");
  background-size: cover;
  background-position: left center, 78% center;
}

.hero__grid {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
}

@media (min-width: 768px) {
  .hero__grid { gap: var(--space-lg); }
}

.hero__content { position: relative; z-index: 1; max-width: 640px; }
.hero h1 { margin-bottom: var(--space-sm); }
.hero__lede { font-size: var(--fs-body); color: var(--text-on-dark-muted); max-width: 52ch; margin-bottom: var(--space-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }

@media (min-width: 768px) {
  .hero h1 { margin-bottom: var(--space-sm); }
  .hero__lede { font-size: var(--fs-body-lg); margin-bottom: var(--space-md); }
  .hero__actions { margin-bottom: var(--space-md); }
}

/* Floating stat panel, inspired by the client-supplied reference mockup */
.hero__stats-wrap { position: relative; z-index: 1; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: var(--space-xs);
}

@media (min-width: 480px) {
  .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .hero__stats { gap: var(--space-sm); border-radius: var(--radius-lg); padding: var(--space-md); }
}

.hero__stat { text-align: center; }
.hero__stat-icon { display: none; }
.hero__stat .stat__number { font-size: clamp(0.95rem, 3vw, 1.6rem); }
.hero__stat .stat__label { font-size: 0.65rem; line-height: 1.2; }

@media (min-width: 768px) {
  .hero__stat-icon { display: block; width: 20px; height: 20px; margin: 0 auto var(--space-2xs); color: var(--color-cyan-300); }
  .hero__stat .stat__label { font-size: 0.75rem; }
}

@media (min-width: 1024px) {
  .hero__stats-wrap {
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: var(--space-lg);
    width: 100%;
    max-width: 520px;
  }
}

/* ---- Home: Stats strip ---- */
.stats-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
@media (min-width: 768px) { .stats-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- About: story split ---- */
.split-block { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .split-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); } }
@media (min-width: 1024px) { .split-block--reverse .split-block__media { order: -1; } }
.split-block__media { border-radius: var(--radius-lg); overflow: hidden; }
.split-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Solutions: industry cards handled by .grid--2 / .industry-card in components.css ---- */

/* ---- Portfolio grid handled by .grid--3 / .project-card in components.css ---- */

/* ---- Contact: split layout ---- */
.contact-grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.contact-info__item { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-lg); }
.contact-info__icon {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(13, 110, 253, 0.1);
  color: var(--color-blue-600);
}
.contact-info__icon svg { width: 22px; height: 22px; }

.map-placeholder {
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--border-default);
  background: var(--bg-alt);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-lg);
}
.map-placeholder svg { width: 40px; height: 40px; color: var(--color-blue-600); }

/* ---- 404 ---- */
.error-page {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.error-page .eyebrow { justify-content: center; }

/* ---- Style guide (internal only) ---- */
.style-guide__note { font-size: var(--fs-small); font-weight: 400; }
.demo-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.demo-panel-dark { background: var(--gradient-navy); padding: 2rem; border-radius: var(--radius-lg); margin-top: 1rem; }

/* ---- Legal pages (privacy, terms) ---- */
.legal { max-width: 760px; margin-inline: auto; }
.legal__updated { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-lg); }
.legal h2 { font-size: var(--fs-h3); margin: var(--space-xl) 0 var(--space-xs); }
.legal p { margin-bottom: var(--space-sm); }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: var(--space-xs) 0 var(--space-sm); }
.legal li { margin-bottom: var(--space-2xs); }
.legal a { color: var(--link-color); text-decoration: underline; }