/**
 * Shared horizontal rhythm: header, breadcrumbs, main, and footer use `.shell`
 * with the same inset so edges line up on all viewports.
 * Load immediately after css/design-system.css.
 */

.shell {
  box-sizing: border-box;
  /* Guard against accidental full-bleed shell overrides from bundled CSS. */
  width: min(var(--max-content, 1180px), calc(100% - clamp(2rem, 6vw, 4.5rem)));
  margin-inline: auto;
  padding-inline: clamp(0.65rem, 2.25vw, 1.125rem);
}

nav.shell.cpd-breadcrumbs {
  box-sizing: border-box;
  /* Clear separation from sticky header and from the page title / eyebrow below */
  padding-top: clamp(1.25rem, 4vw, 2rem);
  padding-bottom: 0.35rem;
  margin-top: 0;
  margin-bottom: var(--space-md, 1.25rem);
}

nav.shell.cpd-breadcrumbs .cpd-breadcrumbs__list {
  line-height: 1.5;
}

/* Blog detail: use full shell width (avoid a second, narrower column inside main.shell) */
.blog-detail-wrap {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Comfortable measure for article body copy only (headline / hero stay full width) */
#cpd-blog-detail-content > p,
#cpd-blog-detail-content > ul,
#cpd-blog-detail-content > ol,
#cpd-blog-detail-content > blockquote {
  max-width: var(--max-read, 72ch);
}

/* Root participates in viewport height so flex layouts (footer at bottom) behave consistently. */
html {
  min-height: 100%;
  min-height: 100dvh;
}

/*
 * Sticky footer layout (marketing pages): design-system sets .site-footer { margin-top: auto }.
 * Footer scrolls with the document; viewport-fixed quick-actions appear only on the homepage via sticky-actions.css.
 */
body:not(.admin-body) {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body:not(.admin-body) > main {
  flex: 1 1 auto;
  min-height: 0;
  /* Do NOT set width: 100% here — it would override .shell's calc(100% - 2.5rem) width
     constraint (body > main has higher specificity than .shell), removing all side gutters. */
  align-self: stretch;
  box-sizing: border-box;
}

/*
 * blog.html: <main> lives inside list/detail panels, not directly under body.
 * Only style visible panels — `display:flex` would override `[hidden]` and show both LOADING… and list.
 */
body:not(.admin-body) > #cpd-blog-detail-panel:not([hidden]),
body:not(.admin-body) > #cpd-blog-list-panel:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body:not(.admin-body) > #cpd-blog-detail-panel:not([hidden]) > main,
body:not(.admin-body) > #cpd-blog-list-panel:not([hidden]) > main {
  flex: 1 1 auto;
  min-height: 0;
}

body:not(.admin-body) > footer.site-footer {
  margin-top: auto;
  flex-shrink: 0;
  /* Footer spans full viewport width intentionally (background extends edge-to-edge).
     Inner .shell children handle their own horizontal gutters. */
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/*
 * Injected overlays (site-search), deferred scripts, toasts — must not steal flex growth
 * or margin-top:auto space from the footer (especially after first paint).
 */
body:not(.admin-body) > script {
  display: none !important;
}

body:not(.admin-body) > #cp-site-search-shell {
  flex: none;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

body:not(.admin-body) > .mobile-sticky-menu {
  flex: none;
  flex-grow: 0;
  flex-shrink: 0;
  /* width: 100%; */
}

body:not(.admin-body) > .cp-toast-host {
  flex: none;
  flex-grow: 0;
  flex-shrink: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Space between Related portfolio CTA and Pricing section */
body.cpd-service-page #cpd-svc-pricing-wrap {
  margin-top: clamp(1.75rem, 4.5vw, 2.75rem);
}

/* Space between Pricing band and the block below (Impact stats / Blogs / etc.) */
body.cpd-service-page #cpd-svc-pricing-wrap + section.shell.stack-lg {
  padding-top: clamp(1.75rem, 4.5vw, 2.75rem);
}

/* ─────────────────────────────────────────────────────────────────────────
   Blog detail — alignment fixes
   The breadcrumb nav.shell is injected as first child of main.shell.
   main.shell overrides horizontal padding to 0 (inline style), so the nav's
   own shell padding-inline would push it further right than the title/eyebrow.
   Zero it out so breadcrumb left-edge matches the title.
   ──────────────────────────────────────────────────────────────────────── */
#cpd-blog-detail-panel main.shell > nav.cpd-breadcrumbs,
#cpd-blog-detail-panel main.shell > nav.shell.cpd-breadcrumbs,
#cpd-blog-detail-panel main.shell > #cpd-breadcrumbs-nav {
  padding-inline: 0 !important;
  padding-top: 0.65rem;
  padding-bottom: 0;
  margin-bottom: 0.75rem;
  width: auto;
  max-width: none;
}

/* Consistent top gap between breadcrumb and eyebrow / title */
#cpd-blog-detail-panel .blog-detail-wrap {
  padding-top: 0;
}

#cpd-blog-detail-panel .blog-detail-wrap .section-eyebrow {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.cpd-blog-detail-main {
  padding-top: 0.5rem;   /* breadcrumb nav provides the visual top gap */
  padding-bottom: 4rem;
  padding-left: 0;
  padding-right: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Portfolio detail page readability + spacing */
.cpd-portfolio-detail-main {
  padding-top: 0.5rem;
  padding-bottom: 3rem;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

/* When breadcrumb nav is the first child of .shell main, neutralise its own
   shell padding (it inherits the parent container's inset already) and reduce
   the top gap so it sits tight below the site header. */
.cpd-portfolio-detail-main > nav.cpd-breadcrumbs,
.cpd-portfolio-detail-main > nav.shell.cpd-breadcrumbs,
.cpd-portfolio-detail-main > #cpd-breadcrumbs-nav {
  padding-inline: 0 !important;
  padding-top: 0.75rem;
  padding-bottom: 0;
  margin-bottom: 0;
  width: auto;
  max-width: none;
}

/* Cover image — break out of shell's horizontal padding so it spans full column width */
.cpd-portfolio-detail-main > figure#cpd-portfolio-image-wrap {
  margin-inline: calc(-1 * clamp(0.65rem, 2.25vw, 1.125rem));
  border-radius: 0;
  max-width: none;
  width: calc(100% + 2 * clamp(0.65rem, 2.25vw, 1.125rem));
}

/* View PDF / file — only below hero image, centered */
.cpd-portfolio-detail-main > p#cpd-portfolio-view-wrap.cpd-portfolio-view-below-cover {
  margin: 0.65rem 0 0;
  padding: 0;
  text-align: center;
}

.cpd-portfolio-detail-main > p#cpd-portfolio-view-wrap.cpd-portfolio-view-below-cover .btn {
  display: inline-flex;
}

/* Hero header — title, then meta row (date + industry + service tags); file CTA sits below cover */
.cpd-portfolio-hero-header {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.35rem 0 0.75rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* The row div that holds tag + date + service badges */
#cpd-portfolio-services-wrap .tag {
  margin: 0;
}

/* Separator dot after date when the row also has tags */
.cpd-portfolio-uploaded-date:not([hidden]) + #cpd-portfolio-industry::before {
  content: "·";
  color: var(--ink-muted, #888);
  font-size: 0.85rem;
  padding-inline-end: 0.25rem;
}

.cpd-portfolio-hero-header #cpd-portfolio-title {
  margin: 0;
  line-height: 1.15;
}

.cpd-portfolio-hero-header #cpd-portfolio-meta {
  margin: 0;
  color: var(--ink-muted, #555);
}

.cpd-portfolio-uploaded-date {
  margin: 0;
  color: var(--ink-muted, #888);
  font-size: 0.8125rem;
}

.cpd-portfolio-detail-content #cpd-portfolio-content {
  line-height: 1.75;
}

.cpd-portfolio-detail-content #cpd-portfolio-content > :first-child {
  margin-top: 0;
}

.cpd-portfolio-detail-content #cpd-portfolio-content > :last-child {
  margin-bottom: 0;
}

.cpd-portfolio-detail-content #cpd-portfolio-content p,
.cpd-portfolio-detail-content #cpd-portfolio-content li,
.cpd-portfolio-detail-content #cpd-portfolio-content blockquote {
  max-width: var(--max-read, 72ch);
}

/* ── Our services — 4-column category grid below portfolio content ── */
#cpd-portfolio-related-services-wrap {
  padding: 0;
}

.cpd-related-services-title {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted, #888);
  font-weight: 600;
}

/* Reuse as a grid container instead of a <ul> */
.cpd-related-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .cpd-related-services-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg, 2rem) var(--space-md, 1.25rem);
  }
}

@media (min-width: 900px) {
  .cpd-related-services-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg, 2rem) var(--space-md, 1.25rem);
  }
}

/* Each column is a category group */
.cpd-svc-group {
  display: flex;
  flex-direction: column;
}

/* Accordion toggle button (visible on mobile only) */
.cpd-svc-group-toggle {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  box-sizing: border-box;
}

.cpd-svc-group-toggle-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
  color: var(--ink-muted, #888);
}

.cpd-svc-group-toggle[aria-expanded="true"] .cpd-svc-group-toggle-chevron {
  transform: rotate(180deg);
}

.cpd-svc-group-title {
  font-family: Unbounded, system-ui, sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--ink, #14122a);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* List — collapsed by default on mobile, animated open */
.cpd-svc-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease;
}

.cpd-svc-group-list.is-open {
  max-height: 600px;
  opacity: 1;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
}

.cpd-svc-group-list li {
  margin-bottom: 0.45rem;
}

.cpd-svc-group-list a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-muted, #3d3754);
  transition: color 0.15s;
}

.cpd-svc-group-list a:hover {
  color: var(--accent-primary, #6c5ce7);
}

/* On desktop (≥ 900px): always show lists, hide toggle chrome */
@media (min-width: 900px) {
  .cpd-svc-group-toggle {
    cursor: default;
    border-bottom: none;
    padding: 0;
    pointer-events: none;
  }
  .cpd-svc-group-toggle-chevron {
    display: none;
  }
  .cpd-svc-group-title {
    margin-bottom: var(--space-sm, 0.75rem);
  }
  .cpd-svc-group-list {
    max-height: none !important;
    opacity: 1 !important;
    padding-top: 0 !important;
    overflow: visible;
    transition: none;
  }
}

/* Catalogue loading: shimmer placeholders (no “Loading…” above the fold) */
@keyframes cpd-catalog-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.cpd-catalog-skeleton {
  pointer-events: none;
}

.cpd-catalog-skeleton__card {
  min-height: 200px;
  border-radius: var(--radius-md, 18px);
  background: linear-gradient(
    110deg,
    rgba(229, 217, 255, 0.55) 0%,
    rgba(246, 242, 255, 0.95) 40%,
    rgba(229, 217, 255, 0.55) 80%
  );
  background-size: 200% 100%;
  animation: cpd-catalog-shimmer 1.15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cpd-catalog-skeleton__card,
  .portfolio-filter-skeleton__chip {
    animation: none;
    background: rgba(229, 217, 255, 0.35);
  }
}

.portfolio-filter-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.portfolio-filter-skeleton__chip {
  height: 2rem;
  min-width: 5.5rem;
  border-radius: 999px;
  background: linear-gradient(
    110deg,
    rgba(196, 232, 255, 0.5) 0%,
    rgba(240, 249, 255, 0.95) 45%,
    rgba(196, 232, 255, 0.5) 85%
  );
  background-size: 200% 100%;
  animation: cpd-catalog-shimmer 1.15s ease-in-out infinite;
}

/* Related portfolio rows — same media height for portrait/landscape source images */
#cpd-portfolio-related .svc-card__media,
#cpd-svc-portfolio .svc-card__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm, 12px) var(--radius-sm, 12px) 0 0;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e9e4ff, #d0f5ec);
  display: flex;
  align-items: stretch;
}

#cpd-portfolio-related .svc-card__media > span,
#cpd-svc-portfolio .svc-card__media > span {
  margin: auto;
}

#cpd-portfolio-related .svc-card__media img,
#cpd-svc-portfolio .svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}