/* PStyle — Industries styles (loaded on industry archive/single).
   main.css (global) is already loaded; only industry-specific rules live here.
   Luxury minimalism: seven large image-led cards, single-industry section
   blocks (Challenges · Solutions · Featured Projects · Recommended Products).
   Accent only for section labels + links. Responsive 375 → 1440.
   All raw values come from tokens.css via var(--…). */

/* ============================================================ Archive intro */
/* padding-bottom was 0 while intro and grid were both white; on the muted
   surface (2026-08-12) the band needs a closing edge. See projects.css. */
.ps-industries-intro {
  padding-bottom: var(--sp-5);
}

.ps-industries-intro__head {
  max-width: var(--container-narrow);
}

.ps-industries-intro__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.ps-industries-intro__lead {
  max-width: 60ch;
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================ Archive grid
   Large, image-led cards. Two per row on desktop for a magazine feel; the
   image dominates and the copy sits beneath a hairline. */
.ps-industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-5);
}

.ps-industry-card {
  min-width: 0;
}

.ps-industry-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
}

.ps-industry-card__link:hover,
.ps-industry-card__link:focus-visible {
  color: var(--ink);
}

.ps-industry-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.ps-industry-card__media .ps-media,
.ps-industry-card__media .ps-ph {
  transition: transform var(--dur) var(--ease);
}

.ps-industry-card__link:hover .ps-media,
.ps-industry-card__link:hover .ps-ph,
.ps-industry-card__link:focus-visible .ps-media,
.ps-industry-card__link:focus-visible .ps-ph {
  transform: scale(1.03);
}

.ps-industry-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ps-industry-card__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.05;
  color: var(--ink);
}

.ps-industry-card__tagline {
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--accent);
}

.ps-industry-card__intro {
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--muted);
}

.ps-industry-card__more {
  margin-top: var(--sp-1);
  color: var(--ink);
}

.ps-industry-card__link:hover .ps-industry-card__more,
.ps-industry-card__link:focus-visible .ps-industry-card__more {
  color: var(--accent);
}

/* Gentle stagger across the two-column rows. */
.ps-industry-card.ps-reveal:nth-child(2n) { transition-delay: 0.08s; }

/* ============================================================ Single: intro */
.ps-industry-intro {
  padding-bottom: var(--sp-6);
}

.ps-industry-intro__inner {
  max-width: var(--container-narrow);
}

.ps-industry-intro__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.ps-industry-intro__tagline {
  margin: 0 0 var(--sp-4);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--accent);
}

.ps-industry-intro__lead {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.3;
  color: var(--ink);
}

.ps-industry-intro__lead p {
  margin: 0 0 0.6em;
}

/* ============================================================ Single: Challenges / Solutions
   Ground: .ps-surface--muted in single-industry.php. No background declaration
   here on purpose — this file loads after main.css, so a per-template
   `background` would beat the surface utility and the class would lose silently. */
.ps-industry-cs {
  border-block: 1px solid var(--line);
}

.ps-industry-cs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.ps-industry-cs__heading {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--accent);
}

.ps-industry-cs__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ps-industry-cs__item {
  position: relative;
  padding-left: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--w-reg);
  line-height: 1.35;
  color: var(--ink);
}

.ps-industry-cs__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 18px;
  height: 1px;
  background: var(--accent);
}

/* Solutions column gets a quiet left hairline to separate the two lists. */
@media (min-width: 761px) {
  .ps-industry-cs__block--solutions {
    padding-left: var(--sp-6);
    border-left: 1px solid var(--line);
  }
}

/* ============================================================ Single: section head (Projects / Products) */
.ps-industry-section__head {
  margin-bottom: var(--sp-5);
}

.ps-industry-section__heading {
  margin: 0;
  font-size: var(--step-3);
  font-weight: var(--w-reg);
}

/* Grounds: .ps-industry-projects = .ps-surface--white,
   .ps-industry-products = .ps-surface--muted (both set in single-industry.php).
   Only the products section keeps a declaration, and only its hairlines. */
/* Conditional-section correction, the mirror case. "Challenges & Solutions"
   (muted) only renders when the industry has challenges or solutions filled in.
   An industry WITH featured projects but WITHOUT them would put the white intro
   straight against the white "Selected Work" — a ~1635px white run. None of the
   seven current industries trigger it, but it is one client edit away, and it is
   the same family as the three corrections below. */
.ps-industry-intro + .ps-industry-projects {
  background: var(--surface-2);
}

.ps-industry-intro + .ps-industry-projects .ps-project-card__media,
.ps-industry-intro + .ps-industry-projects .ps-media {
  background: var(--surface-1);
}

/* …and the knock-on: with "Selected Work" pushed onto the muted ground, Products
   below it has to take the white one, or the correction just moves the collision
   one section down. The four states of (challenges present?, projects present?)
   were each measured; all four alternate. */
.ps-industry-intro + .ps-industry-projects + .ps-industry-products {
  background: var(--surface-1);
}

.ps-industry-intro + .ps-industry-projects + .ps-industry-products .ps-product-mini__media {
  background: var(--surface-2);
}

/* Conditional-section correction. "Selected Work" (white) only renders when the
   industry has featured projects — Corporate and Logistics have none, which left
   Challenges (muted) running straight into Products (muted) as one ~1500px grey
   band, i.e. the client's original complaint transposed from white to grey. When
   the white section is missing, Products takes the white ground instead, and its
   product thumbnails swap to the muted tone so they still read as cards. */
.ps-industry-cs + .ps-industry-products {
  background: var(--surface-1);
}

.ps-industry-cs + .ps-industry-products .ps-product-mini__media {
  background: var(--surface-2);
}

.ps-industry-products {
  border-block: 1px solid var(--line);
}

/* ============================================================ Single: Recommended products */
.ps-industry-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-4);
}

.ps-product-mini {
  min-width: 0;
}

.ps-product-mini__link {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.ps-product-mini__link:hover,
.ps-product-mini__link:focus-visible {
  color: var(--ink);
}

/* White media ground is load-bearing: these cards sit on the muted
   .ps-industry-products section, and a --warm-grey placeholder ground would
   merge into it. main.css flips this to --surface-elevated-dark inside a dark
   surface. */
.ps-product-mini__media {
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background: var(--white);
}

.ps-product-mini__media .ps-media,
.ps-product-mini__media .ps-ph {
  transition: transform var(--dur) var(--ease);
}

.ps-product-mini__link:hover .ps-media,
.ps-product-mini__link:hover .ps-ph,
.ps-product-mini__link:focus-visible .ps-media,
.ps-product-mini__link:focus-visible .ps-ph {
  transform: scale(1.03);
}

.ps-product-mini__title {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.1;
}

.ps-product-mini__desc {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--muted);
}

.ps-product-mini__more {
  color: var(--ink);
}

.ps-product-mini__link:hover .ps-product-mini__more,
.ps-product-mini__link:focus-visible .ps-product-mini__more {
  color: var(--accent);
}

/* ============================================================ Single: CTA
   Ground + inversion come from .ps-surface--dark ps-on-dark in single-industry.php.
   The former per-section overrides are dropped because the shared dark scope
   computes to the same values (measured): section colour = var(--white);
   .ps-eyebrow reads var(--muted) → --muted-invert (rgba(255,255,255,0.66));
   h2 reads var(--ink) → var(--white). The primary button keeps --accent. */
.ps-industry-cta__inner {
  max-width: var(--container-narrow);
  text-align: center;
  margin-inline: auto;
}

.ps-industry-cta__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
}

/* ============================================================ Responsive */
@media (max-width: 980px) {
  .ps-industry-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-4);
  }
}

@media (max-width: 760px) {
  .ps-industries-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .ps-industry-cs__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

@media (max-width: 560px) {
  .ps-industry-products__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ============================================================ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ps-industry-card__link:hover .ps-media,
  .ps-industry-card__link:hover .ps-ph,
  .ps-industry-card__link:focus-visible .ps-media,
  .ps-industry-card__link:focus-visible .ps-ph,
  .ps-product-mini__link:hover .ps-media,
  .ps-product-mini__link:hover .ps-ph,
  .ps-product-mini__link:focus-visible .ps-media,
  .ps-product-mini__link:focus-visible .ps-ph {
    transform: none;
  }
}