/**
 * pages.css — page-specific overrides and unique section layouts
 * Imports nothing; depends on tokens.css, base.css, components.css being loaded first.
 */

/* ================================================================
   HOME PAGE
   ================================================================ */

/* Home hero — full-bleed background image with text overlaid (more room for text) */
.hero--home {
  position: relative;
}

@media (min-width: 1024px) {
  .hero--home {
    min-height: 600px;
    display: flex;
    align-items: center;
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Cover the whole hero; class+type specificity overrides the global img{height:auto} */
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

/* Navy gradient overlay: darkest on the left where the text sits, so white copy stays legible */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 15, 30, 0.97) 0%, rgba(8, 15, 30, 0.88) 42%, rgba(8, 15, 30, 0.55) 100%),
    linear-gradient(0deg, rgba(8, 15, 30, 0.85) 0%, rgba(8, 15, 30, 0.15) 55%);
}

/* Lift the content above the background layer and give the text plenty of room */
.hero--home > .container {
  position: relative;
  z-index: 1;
}

.home-hero__text {
  max-width: 680px;
}

.hero--home .hero__h1 {
  max-width: 20ch;
}

.hero--home .hero__sub {
  max-width: 620px;
}

@media (min-width: 1024px) {
  .home-hero__text {
    max-width: 760px;
  }
}

/* Pain / problem section (dark, two-col text + stat) */
.pain-section__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .pain-section__inner {
    grid-template-columns: 2fr 1fr;
  }
}

/* Services preview grid on home page */
.home-services__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .home-services__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .home-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stats strip (4 stats across) */
.stats-strip {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 1024px) {
  .stats-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* About / approach section (two-col: steps left, image right) */
.about-split__inner {
  display: grid;
  gap: var(--space-12);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .about-split__inner {
    grid-template-columns: 3fr 2fr;
  }
}

/* ================================================================
   SERVICE PAGE
   ================================================================ */

/* Layout variant A: hero with image on right */
.service-hero-a__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .service-hero-a__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Layout variant B: text-only centered hero */
.service-hero-b__inner {
  max-width: 760px;
  margin-inline: auto;
}

/* Layout variant C: hero with image on left */
.service-hero-c__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .service-hero-c__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Deliverables grid (2-col on md, 4-col on xl) */
.deliverables-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .deliverables-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .deliverables-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Approach steps grid */
.approach-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .approach-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Why items grid */
.why-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Result band: metric + context side by side */
.result-band__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .result-band__inner {
    grid-template-columns: 1fr 2fr;
  }
}

/* ================================================================
   SERVICES INDEX
   ================================================================ */
.services-index__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .services-index__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .services-index__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-values__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .about-values__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .about-values__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   RESULTS PAGE
   ================================================================ */
.results-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.results-filter__btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  border: var(--border-default);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}

.results-filter__btn.is-active,
.results-filter__btn:hover {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-white);
}

.results-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .results-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   PRICING PAGE
   ================================================================ */
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  background: rgba(26, 125, 255, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-blue);
  flex-shrink: 0;
}

.contact-info__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.contact-info__value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-primary);
}

.contact-info__value a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.contact-info__value a:hover {
  color: var(--color-text-accent);
}

/* ================================================================
   404 PAGE
   ================================================================ */
.page-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
}

.page-404__code {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(90deg, #1A7DFF 0%, #00C8A0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--color-accent-blue);
}

@media (max-width: 479px) {
  .page-404__code {
    font-size: 80px;
  }
}

/* ================================================================
   SECTION UTILITY: no-top-pad / no-bottom-pad
   ================================================================ */
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.text-center { text-align: center; }