/* ============================================================
   PINNACLE SIGNWORKS — LAYOUT
   Containers, sections, grids.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
}

/* ---- Section spacing ---- */
.section {
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.section--tight {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.section--dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: white;
}

.section--dark .lede {
  color: var(--text-soft-on-dark);
}

.section--surface {
  background: var(--surface);
}

.section--bone {
  background: var(--bone);
}

/* Cool-light alternative to bone — subtle gradient with a faint brand-blue tint
   in the upper-right. Designed for "section between two darks" where bone
   would blur into adjacent bone-tone sections. */
.section--mist {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(30, 46, 160, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, #F0EFEB 0%, #E5E8EE 100%);
}

/* ---- Grids ---- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* 3×2 + 1 centered below — used for the "What We Make" 7-card section */
.grid--7 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid--7 > :nth-child(7) {
  grid-column: 2 / 3;
}

@media (max-width: 900px) {
  .grid--3, .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--7 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--7 > :nth-child(7) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-3));
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 {
    grid-template-columns: 1fr;
  }
  .grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--7 {
    grid-template-columns: 1fr;
  }
  .grid--7 > :nth-child(7) {
    grid-column: 1;
    max-width: none;
    justify-self: stretch;
  }
}

/* ---- Page intro (consistent header for inner pages) ---- */
.page-intro {
  padding-top: clamp(6rem, 10vw, 9rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  background: var(--ink);
  color: white;
  position: relative;
  overflow: hidden;
}

.page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(30, 46, 160, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(233, 78, 27, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.page-intro__inner {
  position: relative;
  z-index: 1;
}

.page-intro h1 {
  color: white;
  max-width: 18ch;
  margin-bottom: var(--space-5);
}

.page-intro .lede {
  color: var(--text-soft-on-dark);
  max-width: 56ch;
}

/* Variant: page-intro with a background video (reuses .section__video-*
   classes for the video layers — see components.css) */
.page-intro--with-video::before {
  display: none; /* hide default radial gradient — overlay takes over */
}

.page-intro--with-video > .container {
  position: relative;
  z-index: 2; /* content sits above the video + overlay layers */
}

/* Variant: page-intro with a contractor image — framed as a rounded card
   cropped to chest level (so the Pinnacle logo on the vest is visible) */
.page-intro--with-image {
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.page-intro--with-image .page-intro__inner {
  display: grid;
  grid-template-columns: 1fr clamp(320px, 34vw, 440px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: 48vh;
}

.page-intro__content {
  padding-bottom: 0;
}

.page-intro__image {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 1 / 1; /* square frame zooms in on subject */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.page-intro__image picture,
.page-intro__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to top so head + hat + chest with logo are visible;
     lower body crops out cleanly */
  object-position: 50% 8%;
}

/* Subtle ambient glow OUTSIDE the framed card */
.page-intro__image::after {
  content: '';
  position: absolute;
  inset: -8% -10%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(233, 78, 27, 0.18) 0%,
    rgba(30, 46, 160, 0.12) 35%,
    transparent 70%);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(20px);
}

@media (max-width: 900px) {
  .page-intro--with-image .page-intro__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .page-intro__image {
    display: none; /* hide on mobile — form stays the priority */
  }
}

/* ---- Two-column splits ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split--narrow {
  grid-template-columns: 1.2fr 1fr;
}

@media (max-width: 900px) {
  .split, .split--narrow {
    grid-template-columns: 1fr;
  }
}

/* ---- Stack ---- */
.stack > * + * {
  margin-top: var(--space-5);
}

.stack-sm > * + * {
  margin-top: var(--space-3);
}

.stack-lg > * + * {
  margin-top: var(--space-7);
}

/* ---- Centered text helper ---- */
.text-center {
  text-align: center;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
}