/* ==========================================================================
   C2I Website — Layout Stylesheet
   Handles grid systems, page structure, section wrappers, and responsive
   layout primitives. Complements style.css (tokens) and components.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Body Layout — account for fixed nav offset
   -------------------------------------------------------------------------- */

body {
  /* Push content below fixed nav — overridden per breakpoint below */
  padding-top: 60px;
}


/* --------------------------------------------------------------------------
   2. Page Sections — alternating background pattern
   -------------------------------------------------------------------------- */

.section--white {
  background-color: var(--color-white);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--accent {
  background-color: var(--color-olive-light);
}

.section--dark {
  background-color: var(--color-olive-dark);
  color: var(--color-white);
}


/* --------------------------------------------------------------------------
   3. Card Grid — services snapshot
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;           /* single column mobile */
}

.card-grid--four {
  /* promoted to 2-col at tablet, 4-col at desktop via media queries */
}


/* --------------------------------------------------------------------------
   4. Stat Strip — mission section
   -------------------------------------------------------------------------- */

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.stat-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-strip__number {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}

.stat-strip__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}


/* --------------------------------------------------------------------------
   5. Studios Teaser — two-column split layout
   -------------------------------------------------------------------------- */

.studios-teaser__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.studios-teaser__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.studios-teaser__content .btn {
  align-self: flex-start;
  margin-top: var(--space-4);
}

.studios-teaser__media {
  width: 100%;
}

.studios-teaser__placeholder {
  width: 100%;
  min-height: 300px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.06em;
}

.studios-teaser__since {
  font-size: var(--text-xs);
  color: var(--color-olive-light);
  letter-spacing: 0.12em;
}


/* --------------------------------------------------------------------------
   6. CTA Strip — contact banner above footer
   -------------------------------------------------------------------------- */

.cta-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.cta-strip__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-olive-dark);
}

.cta-strip__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-olive-dark);
  opacity: 0.85;
}

.cta-strip__actions {
  margin-top: var(--space-2);
}


/* --------------------------------------------------------------------------
   7. Section CTA (centered link below logo strip etc.)
   -------------------------------------------------------------------------- */

.section-cta {
  margin-top: var(--space-10);
}

.section-cta--centered {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}


/* --------------------------------------------------------------------------
   8. Skip Link — accessibility
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--space-4);
}


/* --------------------------------------------------------------------------
   9. Responsive — Tablet (768px+)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  body {
    padding-top: 72px; /* taller nav on desktop */
  }

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

  .studios-teaser__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
  }

  .studios-teaser__content {
    flex: 1;
  }

  .studios-teaser__media {
    flex: 1;
  }

  .cta-strip__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

}


/* --------------------------------------------------------------------------
   10. Responsive — Desktop (1024px+)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

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

  .stat-strip__number {
    font-size: var(--text-4xl);
  }

}


/* --------------------------------------------------------------------------
   End of layout.css
   ========================================================================== */