/* TPPA v16: closed 17-hub preview layer. The four approved t-pages keep their
   existing geometry; these selectors activate only for structured hub drafts. */

html[data-tone="construction"] {
  --accent: #9a6b32;
  --accent-dark: #6c491f;
  --accent-soft: #eee4d5;
}

html[data-tone="resources"] {
  --accent: #397c74;
  --accent-dark: #245851;
  --accent-soft: #dfece9;
}

html[data-tone="hospitality"] {
  --accent: #a35f37;
  --accent-dark: #734026;
  --accent-soft: #f0e1d7;
}

html[data-tone="realty"] {
  --accent: #6f7a8c;
  --accent-dark: #485363;
  --accent-soft: #e5e8ed;
}

html[data-tone="manufacturing"] {
  --accent: #586b52;
  --accent-dark: #394936;
  --accent-soft: #e2e8df;
}

html[data-tone="wholesale"] {
  --accent: #8d5a74;
  --accent-dark: #623d50;
  --accent-soft: #eee2e8;
}

html[data-tone="transport"] {
  --accent: #4b7698;
  --accent-dark: #2c526f;
  --accent-soft: #e0eaf1;
}

html[data-tone="ved"] {
  --accent: #2c526f;
  --accent-dark: #18384f;
  --accent-soft: #dce7ee;
}

.hub-preview-notice {
  display: flex;
  min-width: 0;
  min-height: 42px;
  padding: 9px max(var(--page-pad), calc((100vw - 1480px) / 2 + var(--page-pad)));
  align-items: center;
  justify-content: space-between;
  gap: var(--module-gap);
  border-bottom: 1px solid #b78a37;
  background: #272824;
  color: #fff;
  font: 600 13px/1.35 var(--font-sans);
}

.hub-preview-notice strong {
  color: #e5c071;
  font-size: 14px;
  white-space: nowrap;
}

.page-hub .service-age__caption {
  overflow-wrap: anywhere;
  text-wrap: balance;
  white-space: normal;
}

.page-hub .card-grid--hub-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--module-gap);
}

.page-hub .card-grid--hub-coverage .content-card {
  isolation: isolate;
  min-width: 0;
  min-height: 236px;
  overflow: hidden;
  border-color: var(--card-accent, var(--accent));
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 62%, #fff);
  background: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--accent)) 8%, #fff), #fff 68%);
}

.page-hub .card-grid--hub-coverage .content-card__background {
  opacity: .09;
  filter: grayscale(.22) saturate(.72) contrast(.92);
}

.page-hub .card-grid--hub-coverage .content-card--with-background::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,.94) 0 38%, rgba(255,255,255,.66) 78%);
  content: "";
  pointer-events: none;
}

.page-hub .card-grid--hub-coverage .content-card--with-background > :not(.content-card__background) {
  position: relative;
  z-index: 2;
}

.page-hub .card-grid--hub-coverage .content-card__icon {
  width: 52px;
  height: 52px;
  border-color: var(--card-accent, var(--accent));
  background: var(--card-accent, var(--accent));
  color: #fff;
}

.page-hub .card-grid--hub-coverage .content-card__icon svg {
  width: 28px;
  height: 28px;
}

.page-hub .card-grid--hub-coverage .content-card:hover,
.page-hub .card-grid--hub-coverage .content-card:focus-within {
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--accent)) 15%, #fff), #fff 72%);
  transform: translateY(-2px);
}

.page-hub .page-rail__publications:has(ol:empty) {
  display: none;
}

@media (max-width: 1023.98px) {
  .page-hub .card-grid--hub-coverage {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .hub-preview-notice {
    display: grid;
    padding: 9px 14px;
    gap: 2px;
  }

  .hub-preview-notice strong {
    white-space: normal;
  }

  .page-hub .card-grid--hub-coverage .content-card {
    min-height: 0;
  }

  .page-hub .service-age__caption {
    line-height: 1.14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hub .card-grid--hub-coverage .content-card {
    transition: none;
  }
}