/* ===========================================================================
   Single partner — detail page
   The partner's own work carries the page: their first project photo becomes
   an atmospheric, green-washed hero backdrop (show, don't tell). Crafted
   nameplate, editorial hairline spec column, showcase project grid.
   Tokens only — var(--dovetail-*), var(--font-*).
   =========================================================================== */

.pp-dd-page {
  background: var(--dovetail-bg);
  color: var(--dovetail-text);
}

.pp-dd-container {
  width: 100%;
  max-width: 1400px;          /* match the detail-page container (single-projects + header) */
  margin: 0 auto;
  padding-inline: 10px;
}

/* ── Hero — full-bleed Featured Image with overlaid content ── */
.pp-dd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 72vh;
  background: var(--dovetail-green-950);
  color: var(--dovetail-white);
  overflow: hidden;
  padding-top: clamp(120px, 16vh, 188px);
  padding-bottom: clamp(44px, 6vw, 80px);
}
.pp-dd-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  filter: saturate(0.95) brightness(0.92);
}
/* Green wash anchored to the BOTTOM (where the text sits) so type stays
   legible while the photo breathes through the middle. Soft dark vignette
   at the very top keeps the transparent header readable. */
.pp-dd-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--dovetail-green-950) 93%, transparent) 0%,
      color-mix(in srgb, var(--dovetail-green-950) 60%, transparent) 36%,
      color-mix(in srgb, var(--dovetail-green-950) 28%, transparent) 66%,
      color-mix(in srgb, var(--dovetail-green-950) 50%, transparent) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 24%);
}
/* No image → flat brand green is the graceful fallback. */
.pp-dd-hero:not(.has-bg) .pp-dd-hero-scrim {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 32%);
}
/* Container anchors the overlaid content to the bottom of the photo. */
.pp-dd-hero > .pp-dd-container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Overlaid content block, anchored to the bottom of the photo */
.pp-dd-hero-inner { position: relative; max-width: 62ch; }

/* Hero content */
.pp-dd-hero-content { min-width: 0; }

/* ── Business logo ──────────────────────────────────────────────────────────
   One slot, any logo. The mark is never cropped or stretched — it is
   contain-fitted and centred, so a circular badge, a square roundel and a long
   wordmark all sit correctly. The slot's WIDTH flexes by shape (set from the
   image's real aspect ratio in PHP) while its HEIGHT stays constant, which is
   what keeps a row of different partners feeling like one system.
   ------------------------------------------------------------------------- */
.pp-dd-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: clamp(76px, 8vw, 104px);
  margin-bottom: clamp(18px, 2.2vw, 26px);
  padding: clamp(10px, 1.2vw, 16px) clamp(14px, 1.6vw, 22px);
  border-radius: 5px;
  overflow: hidden;
}

/* Width by shape — a wordmark needs room to breathe, a tall mark does not. */
.pp-dd-logo--wide   { max-width: min(340px, 78vw); }
.pp-dd-logo--square { max-width: min(190px, 60vw); }
.pp-dd-logo--tall   { max-width: min(150px, 50vw); }

.pp-dd-logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Light plate — the default. Dark, coloured and multi-tone logos all stay
   legible on it, which the dark green header alone cannot guarantee. */
.pp-dd-logo--plate-light {
  background: var(--dovetail-white);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.65);
}

/* No plate — for logos that are already white. Sits straight on the photo,
   with a soft shadow so it holds up over a light patch of the image. */
.pp-dd-logo--plate-none {
  background: none;
  padding-inline: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
}

/* Monogram fallback when no logo has been uploaded yet. */
.pp-dd-logo.is-monogram {
  aspect-ratio: 1;
  max-width: none;
  width: clamp(76px, 8vw, 104px);
  padding: 0;
  background: var(--dovetail-taupe-500);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.65);
}
.pp-dd-logo-mono {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--dovetail-dark);
}

.pp-dd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.pp-dd-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  border: 1px solid rgba(252, 250, 245, 0.34);
  border-radius: 999px;
  background: rgba(20, 36, 28, 0.28);
  backdrop-filter: blur(2px);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(252, 250, 245, 0.94);
}
.pp-dd-badge--type {
  background: var(--dovetail-taupe-500);
  border-color: var(--dovetail-taupe-500);
  color: var(--dovetail-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}

.pp-dd-name {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--dovetail-white);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}
.pp-dd-tagline {
  margin: 16px 0 0;
  max-width: 48ch;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.4;
  color: var(--dovetail-taupe-300);
}

.pp-dd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 24px;
}
.pp-dd-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(252, 250, 245, 0.86);
}
.pp-dd-meta-item svg { color: var(--dovetail-taupe-300); flex: 0 0 auto; }

.pp-dd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: clamp(26px, 3.2vw, 38px);
}
.pp-dd-website {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  background: var(--dovetail-off-white);
  color: var(--dovetail-dark);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-dd-website:hover {
  background: var(--dovetail-white);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.5);
}

.pp-dd-socials { display: inline-flex; gap: 10px; }
.pp-dd-social {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(252, 250, 245, 0.32);
  border-radius: 999px;
  color: var(--dovetail-white);
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.pp-dd-social:hover {
  background: var(--dovetail-taupe-500);
  border-color: var(--dovetail-taupe-500);
  color: var(--dovetail-dark);
  transform: translateY(-3px);
}

/* ── Body ── */
.pp-dd-body {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.pp-dd-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 28%, 340px);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.pp-dd-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  /* !important defeats the theme's forced serif on headings, so the "About"
     h2 keeps the Roboto eyebrow look while remaining a real heading. */
  font-family: var(--font-body) !important;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dovetail-taupe-700);
}

/* Bio prose — generous measure, real lead, proper image handling */
.pp-dd-prose {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--dovetail-text-soft);
  max-width: none;        /* fill the bio column (client preference: wide measure) */
}
.pp-dd-prose > :first-child { margin-top: 0; }
.pp-dd-prose > p:first-of-type {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.65;
  color: var(--dovetail-text);
}
.pp-dd-prose p { margin: 0 0 1.2em; }
.pp-dd-prose a { color: var(--dovetail-accent-strong); text-underline-offset: 3px; }
.pp-dd-prose h2,
.pp-dd-prose h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--dovetail-text);
  margin: 1.6em 0 0.5em;
}
/* Neutralise editor float/align so images read as deliberate, full-width
   plates rather than small awkwardly-wrapped thumbnails. WordPress adds
   srcset, so the browser still pulls a sharp source at the rendered size. */
.pp-dd-prose img,
.pp-dd-prose figure {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.2em 0;
}
.pp-dd-prose figure img { width: 100%; height: auto; display: block; margin: 0; }
.pp-dd-prose .alignleft,
.pp-dd-prose .alignright,
.pp-dd-prose .aligncenter { float: none; width: 100%; margin: 2.2em 0; }
.pp-dd-prose figcaption {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--dovetail-text-muted);
}

/* Info — open editorial spec column (no boxy card), sticky on desktop */
.pp-dd-info { position: sticky; top: 104px; }
.pp-dd-info-title {
  margin: 0 0 6px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--dovetail-dark);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--dovetail-text);
}
.pp-dd-facts { margin: 0; }
.pp-dd-fact { padding: 15px 0; border-bottom: 1px solid var(--dovetail-border); }
.pp-dd-fact dt {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dovetail-text-muted);
  margin-bottom: 5px;
}
.pp-dd-fact dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--dovetail-text);
}

.pp-dd-specialties { margin-top: 22px; }
.pp-dd-specialties-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dovetail-text-muted);
}
.pp-dd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pp-dd-chip-tag {
  padding: 7px 14px;
  background: var(--dovetail-surface);
  border: 1px solid var(--dovetail-border);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--dovetail-text-soft);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.pp-dd-chip-tag:hover { border-color: var(--dovetail-taupe-300); color: var(--dovetail-text); }

/* ── Projects together — the showcase ── */
.pp-dd-projects {
  margin-top: clamp(52px, 7vw, 96px);
  padding-top: clamp(44px, 5vw, 68px);
  border-top: 1px solid var(--dovetail-border);
}
.pp-dd-projects-head { margin-bottom: clamp(26px, 3vw, 40px); }
.pp-dd-projects-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--dovetail-text);
}
.pp-dd-proj-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.pp-dd-proj-card { margin: 0; }
.pp-dd-proj-card a { display: block; text-decoration: none; color: inherit; }
.pp-dd-proj-card a:focus-visible { outline: 2px solid var(--dovetail-accent); outline-offset: 4px; }
.pp-dd-proj-img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--dovetail-taupe-100);
}
.pp-dd-proj-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 36, 28, 0.32), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.pp-dd-proj-card a:hover .pp-dd-proj-img::after { opacity: 1; }
.pp-dd-proj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-dd-proj-card a:hover .pp-dd-proj-img img { transform: scale(1.06); }
.pp-dd-proj-info { padding: 18px 2px 0; }
.pp-dd-proj-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--dovetail-text);
  transition: color 0.25s ease;
}
.pp-dd-proj-card a:hover .pp-dd-proj-name { color: var(--dovetail-accent-strong); }
.pp-dd-proj-meta {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--dovetail-text-muted);
}

/* CTA banner: shared partial parts/cta-banner.php, styled in components.css.
   The dd-cta sits flush after the page body; the body wrapper's own
   bottom spacing provides the gap. */

@media (prefers-reduced-motion: reduce) {
  .pp-dd-back, .pp-dd-website, .pp-dd-social, .pp-dd-chip-tag,
  .pp-dd-proj-img img, .pp-dd-proj-img::after, .pp-dd-proj-name {
    transition: none;
  }
  .pp-dd-hero-bg { transform: none; }
}

/* ── Responsive ── */
@media (max-width: 880px) {
  .pp-dd-container { padding-inline: 24px; }
  .pp-dd-hero { min-height: clamp(480px, 76vh, 640px); }
  .pp-dd-main-row { grid-template-columns: 1fr; }
  .pp-dd-info { position: static; }
  .pp-dd-col-right { order: -1; }
}
@media (max-width: 600px) {
  .pp-dd-proj-grid { grid-template-columns: 1fr; }
  .pp-dd-logo { height: 68px; margin-bottom: 16px; }
  .pp-dd-logo.is-monogram { width: 68px; }
}