/*
 * File: css/components/pages.css
 * Logic: Node page layouts (news, services, portfolio, case study) — structure + interaction.
 * Tokens: variables.css. Prose: utilities.css (.wsdt-prose).
 */

/* --------------------------------------------------------------------------
   Shared — node meta & taxonomy tag pills
   -------------------------------------------------------------------------- */

.wsdt-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--font-size-sm);
  opacity: var(--opacity-muted);
  border-bottom: var(--border-width-sm) solid var(--border-subtle);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.wsdt-node-meta .wsdt-author {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-500);
}

.field--name-field-news-categories,
.field--name-field-news-tags,
.field--name-field-services-reference {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  align-items: center;
}

.field--name-field-news-categories a,
.field--name-field-news-tags a,
.field--name-field-services-reference a {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-neutral-200);
  color: var(--text-body);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: var(--transition-interactive);
}

.field--name-field-news-categories a:hover,
.field--name-field-news-tags a:hover,
.field--name-field-services-reference a:hover,
.field--name-field-news-categories a:focus-visible,
.field--name-field-news-tags a:focus-visible,
.field--name-field-services-reference a:focus-visible {
  background-color: var(--color-accent-500);
  color: var(--text-on-accent-500);
  transform: translateY(var(--lift-sm));
}

@media (prefers-reduced-motion: reduce) {
  .field--name-field-news-categories a:hover,
  .field--name-field-news-tags a:hover,
  .field--name-field-services-reference a:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Generic node content shell
   -------------------------------------------------------------------------- */

.wsdt-node--news .wsdt-node-content,
.wsdt-node--services .wsdt-node-content,
.wsdt-node--single-portfolio .wsdt-node-content {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */

.wsdt-case-study {
  width: 100%;
  padding-block: var(--space-lg);
}

.wsdt-case-study-main-image,
.wsdt-node-main-image {
  margin-bottom: var(--space-lg);
}

.wsdt-case-study-main-image img,
.wsdt-node-main-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.wsdt-node-gallery {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.wsdt-case-study-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-primary-900);
}

.wsdt-case-study-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wsdt-case-study-content {
  margin-bottom: var(--space-xl);
}

.wsdt-case-study-content h2 {
  color: var(--color-accent-500);
  margin-top: var(--space-lg);
}

.wsdt-case-study-gallery,
.wsdt-case-study-gallery-before {
  margin-bottom: var(--space-xl);
}

.wsdt-case-study-gallery h3,
.wsdt-case-study-gallery-before h3,
.wsdt-case-study-related h3 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  color: var(--text-title);
}

.wsdt-case-study-related {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--border-width-sm) solid var(--border-subtle);
}

.wsdt-case-study-related + .wsdt-case-study-related {
  margin-top: var(--space-lg);
  padding-top: 0;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.wsdt-service-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .wsdt-service-layout {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    align-items: start;
  }
}

.top-intro-fieldset legend {
  display: none;
}

.top-intro-fieldset .fieldset-wrapper {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .top-intro-fieldset .fieldset-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}