/* ============================================================
   INDUSTRY.CSS — page-specific styles for template-industry.php
   Shared utilities (.two-col, .section-label, .body-copy, .btn,
   .btn-group, .page-section, .reveal) already come from style.css,
   about.css, and nav.css, which load globally.

   NOTE ON SIZING: this file uses fluid clamp() throughout rather
   than fixed pixel values, so the hero and headings scale smoothly
   at every width instead of needing extra breakpoint patches later
   (the gap we found and fixed on Our Model / Pluralytics).
   ============================================================ */

/* ============================================================
   HERO — single column, same structure as Our Model / Pluralytics
   ============================================================ */
.industry-hero.om-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-black, #141414);
}
.industry-hero .om-hero__image {
  width: 100%;
  height: 72vh;
  min-height: 480px;
  max-height: 700px;
  overflow: hidden;
  position: relative;
}
.industry-hero .om-hero__image img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 30%;
}
.industry-hero .om-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.35) 55%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.industry-hero .om-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 4;
}
.industry-hero .om-hero__content .container {
  display: grid;
  grid-template-columns: 1fr;
}
.industry-hero .section-eyebrow {
  display: block;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.industry-hero .om-hero__headline {
  color: #fff;
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 96px;
  font-style: normal;
  font-weight: 400;
  line-height: 86px; /* 89.583% */
  letter-spacing: -2px;
  text-transform: uppercase;
}
.industry-hero .om-hero__headline em {
  color: var(--color-red, #ed1c24);
  font-style: normal;
  display: block;
}
.industry-hero .om-hero__sub {
  color: rgba(255, 255, 255, 0.7);
  font-family: "Noto Sans";
  font-size: 15.4px;
  font-style: normal;
  font-weight: 400;
  line-height: 31.48px; /* 184.935% */
  margin-top: 22px;
  max-width: 537px;
}
.industry-hero .btn-group {
  margin-top: 36px;
}

/* ============================================================
   INTRO — full-width impact statement, no label column
   ============================================================ */
.industry-intro {
  background: #fff;
}
.industry-intro__statement {
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-black, #141414);
  line-height: 1.35;
  letter-spacing: -0.3px;
  border-left: 4px solid var(--color-red, #ed1c24);
  padding-left: 20px;
  max-width: 1000px;
  margin-bottom: 40px;
}
.industry-intro__statement em {
  color: var(--color-red, #ed1c24);
  font-style: normal;
}
.industry-intro__body {
  max-width: 850px;
}

/* ============================================================
   WHAT DRIVES [X] GUESTS — pull quote
   ============================================================ */
.industry-pull-quote {
  padding: 4px 0 4px 0;
  margin-bottom: 36px;
  font-family: var(--font-body, "Noto Sans", sans-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--color-black, #141414);
  line-height: 1.5;
}

/* ============================================================
   CAPABILITIES — flip cards
   ============================================================ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cap-card {
  height: 160px;
  perspective: 1000px;
  cursor: default;
}
.cap-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.cap-card:hover .cap-card-inner,
.cap-card:focus-within .cap-card-inner {
  transform: rotateY(180deg);
}
.cap-card-front,
.cap-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cap-card-front {
  background: var(--color-off, #f8f7f5);
}
.cap-card-back {
  background: var(--color-red, #ed1c24);
  transform: rotateY(180deg);
}
.cap-card-front h3 {
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-black, #141414);
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
}
.cap-card-back p {
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.8;
  margin: 0;
}

/* Headers stack above content instead of sitting beside it —
   Industry template only, other pages using .two-col keep the
   side-by-side layout. */
.page-template-template-industry .two-col {
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ============================================================
   CLIENT WORK MATRIX
   ============================================================ */
.client-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--color-line, #e8e6e2);
}
.client-tile {
  background: #fff;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.client-tile:hover .client-name {
  color: var(--color-black, #141414);
}
.client-tile:hover .client-tag {
  opacity: 1;
}
.client-tile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
}
.client-tile__logo {
  max-width: 190px;
  max-height: 96px;
  width: auto;
  height: auto;
}
.client-name {
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-mid, #888);
  transition: color 0.2s;
  line-height: 1;
}
.client-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-red, #ed1c24);
  opacity: 0;
  transition: opacity 0.2s;
}

/* When there's only one tile, the grid would otherwise still
   reserve 4 columns — leaving 3 empty cells showing the grid's
   gap background. Keep the tile itself the normal small size and
   white background; just match the grid's own background to the
   section so the empty leftover space blends in instead of
   showing as a mismatched grey field. */
.client-grid--single {
  background: var(--color-off, #f8f7f5);
}

.industry-news .section-label em {
  color: var(--color-red, #ed1c24);
  font-style: normal;
}

/* ============================================================
   relevANT NEWS — blog cards
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-card {
  background: var(--color-off, #f8f7f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.blog-card-img {
  aspect-ratio: 16 / 9;
  background: #eeece9;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover .blog-card-img img {
  transform: scale(1.04);
}
.blog-img-placeholder {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #bbb;
}
.blog-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-red, #ed1c24);
  margin-bottom: 12px;
  display: block;
}
.blog-card-body h3 {
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-black, #141414);
  line-height: 1.05;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
}
.blog-card-body h3 a {
  color: inherit;
  text-decoration: none;
}
.blog-card-body p {
  font-size: 13px;
  font-weight: 300;
  color: #666;
  line-height: 1.75;
  flex: 1;
  margin-bottom: 20px;
}
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-red, #ed1c24);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.18s;
}
.blog-read-more::after {
  content: "→";
}
.blog-read-more:hover {
  gap: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .client-tile__logo {
    max-width: 140px;
    max-height: 72px;
  }
}
@media (max-width: 1024px) {
  .industry-hero .om-hero__headline {
    font-size: clamp(52px, 7.5vw, 96px);
    line-height: 0.92;
  }

  .cap-grid {
    grid-template-columns: 1fr 1fr;
  }
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .industry-hero .om-hero__image {
    height: 52vh;
    min-height: 380px;
    max-height: 480px;
  }
  .industry-hero .om-hero__content {
    padding-bottom: 40px;
  }
  .industry-hero .om-hero__sub {
    max-width: 100%;
  }

  .industry-intro__statement {
    font-size: 36px;
    margin-bottom: 32px;
  }
  .industry-intro__body {
    max-width: 100%;
  }

  /* Capability cards — flip-on-hover doesn't work on touch, so show
     both the title and description stacked as plain content instead */
  .cap-grid {
    grid-template-columns: 1fr;
  }
  .cap-card {
    height: auto;
    perspective: none;
  }
  .cap-card-inner {
    position: static;
    transform: none !important;
    transition: none;
  }
  .cap-card-front,
  .cap-card-back {
    position: static;
    backface-visibility: visible;
    transform: none;
  }
  .cap-card-front {
    padding-bottom: 20px;
  }
  .cap-card-back {
    padding-top: 20px;
  }

  .client-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .industry-hero .om-hero__image {
    height: 48vh;
    min-height: 340px;
    max-height: 420px;
  }
  .industry-hero .om-hero__headline {
    font-size: clamp(34px, 10vw, 48px);
  }
  .industry-intro__statement {
    font-size: 28px;
    padding-left: 16px;
  }
  .client-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .client-tile__logo {
    max-width: 104px;
    max-height: 56px;
  }
}