/* Enterprise Admin & Team Settings — v2 content layout
   Same structural system as rally-uxr-observation-rooms.css. Header nav is
   the site-wide .site-navbar/.nav-pill from style.css; only the footer
   (rally-footer, ported here as es-footer) stays standalone.
   Source: Figma node 2206:29508 */

:root {
  --es-gray-200: #e5e7eb;
  --es-gray-600: #4b5563;
  --es-gray-700: #374151;
  --es-gray-800: #1f2937;
  --es-gray-900: #111827;
  --es-max-width: 1224px;
}

body.es-page {
  background-color: #fcfcfe;
}

.es-footer-nav a.es-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}

.es-nav-btn:hover {
  background-color: #f8fafc;
}

.es-footer-nav a.es-nav-btn--primary {
  background: linear-gradient(180deg, #374151, #111827);
  border-color: rgba(17, 24, 39, 0.2);
  color: #ffffff;
  text-shadow: 0px 1px 1px rgba(49, 46, 129, 0.25);
}

.es-footer-nav a.es-nav-btn--primary:hover {
  background: linear-gradient(180deg, #3f4b5c, #1a2434);
}

.es-shell {
  padding: 0 24px;
}

.es-content {
  max-width: var(--es-max-width);
  margin: 0 auto;
  padding: 120px 0 80px;
}

.es-title-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

.es-kicker {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--es-gray-600);
}

.es-h1 {
  margin: 4px 0 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.8px;
  color: var(--es-gray-900);
}

.es-overview {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.48;
  color: var(--es-gray-600);
}

.es-hero {
  margin-top: 56px;
  width: 100%;
  border: 1px solid var(--es-gray-200);
  border-radius: 16px;
}

/* Two-column section (Scope & Impact + Role/Team/Tools) */

.es-section {
  display: flex;
  gap: 126px;
  padding-top: 16px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--es-gray-200);
  margin-top: 40px;
}

.es-section-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 600px;
  max-width: 100%;
}

.es-label {
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--es-gray-800);
}

.es-text-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.es-text {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.48;
  color: var(--es-gray-600);
}

.es-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 496px;
  max-width: 100%;
}

.es-info-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Single-column text blocks (Project Goals, First Steps, Design Decision,
   Reflection, Additional Screens) */

.es-block {
  padding-top: 48px;
  padding-bottom: 48px;
}

.es-block--divider {
  padding-bottom: 49px;
  border-bottom: 1px solid var(--es-gray-200);
}

.es-block .es-section-main {
  gap: 16px;
}

/* Modifier: block is immediately followed by a full-width image (no
   divider) — the block's own bottom padding is dropped since the image's
   margin-top is what creates the gap. */

.es-block--flush-bottom {
  padding-bottom: 0;
}

/* Modifier: block immediately follows a full-width image with no divider
   between them (design-decision groups, Additional screens) — needs a
   larger top gap than the standard 48px block padding. */

.es-block--after-image {
  padding-top: 96px;
}

/* Full-width image following a text block (diagram, product screenshot) */

.es-image {
  margin-top: 48px;
  width: 100%;
  border: 1px solid var(--es-gray-200);
  border-radius: 16px;
}

/* Footer (matches rally-uxr-observation-rooms.css) */

.es-footer {
  border-top: 1px solid var(--es-gray-200);
  padding: 40px 24px;
}

.es-footer-inner {
  max-width: var(--es-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.es-footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.es-footer-heading {
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: -0.8px;
  color: var(--es-gray-900);
}

.es-footer-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.es-footer-copyright {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28px;
  color: var(--es-gray-700);
}

/* Responsive fallback */

@media (max-width: 960px) {
  .es-content {
    padding-top: 64px;
  }

  .es-section {
    flex-direction: column;
    gap: 32px;
  }

  .es-section-main,
  .es-info {
    width: 100%;
  }

  .es-h1 {
    font-size: 32px;
    line-height: 36px;
  }

  .es-block--after-image {
    padding-top: 64px;
  }

  .es-footer-heading {
    font-size: 32px;
    line-height: 36px;
  }
}

@media (max-width: 600px) {
  .es-footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .es-footer-inner {
    gap: 32px;
  }
}