/* ── Panelboard Configuration page ── */

body {
  background: #ffffff;
}

/* ── Hero — reuses .cc-hero (text + image, shared font sizes),
   overriding only the background to the NHP light blue. ── */
.pb-hero {
  background: #e0edf4;
}

/* The banner source is near-square. The band height is pinned by
   .cc-hero-inner's min-height (480px, same as cosy-club), so we can let the
   image grow into the spare vertical room — trimming the inner padding and
   capping the image height keeps it whole (no cropping) and as large as
   possible without making the band taller. */
.pb-hero .cc-hero-inner {
  /* Keep the 96px top padding so content clears the fixed nav; reclaim the
     extra image room from the bottom padding instead. */
  padding-bottom: 40px;
}

.pb-hero .cc-hero-media img {
  width: auto;
  max-width: 100%;
  max-height: 344px;
  margin: 0 auto;
}

/* ── Generic block under a centered heading ── */
.pb-block {
  width: 100%;
  margin-top: 48px;
}

.pb-subheading {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
}

/* ── Challenges / Solutions 3-column grid ── */
.pb-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.pb-cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pb-cell-title {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
}

.pb-cell-line {
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(0, 0, 0, 0.15);
}

.pb-cell-body {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

/* ── Audit section — full-bleed background ── */
.pb-audit-section {
  background: #fafafa;
  width: 100%;
}

.pb-audit-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px 64px;
}

/* ── Audit table — panelboard overrides ── */
.pb-audit-wrap {
  padding: 0;
}

.pb-audit th {
  font-size: 18px;
  text-align: center;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  background: transparent;
}

.pb-audit td {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* ── Audit table check / cross ── */
.pb-audit td.pb-yes,
.pb-audit td.pb-no {
  text-align: center;
  vertical-align: middle;
}

.pb-audit td.pb-yes img,
.pb-audit td.pb-no img {
  width: 32px;
  height: 32px;
  display: block;
  margin: 0 auto;
}

/* ── Persona ── */
.pb-persona {
  display: grid;
  grid-template-columns: 33% 1fr;
  gap: 0;
  margin-top: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.pb-persona-aside {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
}

.pb-persona-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

.pb-persona-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 4px 8px;
}

.pb-persona-name {
  font-family: 'Satoshi', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
}

.pb-persona-role {
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text);
}

/* Pill style — matches .tag on the main page */
.pb-persona-type {
  align-self: flex-start;
  display: inline-block;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.43;
  color: var(--red);
  background: rgba(253, 89, 86, 0.1);
  border: 1px solid rgba(253, 89, 86, 0.5);
  padding: 4px 14px;
  border-radius: 16px;
  white-space: nowrap;
  margin-bottom: 12px;
}

.pb-persona-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px;
}

.pb-persona-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.pb-persona-heading {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

/* ── Colour swatches ── */
.pb-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* Cap the row width so the shorter chips keep the swatch images' aspect
     ratio (≈1.35:1) — otherwise object-fit:cover crops them at full width. */
  max-width: 800px;
}

.pb-swatch {
  position: relative;
  flex: 1;
  min-width: 90px;
  overflow: hidden;
  border-radius: 16px;
}

.pb-swatch--wide {
  /* Black image is ~2.5:1 vs the others' ~1.35:1, so it needs ~1.85x their
     width (not 2x) to stay uncropped at the same height. */
  flex: 1.85;
}

.pb-swatch-chip {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/* Primary colour swatches — shrink-wrap to image content */
.pb-swatch--fit {
  flex: 0 0 auto;
}

.pb-swatch-chip--natural {
  height: 110px;
  width: auto;
  object-fit: fill;
}

.pb-swatch-chip--bordered {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.pb-swatch-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
}

.pb-swatch-label--dark .pb-swatch-name,
.pb-swatch-label--dark .pb-swatch-hex {
  color: rgba(0, 0, 0, 0.7);
}

.pb-swatch-name {
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
}

.pb-swatch-hex {
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  color: var(--text);
}

/* ── Typography image ── */
.pb-typography-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* ── UI screenshots — full-bleed #fafafa band (starts at the first image) ── */
.pb-ui-section {
  background: #fafafa;
  width: 100%;
  /* Pull up into <main>'s bottom padding to tighten the gap below the video. */
  margin-top: -32px;
}

.pb-ui-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* padding-top 0 (mirrors .pb-audit-inner); the band sits below <main>'s
     bottom padding, and the wireframe's own 48px padding-top gives the
     first image breathing room inside the band. */
  padding: 0 64px 64px;
}

/* ── Mobile design ── */
/* Desktop/tablet: single composited flow image (screens + connectors baked
   in). Hidden below the stack breakpoint, where individual screens read
   better than a shrunk-down flow diagram. */
.pb-mobile-flow-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

.pb-mobile-stack {
  display: none;
}

/* ── Responsive: swap the flow image for individually stacked screens ── */
@media (max-width: 700px) {
  .pb-mobile-flow-img {
    display: none;
  }

  .pb-mobile-stack {
    display: block;
    margin-top: 24px;
  }

  .pb-mobile-row {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 320px;
    margin: 0 auto;
  }

  .pb-mobile-row + .pb-mobile-row {
    margin-top: 40px;
  }

  .pb-mobile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    width: 100%;
  }

  .pb-mobile-screen {
    display: block;
    width: 100%;
    max-width: 282px;
    height: auto;
  }
}

/* ── Wireframe screenshot ── */
/* Text-left / image-right (selection1): text 5, image 7 */
.pb-wireframe-row.gb-wireframe--stacked {
  grid-template-columns: 5fr 7fr;
}

/* Image-left / text-right (video, circuit protection): image 7, text 5 —
   overrides --reverse's default 8/4 so the image keeps the same 7 share. */
.pb-wireframe-row.gb-wireframe--reverse {
  grid-template-columns: 7fr 5fr;
}

.pb-wireframe-screenshot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ── UI images ── */
/* Desktop: images on row 1, cards on row 2 (two columns). */
.pb-ui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.pb-ui-grid .pb-ui-screenshot {
  grid-row: 1;
  align-self: end;
}

.pb-ui-grid .pb-card {
  grid-row: 2;
}

.pb-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
}

.pb-ui-screenshot {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* ── Prototype — centred video on a soft grey (#fafafa) band ── */
.pb-prototype-section {
  background: #fafafa;
  width: 100%;
}

.pb-prototype-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Two blocks side by side: caption over video. Widths are proportional to each
   video's aspect ratio so both render the SAME height — tops and bottoms align. */
.pb-flow-item {
  text-align: center;
}

.pb-flow-item:nth-child(1) { width: 40%; }   /* add-components ~1.12:1 (square) */
.pb-flow-item:nth-child(2) { width: 57%; }   /* checkout ~1.59:1 (landscape) */

.pb-flow-caption {
  /* Body text style (matches .cc-body) */
  font-family: 'Satoshi', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  text-align: left;
  /* Rounded card, matching .pb-card */
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 16px 24px;
  /* Reserve two lines so the (1-line vs 2-line) caption boxes stay the same
     height. Caption sits below the video, with a gap above it. */
  min-height: 3.2em;
  margin-top: 32px;
}

.pb-flow-video {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Crop the black band baked into the top of the source .mp4 via an
   overflow-clipped wrapper, which also carries the (normal) box-shadow.
   aspect-ratio = source (3024x1964) minus the ~66px top band. */
.pb-flow-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 3024 / 1898;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  line-height: 0;
}

.pb-flow-crop .pb-flow-video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* ── Demo video — sits in a gb-wireframe--reverse block (video left, copy right) ── */
.pb-wireframe-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  /* Crop the thin black line baked into the right edge of the source .mp4 */
  clip-path: inset(0 2px 0 0 round 12px);
}

/* Soft shadow on the first video — applied to the wrapper, since the video's
   clip-path would otherwise clip the shadow away. */
.gb-wireframe-img:has(.pb-wireframe-video) {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pb-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 16px 24px;
}

.pb-card-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  /* Band side padding matches .cc-main on mobile */
  .pb-ui-inner {
    padding: 32px 24px 48px;
  }

  /* Prototype band — tighten padding, stack flow items full-width on mobile */
  .pb-prototype-inner {
    padding: 40px 24px;
    flex-direction: column;
  }

  .pb-flow-item,
  .pb-flow-item:nth-child(1),
  .pb-flow-item:nth-child(2) {
    width: 100%;
  }

  .pb-flow-item + .pb-flow-item {
    margin-top: 40px;
  }


  .pb-grid-3 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pb-persona {
    grid-template-columns: 1fr;
  }

  .pb-persona-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Single column: each card stacks directly under its image (source order) */
  .pb-ui-grid {
    grid-template-columns: 1fr;
  }

  .pb-ui-grid .pb-ui-screenshot,
  .pb-ui-grid .pb-card {
    grid-row: auto;
    align-self: auto;
  }

  /* Stack the guided-workflow wireframe on mobile, image/video always on
     top — overrides giselle's own .gb-wireframe--stacked order (text-first)
     so every UI Design block stacks the same way. */
  .pb-wireframe-row.gb-wireframe--stacked {
    grid-template-columns: 1fr;
  }

  .pb-wireframe-row.gb-wireframe--stacked .gb-wireframe-img {
    order: -1;
  }

  /* Stack image-left/text-right wireframes (start-your-project video,
     circuit protection, prototype checkout) on mobile/tablet. The 7fr/5fr
     rule above 900px is more specific than .gb-wireframe--reverse's own
     mobile stacking rule, so it needs its own override here. */
  .pb-wireframe-row.gb-wireframe--reverse {
    grid-template-columns: 1fr;
  }

  /* Stack all colour swatches one-per-row (Primary, Neutral, Semantics) */
  .pb-swatches {
    flex-direction: column;
  }

  .pb-swatch-chip {
    box-shadow: none;
  }

  /* Neutral swatches: fit whole image, left aligned */
  .pb-swatch-chip:not(.pb-swatch-chip--natural) {
    object-fit: contain;
    object-position: left;
  }
}

@media (max-width: 768px) {
  /* Sub-heading tier — 20px on mobile, matching giselle's .persona-sub-heading
     (24px→20px) and cosy-club's .cc-detail-title (20px flat). */
  .pb-subheading,
  .pb-card-title,
  .pb-persona-name,
  .pb-persona-heading { font-size: 20px; }

  /* Body text — drop 18px → 16px to match .cc-body (cosy club) */
  .pb-cell-body,
  .pb-audit th,
  .pb-audit td,
  .pb-flow-caption { font-size: 16px; }
}

/* Stacked audit table (≤640px, matches giselle): centre the row label */
@media (max-width: 640px) {
  .pb-audit .gb-audit-row-label {
    text-align: center;
  }

  /* Keep competitor labels in their authored case (e.g. "Loeb Electric") */
  .pb-audit td[data-label]::before {
    text-transform: none;
  }
}