/* =============================================================================
   lib/styles/pages/industries_page.css — Total Solutions Sectors Served Page
   ============================================================================= */

.industries-page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-background-alt, #f4f5f7); /* Subdued background so the white card pops */
}

.industries-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12, 3rem);
}

/* Metadata tag styled specifically to pop on the dark gradient header */
.industries-page__meta-tag {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text-inverse, #ffffff);
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- Intro Section Card --- */
.industries-intro-card {
  background-color: var(--color-surface-primary, #ffffff);
  border: 1px solid var(--color-border-default, #e2e4e8);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--space-6, 1.5rem);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 41, 74, 0.06));
}

@media (min-width: 768px) {
  .industries-intro-card {
    padding: var(--space-10, 2.5rem);
  }
}

.industries-intro-card__title {
  font-family: var(--font-heading, 'Inter', 'Roboto', sans-serif);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #1a1c20);
  margin-top: 0;
  margin-bottom: var(--space-4, 1rem);
  line-height: 1.3;
}

.industries-intro-card__lead {
  font-family: var(--font-body, 'Inter', 'Roboto', sans-serif);
  font-size: var(--font-size-body, 1rem);
  color: var(--color-text-secondary, #4a4d55);
  line-height: 1.7;
  margin-bottom: var(--space-10, 2.5rem);
  max-width: 72ch;
}

/* 2-Column Grid for the Industry list */
.industries-intro-card__list {
  display: grid;
  gap: var(--space-6, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .industries-intro-card__list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-12, 3rem);
    row-gap: var(--space-8, 2rem);
  }
}

.industries-intro-card__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
}

.industries-intro-card__list-icon {
  color: var(--color-primary, #0056d2);
  font-size: 1.25rem;
  /* Push icon down slightly to perfectly align with the text baseline */
  margin-top: 0.15rem; 
  flex-shrink: 0;
}

.industries-intro-card__list-text {
  line-height: 1.6;
  color: var(--color-text-secondary, #4a4d55);
  font-size: 0.9375rem; /* Slightly smaller for dense list readability */
}

.industries-intro-card__list-text strong {
  color: var(--color-text-primary, #1a1c20);
  font-weight: var(--font-weight-semibold, 600);
}

/* =========================================================================
   Choreographed Load Sequences (ScrollReveal Integration for Custom Blocks)
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  /* Setup hidden states for the custom Intro Card elements */
  .industries-intro-card__title,
  .industries-intro-card__lead,
  .industries-intro-card__list-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--motion-duration-medium, 400ms) var(--motion-ease-out, ease-out),
                transform var(--motion-duration-medium, 400ms) var(--motion-ease-out, ease-out);
  }

  /* Reveal sequence when ScrollAnimationWrapper attaches .is-visible to the card */
  .is-visible .industries-intro-card__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
  }

  .is-visible .industries-intro-card__lead {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }

  /* Stagger the inner list items */
  .is-visible .industries-intro-card__list-item {
    opacity: 1;
    transform: translateY(0);
  }

  .is-visible .industries-intro-card__list-item:nth-child(1) { transition-delay: 0.3s; }
  .is-visible .industries-intro-card__list-item:nth-child(2) { transition-delay: 0.35s; }
  .is-visible .industries-intro-card__list-item:nth-child(3) { transition-delay: 0.4s; }
  .is-visible .industries-intro-card__list-item:nth-child(4) { transition-delay: 0.45s; }
  .is-visible .industries-intro-card__list-item:nth-child(5) { transition-delay: 0.5s; }
  .is-visible .industries-intro-card__list-item:nth-child(n+6) { transition-delay: 0.55s; } /* Fallback */
}