/* ===== PG Carousel (scoped) ===== */
.pg-carousel {
  /* config */
  --pg-card-w: 260px;
  --pg-gap: 15px;

  /* containment */
  display: grid;
  max-width: 100%;
  min-width: 0;              /* critical inside flex layouts */
  box-sizing: border-box;
}

/* Header / controls */
.pg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pg-controls {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.pg-controls .pg-prev,
.pg-controls .pg-next {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  padding: 4px 10px;
  border-radius: 0;
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
  pointer-events: auto;
}
.pg-controls .pg-prev:hover,
.pg-controls .pg-next:hover { background: #eee; }


/* Hide controls when carousel is disabled */
.pg-controls.pg-hidden { display: none !important; }

/* Viewport + track */
.pg-viewport {
  overflow: hidden;
  position: relative;
  margin-bottom: 2em;
  max-width: 100%;
  min-width: 0;              /* prevents min-content push */
}
.pg-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--pg-gap) !important;
  width: auto;
  min-width: 0;
  will-change: transform;
  transform: translateX(0);
}

/* Slides */
.pg-card {
  flex: 0 0 var(--pg-card-w) !important;
  width: var(--pg-card-w) !important;
  box-sizing: border-box;
  background: #fff;
  /* border: 1px solid #eee; */
  border: none;                        /* remove normal border */
  box-shadow: 0 0 0 1px #eee inset;    /* 1px “border” on all sides */
  border-radius: 0;
  overflow: hidden;
}
.pg-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Text */
.pg-name { font-size: 1.5rem; margin: 8px 12px 0; }
.pg-name a { font-weight: 400; }
.pg-pos  { color: #666; font-size: .75em; margin: 2px 12px 8px; display: none; }

/* Quick links */
.pg-quick {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
}
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid #ddd;
  border-radius: 0;
  text-decoration: none;
  color: #222;
  background: #fafafa;
}

.pg-btn:hover path { fill: white; }
.single-pkfod_service .pg-btn:hover { background: var(--teal); color: var(--teal); } {}
.single-pkfod_industry .pg-btn:hover { background: var(--purple); color: var(--purple); }


/* Color hooks (map to theme vars) */
.pg-link.pg-color-purple, .pg-btn.pg-color-purple { color: var(--purple); }
.pg-link.pg-color-teal,   .pg-btn.pg-color-teal   { color: var(--teal); }
.pg-link.pg-color-blue-dk,.pg-btn.pg-color-blue-dk{ color: var(--navy); }

/* Neutralize theme UL/LI rules inside the carousel (safety) */
.pg-carousel .pg-viewport ul,
.pg-carousel .pg-viewport li { all: unset; }

/* Clones: ignore pointer/clicks */
.pg-card[data-clone="1"],
.pg-card[data-clone="1"] * { pointer-events: none; }

/* Let flex/grid ancestors shrink when they contain the carousel (prevents sidebar push) */
@supports (selector(:has(*))) {
  :where(.f-row, .row, .flex, .content, .content-area, .site-main, .entry-content):has(.pg-carousel) {
    min-width: 0 !important;
  }
}
/* Fallback if :has() is not supported — target common wrappers */
.entry-content .pg-carousel,
.site-main .pg-carousel,
.content-area .pg-carousel,
.primary .pg-carousel,
.main-col .pg-carousel,
.f-row .pg-carousel,
.row .pg-carousel,
.flex .pg-carousel { min-width: 0 !important; }


.pg-img img {
  backface-visibility: hidden;
  transform: translateZ(0);
}