/**
 * Taxonomy archives — Technology and Product category.
 *
 * Loaded only for these two views by functions.php
 * (assets/css/pages/archive-taxonomy.css). Shared tokens come from
 * assets/css/tokens.css; shared classes reused from style.css:
 * .site-container, .page-hero, .page-hero-title, .page-hero-lead,
 * .tech-eyebrow, .tech-eyebrow-light, .section-header, .section-title,
 * .section-sub, .btn, .btn-primary, .btn-secondary, .btn-light,
 * .image-frame, .ratio-4-3, .media-placeholder, .media-ph-tag, .media-ph-hint.
 *
 * Every class declared in this file is prefixed .tax- and is used only by
 * taxonomy-technology.php and taxonomy-product_category.php. Cards are white
 * with a 1px border and a 6px radius, never a shadow; content bands alternate
 * white and --color-surface-soft.
 */

/* -------------------------------------------------------------
   01 Hero (01): eyebrow, term name, lead, covers line, image, routes
------------------------------------------------------------- */
.tax-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.tax-hero-grid-solo {
  grid-template-columns: 1fr;
}

.tax-hero-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 780px;
}

.tax-hero-content .tech-eyebrow {
  margin-bottom: 0;
}

.tax-hero-lead,
.tax-hero-covers {
  margin-bottom: 0;
}

.tax-hero-lead p:last-child {
  margin-bottom: 0;
}

/* The "what this process covers" line: the term's own words, set quietly */
.tax-hero-covers {
  max-width: 640px;
  padding-left: 14px;
  border-left: 2px solid var(--color-copper);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.tax-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.tax-hero-media {
  margin: 0;
}

.tax-hero-img {
  display: block;
  width: 100%;
}

.tax-hero-placeholder {
  width: 100%;
}

/* -------------------------------------------------------------
   02 Bands and the shared card grid
------------------------------------------------------------- */
.tax-section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.tax-band-white {
  background-color: #ffffff;
}

.tax-band-soft {
  background-color: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.tax-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* -------------------------------------------------------------
   03 Cards: image, title, text, chips or flags, link
------------------------------------------------------------- */
.tax-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.tax-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.tax-card-link:hover {
  color: inherit;
}

.tax-card-media {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  background-color: var(--color-surface-gray);
}

.tax-card-img {
  display: block;
  width: 100%;
}

.tax-card-placeholder {
  width: 100%;
  min-height: 220px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-surface-gray);
}

.tax-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 24px;
}

.tax-card-title {
  margin-bottom: 0;
  font-size: 1.125rem;
  color: var(--color-ink);
}

.tax-card-link:hover .tax-card-title {
  color: var(--color-accent);
}

.tax-card-text {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-body);
}

.tax-card-more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* Neutral labels: a chip only appears when the term or flag is really set */
.tax-chips,
.tax-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tax-chip {
  padding: 4px 10px;
  border-radius: 4px;
  background-color: rgba(23, 110, 166, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.tax-flag {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-surface-gray);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-body);
}/* -------------------------------------------------------------
   04 Related insights: the same card, with a date instead of an image
------------------------------------------------------------- */
.tax-insight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
}

.tax-insight-date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.tax-insight-title {
  margin-bottom: 0;
  font-size: 1.125rem;
}

.tax-insight-link {
  color: var(--color-ink);
}

.tax-insight-link:hover {
  color: var(--color-accent);
}

.tax-insight-text {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-body);
}

/* -------------------------------------------------------------
   05 Selection note (product category): the range continues elsewhere
------------------------------------------------------------- */
.tax-note {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-body);
}

.tax-note-text {
  display: block;
  margin-bottom: 10px;
}

.tax-note-link {
  display: inline-block;
  margin-right: 20px;
  font-weight: 600;
  color: var(--color-accent);
}

.tax-note-link:last-child {
  margin-right: 0;
}

.tax-note-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* -------------------------------------------------------------
   06 Empty state: one restrained sentence, no invented content
------------------------------------------------------------- */
.tax-empty-text {
  max-width: 720px;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-body);
}

.tax-empty-links {
  margin: 16px 0 0;
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------
   07 RFQ band: graphite, matching the site's other CTA bands
------------------------------------------------------------- */
.tax-rfq {
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: var(--color-ink);
}

.tax-rfq-inner {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.tax-rfq-title {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  color: #ffffff;
}

.tax-rfq-lead {
  max-width: 660px;
  margin: 0 auto 32px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #b5c3cb;
}

.tax-rfq-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* -------------------------------------------------------------
   08 Responsive: 3 -> 2 -> 1 columns, mobile rhythm
------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tax-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

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

  .tax-section {
    padding-top: var(--space-section-mobile);
    padding-bottom: var(--space-section-mobile);
  }

  .tax-card-body {
    padding: 20px;
  }

  .tax-insight {
    padding: 24px 20px;
  }

  .tax-note {
    margin-top: 32px;
  }

  .tax-rfq {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .tax-hero-actions .btn,
  .tax-rfq-actions .btn {
    width: 100%;
  }
}