@import "/css/shared/tokens.css";
@import "/css/shared/reset.css";
@import "/css/shared/base.css";

/* Upstream company token overrides */
:root {
  --color-accent: #004c5c;
  --color-accent-hover: #005d70;
}

/* Product-tinted sections: Lens green, HydroForecast teal.
   Scope these classes to any container that represents a specific product
   (callout cards, CTA blocks, feature rows) to retint nested .btn-primary,
   .callout-card-title, links, etc. via --color-accent. */
.accent-lens {
  --color-accent: #177860;
  --color-accent-hover: #1a8d70;
}

.accent-hf {
  --color-accent: #004c5c;
  --color-accent-hover: #005d70;
}

/* --- Homepage: trusted-by label above shared .logo-bar --- */
.trusted-by .logo-bar-label {
  max-width: none;
  margin: 0 auto var(--space-xl);
}

/* --- Homepage: section intro paragraph under an h2 --- */
.section-intro {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-2xl);
  font-size: var(--text-lg);
}

/* Wide variant: let longer intro lines stay on a single line at desktop widths. */
.section-intro--wide {
  max-width: none;
}

/* --- Homepage: two-product split panels ---
   Site-specific because only the Upstream home splits the two products
   side-by-side with tinted panels; Lens/HF don't need it. */
.product-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.product-panel {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xl);
  border-top: 6px solid var(--color-accent);
  display: flex;
  flex-direction: column;
}

.product-panel-logo {
  height: 40px;
  width: auto;
  margin: 0 0 var(--space-lg);
  border: none;
  align-self: flex-start;
}

.product-panel-title {
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 700;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}

.product-panel-links {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.product-panel-links li {
  margin: 0;
}

.product-panel-links a {
  font-size: var(--text-sm);
  font-weight: 700;
}

.product-panel > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .product-split {
    grid-template-columns: 1fr;
  }
}

/* --- Homepage: value grid (wider paragraphs than global default) --- */
.value-grid p {
  max-width: none;
}

/* --- Homepage: interdisciplinary video cell --- */
.interdisciplinary-grid {
  align-items: center;
  gap: var(--space-2xl);
}

.interdisciplinary-video {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* --- Homepage: innovation section (text left, recognition logos right) --- */
.innovation-grid {
  align-items: center;
  gap: var(--space-2xl);
}

/* --- Homepage: recognition grid (2x2 inside innovation section) --- */
.recognition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.recognition-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.recognition-logo {
  height: 90px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  margin: 0;
  border: none;
}

.recognition-item p {
  max-width: none;
  margin: 0;
}

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

/* --- Homepage: community membership logo row --- */
.community-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3xl);
}

.community-logos img {
  height: 80px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  margin: 0;
  border: none;
}

@media (max-width: 768px) {
  .community-logos {
    gap: var(--space-xl);
  }
  .community-logos img {
    height: 56px;
    max-width: 120px;
  }
}

/* --- Product nav links with inline logos --- */
.nav-product {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-product-logo {
  height: 18px;
  width: auto;
  margin: 0;
  border: none;
}

/* Home "Latest from our products": center the wrapping card row. */
.home-latest .resource-grid {
  justify-content: center;
}

/* Careers: flex-wrap card row that centers orphan cards cleanly
   (used for value/benefit sections where counts are 5/6/etc). */
.callout-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}

.callout-row > .callout-card {
  flex: 1 1 280px;
  max-width: 340px;
}

/* Careers open-roles list */
.open-roles {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-xl);
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.open-roles li {
  background: var(--color-bg);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-accent);
}

.open-roles a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text);
  border-bottom: none;
}

.open-roles a:hover {
  opacity: 1;
}

.open-roles a:hover .open-role-title {
  color: var(--color-accent);
}

.open-role-category {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-bottom: 0.15rem;
}

.open-role-title {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}

/* Hiring process steps: flex-wrap card row, numbered titles.
   The number lives in .hiring-step-title::before via CSS counters, so each
   li stays a simple flex-column card with no grid tricks. */
.hiring-steps {
  list-style: none;
  counter-reset: hiring-step;
  padding: 0;
  margin: var(--space-xl) auto 0;
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}

.hiring-steps li {
  counter-increment: hiring-step;
  flex: 1 1 260px;
  max-width: 300px;
  padding: var(--space-xl);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.hiring-step-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}

.hiring-step-title::before {
  content: counter(hiring-step);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiring-steps li p {
  margin: 0;
}

/* --- Team grid (styles in shared base.css) --- */
/* --- Person bio page --- */
.person-bio-back {
  margin-bottom: var(--space-xl);
}

.person-bio-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.person-bio-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 0;
}

.person-bio-name {
  margin: 0 0 0.5rem;
}

.person-bio-title {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-xl);
}

@media (max-width: 768px) {
  .person-bio-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .person-bio-photo {
    max-width: 320px;
    position: static;
  }
}

.person-bio-pronouns {
  font-style: italic;
  font-size: var(--text-sm);
  margin-left: 0.5rem;
}

.person-bio-body {
  font-size: var(--text-lg);
  line-height: 1.7;
}

.person-bio-body p {
  margin-bottom: var(--space-md);
}

/* --- Life-at-Upstream photo grid (about page) --- */
.culture-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
}

.culture-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border: none;
  border-radius: var(--radius);
}

/* --- Legal content (Upstream-specific) --- */
.legal-content {
  max-width: var(--width-narrow);
}

.legal-content h3 {
  margin-top: var(--space-xl);
}

.legal-content ul {
  padding-left: 1.5em;
}