/* =========================
   Parker Pathways — Consolidated
   ========================= */

/* --------- Mobile Viewport Prevention --------- */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* --------- Font Loading Optimization --------- */
/* Ensure fonts use swap display for better LCP */
@font-face {
  font-family: 'azo-sans-web';
  font-display: swap;
  /* Font files loaded by theme - this ensures swap behavior */
}

@font-face {
  font-family: 'Barlow';
  font-display: swap;
  /* Font files loaded by theme - this ensures swap behavior */
}

/* --------- Scope + CSS Vars --------- */
#parker-pathways-root,
#pp-modal-root {
  --bg: #091268;
  --ink: #091268;
  --card: #f8f9ff;
  --muted: #6b7294;
  --ring: #d65c33;
  --ring-2: #ff9b6b;
  --ring-3: #ffd7c2;
  --chip: #091268;
  --chip-ink: #e6e9ff;
  --chip-py: 8px;
  --chip-px: 14px;
  --chip-gap: 8px;
  --chip-radius: 999px;
  --chip-font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --shadow: 0 10px 30px rgba(7, 12, 82, 0.35), 0 2px 8px rgba(7, 12, 82, 0.25);
  --radius-2xl: 16px;
  --ttl-yellow-dk: #8b6b00;
  --ttl-blue-dk: #0d2d6f;
  --ttl-mint-dk: #0b6b57;
  --ttl-red-dk: #7a1f2b;
  --ttl-orange-dk: #8a3f00;
  --ttl-purple-dk: #4a2b7b;
  --salary-green: #0b5a32;
}

#parker-pathways-root {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial;
  color: #fff;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: none;
  /* Remove fixed padding - hero handles its own height */
  padding-top: 0;
}

/* Hero Section - Fixed height, centered content */
/* Account for header: 165px on desktop (426px+), 100px on mobile (425px-) */
.pp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: calc(100vh - 165px);
  min-height: 500px;
  max-height: 750px;
  padding: 0 20px;
  /* Reserve space for featured section to prevent CLS */
  padding-bottom: 256px;
  box-sizing: border-box;
  position: relative;
}

/* Hero content wrapper - dynamically centered between top and featured */
.pp-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

/* At 680px and below, ditch the hero format */
@media (max-width: 680px) {
  .pp-hero {
    height: auto;
    min-height: 280px;
    max-height: none;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 16px 0;
    padding-bottom: 0; /* No featured at this breakpoint */
  }

  /* No dynamic centering at this breakpoint - featured is hidden */
  .pp-hero-content {
    flex: none;
    justify-content: flex-start;
    padding-top: 0;
    gap: 0;
  }

  /* Keep toggle visible in hero at this breakpoint - no scroll relocation */
  .pp-hero .pp-explore-navigation {
    display: block;
  }

  /* Hide featured in hero at this breakpoint */
  .pp-hero .pp-featured {
    display: none;
  }
}

/* 681-768px: Adjust hero height for featured alignment */
@media (min-width: 681px) and (max-width: 768px) {
  .pp-hero {
    max-height: none;
    min-height: 600px;
  }
}

@media (max-width: 425px) {
  .pp-hero {
    padding: 20px 12px 0;
  }
}

/* --------- Resets (scoped) --------- */
#parker-pathways-root *,
#parker-pathways-root *::before,
#parker-pathways-root *::after {
  box-sizing: border-box;
}
#parker-pathways-root h1,
#parker-pathways-root h2,
#parker-pathways-root h3,
#parker-pathways-root h4,
#parker-pathways-root h5,
#parker-pathways-root h6,
#parker-pathways-root p {
  margin: 0;
}
#parker-pathways-root ul {
  margin: 0;
  padding: 0;
}
#parker-pathways-root button,
#parker-pathways-root input,
#parker-pathways-root select,
#parker-pathways-root textarea {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Optional global background override (keep if intentional) */
body {
  background: linear-gradient(135deg, #060a3d 0%, #0c1263 30%, #161d85 50%, #1f2699 70%, #0B1267 100%) !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-repeat: no-repeat !important;
}

/* ====================================
   BACKGROUND OVERLAY (replaces Elementor)
   ==================================== */
.pp-background-overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.pp-background-overlay-image {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Hide background overlay on small mobile */
@media (max-width: 425px) {
  .pp-background-overlay-image {
    display: none !important;
  }
}

/* ====================================
   MAIN HEADING
   ==================================== */
/* Before JS runs: heading is direct child of root, position it to match final location */
#parker-pathways-root > #career-pathways-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -128px; /* Offset for featured section space (256px / 2) */
  width: 100%;
  text-align: center;
  padding: 0 20px;
  z-index: 2;
  box-sizing: border-box;
}

/* After JS moves heading into hero-content, reset positioning */
.pp-hero-content #career-pathways-heading {
  position: static;
  transform: none;
  margin-top: 0;
  text-align: center;
  margin: 0;
  padding: 0 20px;
  z-index: 2;
}

#career-pathways-heading .pp-main-heading {
  font-family: "azo-sans-web", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(36px, 8vw, 72px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: #FFFFFFD9;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .pp-hero-content #career-pathways-heading {
    padding: 80px 16px 10px;
  }
}

/* At 680px and below, no featured section - reset initial positioning */
@media (max-width: 680px) {
  #parker-pathways-root > #career-pathways-heading {
    position: static;
    transform: none;
    margin-top: 0;
    padding: 80px 16px 10px;
  }
}

@media (max-width: 425px) {
  #parker-pathways-root > #career-pathways-heading,
  .pp-hero-content #career-pathways-heading {
    padding: 16px 12px 0;
  }

  #career-pathways-heading .pp-main-heading {
    font-size: clamp(25px, 9vw, 36px) !important;
  }
}

/* ====================================
   LAYOUT + HEADER + CONTROLS
   ==================================== */
#parker-pathways-root .pp-wrap {
  position: relative;
  margin: 40px auto 0;
  padding: 0;
  color: #fff;
  z-index: 0;
  min-height: 100vh;
}

#parker-pathways-root .pp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 560px);
  grid-template-areas: "ttl ttl" "controls search";
  gap: 12px;
  margin-bottom: 33px;
  align-items: start;
}

/* --------- Pathways Header with Animated Clouds --------- */
#parker-pathways-root .pp-pathways-header-container {
  display: none;
}

#parker-pathways-root .pp-pathways-svg-layer {
  position: relative;
  width: 100%;
  display: block;
}

#parker-pathways-root .pp-pathways-clouds-layer {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease-out;
  will-change: transform;
  width: 110%;
  margin-left: -5%;
}

#parker-pathways-root .pp-pathways-header-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

#parker-pathways-root .pp-pathways-svg-layer img {
  width: 100%;
  height: auto;
  display: block;
}

#parker-pathways-root .pp-pathways-heading {
  position: absolute;
  bottom: 32%;
  left: 45%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: clamp(44px, 6.9vw, 77px);
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: center;
  text-shadow:
    -1px -1px 0 #ccc,
    -2px -2px 0 #c9c9c9,
    -3px -3px 0 #bbb,
    -4px -4px 0 #b9b9b9,
    -5px -5px 0 #aaa,
    -6px -6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    -1px -1px 3px rgba(0, 0, 0, 0.3),
    -3px -3px 5px rgba(0, 0, 0, 0.2),
    -5px -5px 10px rgba(0, 0, 0, 0.25),
    -10px -10px 10px rgba(0, 0, 0, 0.2),
    -20px -20px 20px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

#parker-pathways-root .pp-pathways-heading-break {
  display: none;
}

@media (max-width: 1400px) {
  #parker-pathways-root .pp-pathways-heading {
    font-size: clamp(37px, 5.9vw, 65px);
    bottom: calc(32% - 5px);
  }
}

@media (max-width: 1200px) {
  #parker-pathways-root .pp-pathways-heading {
    font-size: clamp(33px, 5.3vw, 59px);
    bottom: calc(32% - 10px);
  }
}

@media (max-width: 1024px) {
  #parker-pathways-root .pp-pathways-heading {
    bottom: calc(32% - 5px);
  }
}

@media (max-width: 768px) {
  #parker-pathways-root .pp-pathways-heading {
    font-size: clamp(38px, 6.1vw, 68px);
    bottom: calc(32% - 45px);
    left: 50%;
  }

  #parker-pathways-root .pp-pathways-branding {
    display: none;
  }
}

@media (max-width: 650px) {
  #parker-pathways-root .pp-pathways-heading {
    bottom: calc(32% - 40px);
  }
}

@media (max-width: 550px) {
  #parker-pathways-root .pp-pathways-heading {
    bottom: calc(32% - 35px);
  }
}

@media (max-width: 500px) {
  #parker-pathways-root .pp-pathways-heading {
    font-size: clamp(42px, 6.7vw, 75px);
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: normal;
    text-shadow:
      -1px -1px 0 #ccc,
      -2px -2px 0 #c9c9c9,
      -3px -3px 0 #bbb,
      -4px -4px 0 #b9b9b9,
      -5px -5px 0 #aaa,
      -6px -6px 1px rgba(0, 0, 0, 0.1),
      0 0 5px rgba(0, 0, 0, 0.1),
      -1px -1px 3px rgba(0, 0, 0, 0.3),
      -3px -3px 5px rgba(0, 0, 0, 0.2),
      -5px -5px 10px rgba(0, 0, 0, 0.25),
      -10px -10px 10px rgba(0, 0, 0, 0.2),
      -20px -20px 20px rgba(0, 0, 0, 0.15),
      0 8px 20px rgba(0, 0, 0, 0.5),
      0 12px 30px rgba(0, 0, 0, 0.4),
      0 15px 40px rgba(0, 0, 0, 0.3);
  }

  #parker-pathways-root .pp-pathways-heading-break {
    display: block;
  }

  #parker-pathways-root .pp-pathways-clouds-layer {
    opacity: 0.7;
  }
}

@media (max-width: 320px) {
  #parker-pathways-root .pp-pathways-heading {
    font-size: clamp(34px, 5.4vw, 61px);
    text-shadow:
      -0.8px -0.8px 0 #ccc,
      -1.6px -1.6px 0 #c9c9c9,
      -2.4px -2.4px 0 #bbb,
      -3.2px -3.2px 0 #b9b9b9,
      -4px -4px 0 #aaa,
      -4.8px -4.8px 0.9px rgba(0, 0, 0, 0.1),
      0 0 4px rgba(0, 0, 0, 0.1),
      -0.8px -0.8px 2.4px rgba(0, 0, 0, 0.3),
      -2.4px -2.4px 4px rgba(0, 0, 0, 0.2),
      -4px -4px 8px rgba(0, 0, 0, 0.25),
      -8px -8px 8px rgba(0, 0, 0, 0.2),
      -16px -16px 16px rgba(0, 0, 0, 0.15),
      0 6.5px 16px rgba(0, 0, 0, 0.5),
      0 9.7px 24px rgba(0, 0, 0, 0.4),
      0 12px 32px rgba(0, 0, 0, 0.3);
  }
}

#parker-pathways-root .pp-pathways-branding {
  position: absolute;
  bottom: 0;
  right: 13%;
  z-index: 3;
}

#parker-pathways-root .pp-pathways-branding-logo {
  width: 120px;
  height: auto;
  display: block;
}

@media (max-width: 850px) {
  #parker-pathways-root .pp-pathways-branding {
    bottom: 0;
    right: 10%;
  }

  #parker-pathways-root .pp-pathways-branding-logo {
    width: 90px;
  }
}

#parker-pathways-root .pp-title {
  grid-area: ttl;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 33px;
}
#parker-pathways-root .pp-title img {
  height: 96px;
  width: auto;
  display: block;
}
#parker-pathways-root .pp-title-divider {
  margin: 0 8px;
  padding-top: 8px;
  opacity: 0.9;
  font-weight: 400;
  font-size: clamp(27px, 2.4vw, 40px);
}
#parker-pathways-root .pp-title-text {
  padding-top: 17px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(27px, 2.4vw, 27px);
}

#parker-pathways-root .pp-controls {
  grid-area: controls;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--chip-gap);
  row-gap: var(--chip-gap);
  align-items: start;
  min-height: 60px;
}
#parker-pathways-root .pp-tabs,
#parker-pathways-root .pp-cred {
  flex: 1 1 100%;
}
#parker-pathways-root .pp-cred {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 526px; /* Match alphabetical filter grid width: (14 cols × 32px) + (13 gaps × 6px) = 526px */
}
#parker-pathways-root .pp-cred label {
  cursor: pointer;
}
#parker-pathways-root .pp-cred .pp-flex {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#parker-pathways-root .pp-cred input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0;
  accent-color: var(--ring);
}
#parker-pathways-root .pp-cred input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Search styling moved to collapsible content section */

/* Grid loading state */
#parker-pathways-root .pp-list.is-searching {
  position: relative;
  min-height: 400px;
}

#parker-pathways-root .pp-list.is-searching > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  display: none !important;
}

#parker-pathways-root .pp-list.is-searching::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background-image: url('../img/parker-loading-flame.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
}

/* Blog card grid loading state */
#parker-pathways-root .pp-blog-card-grid.is-searching {
  position: relative;
  min-height: 400px;
  align-items: start;
}

#parker-pathways-root .pp-blog-card-grid.is-searching > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  display: none !important;
}

#parker-pathways-root .pp-blog-card-grid.is-searching::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background-image: url('../img/parker-loading-flame.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
}

@media (min-width: 1280px) {
  #parker-pathways-root .pp-head {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 600px);
  }

  #parker-pathways-root .pp-pathways-branding {
    bottom: 50px;
  }
}
#parker-pathways-root .pp-search input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #1f1b2d2e;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#parker-pathways-root .pp-search input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
#parker-pathways-root .pp-search input[type="search"]:hover,
#parker-pathways-root .pp-search input[type="search"]:focus {
  outline: none;
  background: #ffffff14;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Chips */
#parker-pathways-root .pp-chip,
#parker-pathways-root button.pp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--chip-py) var(--chip-px);
  border-radius: var(--chip-radius);
  font: var(--chip-font);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: var(--chip-ink);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.25s ease, background 0.25s ease-in-out, color 0.25s ease-in-out;
}
/* Hide Parker Graduate Pathways button */
#parker-pathways-root .pp-tabs .pp-chip[data-view="parker"] {
  display: none;
}

/* ===== TOGGLE SWITCH for Programs/Careers ===== */
#parker-pathways-root .pp-switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  --chip-gap: 0;
  width: 528px;
  max-width: 100%;
  flex: 0 0 528px;
}

/* Mobile: 100% width at 540px and below */
@media (max-width: 540px) {
  #parker-pathways-root .pp-switch-wrapper {
    width: 100%;
    flex: 1 1 100%;
  }
}

#parker-pathways-root .pp-switch-wrapper [type="radio"] {
  position: absolute;
  left: -9999px;
}
/* Default: highlighter on left (Programs) */
#parker-pathways-root .pp-switch-wrapper .pp-highlighter {
  transform: translateX(0);
}
/* Careers checked: move highlighter right */
#parker-pathways-root .pp-switch-wrapper [type="radio"]:checked#pp-careers ~ .pp-highlighter,
#parker-pathways-root .pp-switch-wrapper [type="radio"]:checked#pp-careers-modal ~ .pp-highlighter {
  transform: translateX(100%);
}
#parker-pathways-root .pp-switch-wrapper label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  z-index: 1;
  flex: 1;
  line-height: 32px;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
  text-align: center;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
#parker-pathways-root .pp-switch-wrapper label:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* Checked state - dark text to match selected chips (must come after general label styles) */
#parker-pathways-root .pp-switch-wrapper [type="radio"]:checked + label,
#parker-pathways-root .pp-controls .pp-switch-wrapper [type="radio"]:checked + label {
  color: #1a1d3a !important;
}
/* Hover on checked labels - no background */
#parker-pathways-root .pp-switch-wrapper [type="radio"]:checked + label:hover {
  background: transparent;
  transform: none;
}

/* Toggle icons */
.pp-toggle-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#parker-pathways-root .pp-switch-wrapper .pp-highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(214, 92, 51, 0.95), rgba(255, 184, 150, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease-in-out;
  pointer-events: none;
}
#parker-pathways-root .pp-chip:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
#parker-pathways-root .pp-chip[aria-pressed="true"],
#parker-pathways-root .pp-cred .pp-chip[aria-pressed="true"] {
  background: linear-gradient(
    180deg,
    rgba(214, 92, 51, 0.95),
    rgba(255, 184, 150, 0.85)
  );
  color: #1a1d3a;
}
/* No hover effect on selected chips */
#parker-pathways-root .pp-chip[aria-pressed="true"]:hover,
#parker-pathways-root .pp-cred .pp-chip[aria-pressed="true"]:hover {
  background: linear-gradient(
    180deg,
    rgba(214, 92, 51, 0.95),
    rgba(255, 184, 150, 0.85)
  );
  transform: none;
}
#parker-pathways-root .pp-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* Chip size tiers */
#parker-pathways-root .pp-tabs {
  --chip-py: 10px;
  --chip-px: 16px;
  --chip-font: 700 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}
#parker-pathways-root .pp-cred,
#parker-pathways-root .pp-subfilters {
  --chip-py: 6px;
  --chip-px: 10px;
  --chip-font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}
#parker-pathways-root .pp-cred .pp-chip,
#parker-pathways-root .pp-subfilters .pp-chip {
  min-height: 32px;
}

/* Set min-width for all credential filter chips */
#parker-pathways-root .pp-cred .pp-chip {
  min-width: 70px;
}

/* Subfilters */
#parker-pathways-root .pp-subfilters {
  align-items: center;
  gap: var(--chip-gap);
}
#parker-pathways-root .pp-subfilters .pp-chip[aria-pressed="true"] {
  outline-offset: 0;
}
#parker-pathways-root .pp-subfilters[data-view="programs"],
#parker-pathways-root .pp-subfilters[data-view="parker"] {
  display: flex;
  flex-wrap: wrap;
}

/* Collapsible wrapper - Takes search grid area, now just a flex container */
#parker-pathways-root .pp-subfilters-collapsible {
  grid-area: search;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  min-width: 260px;
  margin-left: auto;
  position: relative;
  /* Initially hidden - will appear when scrolling below fold */
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
}

/* Show header on ALL screen sizes - styled like search input */
#parker-pathways-root .pp-subfilters-collapsible-header {
  width: 100%;
  max-width: 528px;
  margin-left: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 42px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  /* When collapsing: width shrinks after content collapses */
  transition: max-width 0.3s ease 0.2s, border-color 0.2s ease, box-shadow 0.2s ease 0.2s;
  position: relative;
  z-index: 2;
  overflow: hidden;
  outline: none;
}

/* Gradient overlay using pseudo-element */
#parker-pathways-root .pp-subfilters-collapsible-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #2F3494, #363BA3);
  border-radius: 30px;
  opacity: 0;
  transition: opacity 0.2s ease 0.2s;
  z-index: -1;
}

#parker-pathways-root .pp-subfilters-collapsible-header[aria-expanded="true"] {
  max-width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* When expanding: width and background happen together */
  transition: max-width 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#parker-pathways-root .pp-subfilters-collapsible-header[aria-expanded="true"]::before {
  opacity: 1;
  /* Background fades simultaneously with width */
  transition: opacity 0.3s ease;
}

#parker-pathways-root .pp-subfilters-collapsible-header:hover,
#parker-pathways-root .pp-subfilters-collapsible-header:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Content starts collapsed by default - tucks under header */
#parker-pathways-root .pp-subfilters-collapsible-content {
  display: flex;
  flex-direction: column;
  max-height: 600px;
  overflow: hidden;
  /* When expanding: delay until after width grows and background fades (0.3s) */
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, padding 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0.3s ease 0.3s;
  padding: 49px 16px 48px;
  margin-top: -33px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

#parker-pathways-root .pp-subfilters-collapsible-content.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  opacity: 0;
  /* When collapsing: no delay, collapse immediately */
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

#parker-pathways-root .pp-subfilters-collapsible-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
}

/* Search input inside header - only for larger screens (>680px) */
#parker-pathways-root .pp-collapsible-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  padding: 0 8px;
  min-width: 0;
}

#parker-pathways-root .pp-collapsible-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Hide clear button when input is empty */
#parker-pathways-root .pp-collapsible-search-input:placeholder-shown::-webkit-search-cancel-button,
#parker-pathways-root .pp-search-mobile-only input[type="search"]:placeholder-shown::-webkit-search-cancel-button,
#parker-pathways-root #ppSearchThreeWay:placeholder-shown::-webkit-search-cancel-button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show clear button when there's text, even when not focused */
#parker-pathways-root .pp-collapsible-search-input:not(:placeholder-shown)::-webkit-search-cancel-button,
#parker-pathways-root .pp-search-mobile-only input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button,
#parker-pathways-root #ppSearchThreeWay:not(:placeholder-shown)::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  position: relative;
  margin-left: 8px;
  pointer-events: auto;
}

/* Show/hide appropriate search input based on screen size */
@media (max-width: 680px) {
  /* On mobile: hide header search, show content search */
  #parker-pathways-root .pp-collapsible-search-input {
    display: none !important;
  }
  #parker-pathways-root .pp-search-mobile-only {
    display: block;
  }
}

@media (min-width: 681px) {
  /* On larger screens: hide content search, use header search */
  #parker-pathways-root .pp-search-mobile-only {
    display: none !important;
  }
}

/* Clear link in collapsible content */
#parker-pathways-root .pp-collapsible-clear-link {
  color: #E6E9FF;
  font: var(--chip-font);
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  display: none; /* Hidden by default, shown via JS */
}

#parker-pathways-root .pp-collapsible-clear-link:hover {
  color: var(--ring);
  text-decoration: underline;
}

/* Mobile (≤680px): Position Clear link at bottom right with dedicated space */
@media (max-width: 680px) {
  #parker-pathways-root .pp-collapsible-clear-link {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 100;
  }
}

/* Desktop (>1120px): Position Clear link at bottom right with dedicated space */
@media (min-width: 1121px) {
  #parker-pathways-root .pp-collapsible-clear-link {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 100;
  }
}

/* Medium screens (681-1120px): Hide collapsible Clear link (3-way toggle is shown) */
@media (min-width: 681px) and (max-width: 1120px) {
  #parker-pathways-root .pp-collapsible-clear-link {
    display: none !important;
  }
}

/* Clear link in 3-way search panel - only visible on medium screens */
#parker-pathways-root .pp-three-way-clear-link {
  color: #E6E9FF;
  font: var(--chip-font);
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  display: none; /* Hidden by default, shown via JS */
  align-self: flex-end; /* Align to right */
  margin-top: 8px;
  margin-right: 16px;
  margin-bottom: 8px;
}

#parker-pathways-root .pp-three-way-clear-link:hover {
  color: var(--ring);
  text-decoration: underline;
}

/* Hide 3-way Clear link on small and large screens */
@media (max-width: 680px), (min-width: 1121px) {
  #parker-pathways-root .pp-three-way-clear-link {
    display: none !important;
  }
}

#parker-pathways-root .pp-collapsible-search-icon {
  width: 18px;
  height: 18px;
  stroke: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  margin-right: 8px;
}

#parker-pathways-root .pp-subfilters-collapsible-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

#parker-pathways-root .pp-subfilters-collapsible-header[aria-expanded="true"] .pp-subfilters-collapsible-icon {
  transform: rotate(180deg);
}

#parker-pathways-root .pp-subfilters-collapsible-icon svg {
  display: block;
  width: 21px;
  height: 22px;
}

#parker-pathways-root .pp-subfilters-collapsible-icon svg path {
  stroke: rgba(255, 255, 255, 0.7);
}

/* Ensure filters stay inside collapsible container */
#parker-pathways-root .pp-subfilters-collapsible-content #pp-subfilters {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  position: relative !important;
}

/* Search input inside collapsible container */
#parker-pathways-root .pp-subfilters-collapsible-content .pp-search {
  width: 100%;
  margin-bottom: 16px;
}

#parker-pathways-root .pp-subfilters-collapsible-content .pp-search input {
  width: 100%;
}

/* Credential chips inside collapsible container */
#parker-pathways-root .pp-subfilters-collapsible-content #ppCred {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* Desktop: 14 chips on line 1, 13 on line 2 */
#parker-pathways-root .pp-subfilters[data-view="careers"] {
  display: grid;
  grid-template-columns: repeat(14, 32px);
  grid-auto-rows: 32px;
  align-items: center;
  column-gap: 6px;
  row-gap: 6px;
  max-width: 100%;
}
#parker-pathways-root .pp-subfilters[data-view="careers"] .pp-chip {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  transition: transform 0.25s ease, background 0.25s ease-in-out, color 0.25s ease-in-out;
}

/* Move "All" chip to top left (all screen sizes) for both careers and parker */
#parker-pathways-root .pp-subfilters[data-view="careers"] .pp-chip[data-value="All"],
#parker-pathways-root .pp-subfilters[data-view="parker"] .pp-chip[data-value="ALL"] {
  order: -1;
}

/* Desktop: Make "All" span 2 columns and larger */
@media (min-width: 681px) {
  #parker-pathways-root .pp-subfilters[data-view="careers"] .pp-chip[data-value="All"] {
    grid-column: span 2;
    width: auto;
    min-width: 70px;
    border-radius: 16px;
  }

  #parker-pathways-root .pp-subfilters[data-view="parker"] .pp-chip[data-value="ALL"] {
    min-width: 70px;
  }
}

/* Mobile: 9 chips per line (3 lines) at 680px and below */
@media (max-width: 680px) {
  #parker-pathways-root .pp-subfilters[data-view="careers"] {
    grid-template-columns: repeat(9, minmax(32px, 1fr));
    column-gap: 4px;
    row-gap: 4px;
  }

  #parker-pathways-root .pp-subfilters[data-view="careers"] .pp-chip {
    font-size: clamp(10px, 2.8vw, 13px);
  }
}

/* Small mobile: flexible grid at 375px and below */
@media (max-width: 375px) {
  #parker-pathways-root .pp-subfilters[data-view="careers"] {
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    column-gap: 4px;
    row-gap: 4px;
  }
}

/* Tablet: 680-768px - toggle and search side by side */
@media (min-width: 680px) and (max-width: 768px) {
  #parker-pathways-root .pp-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
  }

  #parker-pathways-root .pp-controls .pp-switch-wrapper {
    flex: 0 0 auto;
    width: auto;
  }

  #parker-pathways-root .pp-subfilters-collapsible {
    flex: 1;
  }
}

/* Responsive header tweaks - 679px and below: stacked */
@media (max-width: 680px) {
  #parker-pathways-root .pp-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Controls are hidden at 680px and below via separate rule */

  /* Stack order: toggle (1), search/filters dropdown (2) */
  #parker-pathways-root .pp-tabs {
    order: 1;
  }

  #parker-pathways-root .pp-subfilters-collapsible {
    order: 2;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
  }

  /* Full width switch wrapper */
  #parker-pathways-root .pp-controls .pp-switch-wrapper {
    width: 100%;
  }

  /* Override the desktop flex setting for toggle */
  #parker-pathways-root .pp-switch-wrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  /* Credential chips inside collapsible container - mobile-specific responsive sizing */
  #parker-pathways-root .pp-subfilters-collapsible-content .pp-cred {
    margin-bottom: 8px;
    padding-top: 5px;
  }

  /* Make credential chips responsive like subfilters */
  #parker-pathways-root .pp-subfilters-collapsible-content .pp-cred .pp-chip {
    min-height: 32px;
    max-height: 63px;
    height: clamp(32px, 8vw, 63px);
    padding: 0 clamp(10px, 2vw, 16px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 3vw, 16px);
    white-space: nowrap;
    transition: transform 0.25s ease, background 0.25s ease-in-out, color 0.25s ease-in-out;
  }

  /* Subfilters inside collapsible container - 9 per line, 3 lines */
  #parker-pathways-root .pp-subfilters-collapsible-content #pp-subfilters[data-view="careers"] {
    grid-template-columns: repeat(9, minmax(clamp(32px, 8vw, 63px), 1fr)) !important;
    grid-auto-rows: clamp(32px, 8vw, 63px) !important;
    width: 100% !important;
    column-gap: 4px !important;
    row-gap: 4px !important;
    padding-top: 5px;
  }

  /* Make subfilter chips responsive with same size as credential chips */
  #parker-pathways-root .pp-subfilters-collapsible-content #pp-subfilters[data-view="careers"] .pp-chip {
    width: auto !important;
    height: clamp(32px, 8vw, 63px) !important;
    aspect-ratio: 1/1;
    align-self: center;
    justify-self: center;
    font-size: clamp(11px, 3vw, 16px);
    transition: transform 0.25s ease, background 0.25s ease-in-out, color 0.25s ease-in-out;
  }

  /* Hide subfilters when empty */
  #parker-pathways-root .pp-subfilters-collapsible-content #pp-subfilters:empty {
    display: none;
  }

  #parker-pathways-root .pp-title img {
    height: 120px;
  }
  #parker-pathways-root .pp-title-text {
    font-size: clamp(16px, 4.2vw, 60px);
  }
  #parker-pathways-root .pp-name {
    -webkit-line-clamp: 3;
  }
}

/* Override for very small screens - flexible wrapping */
@media (max-width: 375px) {
  /* Override 9-column constraint for subfilters inside collapsible container */
  #parker-pathways-root .pp-subfilters-collapsible-content #pp-subfilters[data-view="careers"] {
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)) !important;
    grid-auto-rows: auto !important;
  }

  #parker-pathways-root .pp-subfilters-collapsible-content #pp-subfilters[data-view="careers"] .pp-chip {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ====================================
   LIST + CARD COMPONENT
   ==================================== */
#parker-pathways-root .pp-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding: 0;
  margin: 0;
  min-height: 300px;
}

/* Shuffle animation when switching views */
/* Hide items initially during transition */
#parker-pathways-root .pp-list.pp-list-transitioning .pp-item,
#parker-pathways-root .pp-list.pp-list-transitioning .pp-grouphead {
  opacity: 0;
  animation: pp-shuffle-in 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Fast variant for program chip navigation */
#parker-pathways-root .pp-list.pp-list-transitioning-fast .pp-item,
#parker-pathways-root .pp-list.pp-list-transitioning-fast .pp-grouphead {
  opacity: 0;
  animation: pp-shuffle-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Stagger animation for each card and grouphead */
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(1) { animation-delay: 0s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(2) { animation-delay: 0.09s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(3) { animation-delay: 0.18s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(4) { animation-delay: 0.27s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(5) { animation-delay: 0.36s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(6) { animation-delay: 0.45s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(7) { animation-delay: 0.54s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(8) { animation-delay: 0.63s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(9) { animation-delay: 0.72s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(10) { animation-delay: 0.81s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(11) { animation-delay: 0.90s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(12) { animation-delay: 0.99s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(13) { animation-delay: 1.08s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(14) { animation-delay: 1.17s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(15) { animation-delay: 1.26s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(16) { animation-delay: 1.35s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(17) { animation-delay: 1.44s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(18) { animation-delay: 1.53s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(19) { animation-delay: 1.62s; }
#parker-pathways-root .pp-list.pp-list-transitioning > :nth-child(20) { animation-delay: 1.71s; }

/* Fast stagger for program chip navigation - much quicker */
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(1) { animation-delay: 0s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(2) { animation-delay: 0.03s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(3) { animation-delay: 0.06s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(4) { animation-delay: 0.09s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(5) { animation-delay: 0.12s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(6) { animation-delay: 0.15s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(7) { animation-delay: 0.18s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(8) { animation-delay: 0.21s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(9) { animation-delay: 0.24s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(10) { animation-delay: 0.27s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(11) { animation-delay: 0.30s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(12) { animation-delay: 0.33s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(13) { animation-delay: 0.36s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(14) { animation-delay: 0.39s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(15) { animation-delay: 0.42s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(16) { animation-delay: 0.45s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(17) { animation-delay: 0.48s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(18) { animation-delay: 0.51s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(19) { animation-delay: 0.54s; }
#parker-pathways-root .pp-list.pp-list-transitioning-fast > :nth-child(20) { animation-delay: 0.57s; }

@keyframes pp-shuffle-in {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Blog card grid cascade animation */
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning .pp-blog-card,
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning .pp-grouphead {
  opacity: 0;
  animation: pp-shuffle-in 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Stagger animation for blog card grid */
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(1) { animation-delay: 0s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(2) { animation-delay: 0.09s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(3) { animation-delay: 0.18s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(4) { animation-delay: 0.27s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(5) { animation-delay: 0.36s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(6) { animation-delay: 0.45s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(7) { animation-delay: 0.54s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(8) { animation-delay: 0.63s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(9) { animation-delay: 0.72s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(10) { animation-delay: 0.81s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(11) { animation-delay: 0.90s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(12) { animation-delay: 0.99s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(13) { animation-delay: 1.08s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(14) { animation-delay: 1.17s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(15) { animation-delay: 1.26s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(16) { animation-delay: 1.35s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(17) { animation-delay: 1.44s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(18) { animation-delay: 1.53s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(19) { animation-delay: 1.62s; }
#parker-pathways-root .pp-blog-card-grid.pp-list-transitioning > :nth-child(20) { animation-delay: 1.71s; }

@keyframes pp-toggle-wiggle {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes pp-toggle-wiggle-reverse {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.pp-highlighter.wiggle-active {
  animation: pp-toggle-wiggle 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

.pp-highlighter.wiggle-active-reverse {
  animation: pp-toggle-wiggle-reverse 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

#parker-pathways-root .pp-item {
  grid-column: span 12;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  border-radius: var(--radius-2xl);
  padding: 8px 18px;
  box-shadow: var(--shadow);
  position: relative;
}

/* Empty state message - make it match card size and center text */
#parker-pathways-root .pp-list > .pp-item:only-child:not(.pp-card) {
  min-height: 60px;
  max-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  grid-column: 1 / -1;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
}

@media (min-width: 680px) {
  #parker-pathways-root .pp-item {
    grid-column: span 6;
  }

  /* On larger screens, empty state (not real cards) still spans full width */
  #parker-pathways-root .pp-list > .pp-item:only-child:not(.pp-card) {
    grid-column: 1 / -1;
  }
}

/* Ensure empty state message is visible in 3-way toggle mode (681-1120px) */
@media (min-width: 681px) and (max-width: 1120px) {
  #parker-pathways-root .pp-list > .pp-item:only-child:not(.pp-card) {
    display: flex !important;
    min-height: 60px;
    max-height: 60px;
  }
}

/* Reduce height on mobile */
@media (max-width: 680px) {
  #parker-pathways-root .pp-list > .pp-item:only-child:not(.pp-card) {
    min-height: 50px;
    max-height: 50px;
    padding: 12px 16px;
  }
}

#parker-pathways-root .pp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
#parker-pathways-root .pp-row > .pp-name {
  min-width: 0;
}
#parker-pathways-root .pp-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
}
#parker-pathways-root .pp-name-text {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@supports (text-wrap: balance) {
  #parker-pathways-root .pp-name-text {
    text-wrap: initial;
  }
}
#parker-pathways-root .pp-row button.pp-name {
  padding: 0;
  background: none;
  border: 0;
}
#parker-pathways-root .pp-meta {
  align-self: center;
  justify-self: end;
  display: none;
} /* hidden old meta line */

#parker-pathways-root .pp-item.pp-card,
#parker-pathways-root .pp-card,
#pp-modal-root .pp-card {
  display: grid;
  grid-template-columns: 184px 1fr;
  align-items: stretch;
  padding: 0;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  cursor: pointer;
  min-height: 120px;
  max-height: 150px;
}
#parker-pathways-root .pp-card:hover,
#pp-modal-root .pp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(7, 12, 82, 0.38),
    0 4px 10px rgba(7, 12, 82, 0.28);
  background-color: #edeeff;
}

#parker-pathways-root .pp-card__image-wrap,
#pp-modal-root .pp-card__image-wrap {
  height: 120px;
  width: 184px;
  max-width: 184px;
  flex-shrink: 0;
  align-self: start;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  background: #e6e9ff;
  position: relative;
}
#parker-pathways-root .pp-card__image-wrap::after,
#pp-modal-root .pp-card__image-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 65%;
  height: 48%;
  pointer-events: none;
} /* subtle overlay slot */
#parker-pathways-root .pp-card__image,
#pp-modal-root .pp-card__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  /* CLS Prevention: Aspect ratio for modern browsers to prevent layout shift */
  aspect-ratio: 280 / 160;
}

#parker-pathways-root .pp-card__body,
#pp-modal-root .pp-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  overflow: visible;
}
#parker-pathways-root .pp-card__title,
#pp-modal-root .pp-card__title {
  font-weight: 700;
  line-height: 1.2;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
#parker-pathways-root .pp-list .pp-card__title {
  font-size: 16px;
}
#parker-pathways-root .pp-card__desc,
#pp-modal-root .pp-card__desc {
  margin: 0;
  color: rgb(70, 68, 68);
  display: block;
  width: 100%;
  font: 500 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#parker-pathways-root .pp-card__meta,
#pp-modal-root .pp-card__meta {
  display: none;
}
/* Programs modal: hide card meta row
.pp-modal-overlay.pp-kind-programs .pp-card__meta {
  display: none;
} */
#parker-pathways-root .pp-card__actions,
#pp-modal-root .pp-card__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding: 0 3px 0 0;
}
#parker-pathways-root .pp-btn,
#pp-modal-root .pp-btn {
  appearance: none;
  border: 0;
  border-radius: 10px !important;
  padding: 10px 14px;
  font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial;
  background: var(--ring);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: filter 0.15s ease, transform 0.15s ease;
}
#parker-pathways-root .pp-card .pp-btn,
#pp-modal-root .pp-card .pp-btn {
  display: inline-flex;
  width: auto;
  max-width: max-content;
  margin-left: 0;
}
#parker-pathways-root .pp-btn:hover,
#pp-modal-root .pp-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
#parker-pathways-root .pp-btn:focus-visible {
  outline: 2px solid var(--ring-2);
  outline-offset: 2px;
}

#parker-pathways-root .pp-badge-img {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 10px !important;
  font: 700 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial;
  color: #fff;
  background: var(--chip);
  box-shadow: 0 2px 8px rgba(7, 12, 82, 0.25);
  z-index: 1;
}
#parker-pathways-root .pp-card .pp-badge-img {
  margin-bottom: 3px;
}
#parker-pathways-root .pp-card:hover .pp-badge-img {
  transform: translateY(0);
}
#parker-pathways-root .pp-badge-img[data-cred="CERT"] {
  background: #7a3cff;
}
#parker-pathways-root .pp-badge-img[data-cred="AAS"] {
  background: #0080ff;
}
#parker-pathways-root .pp-badge-img[data-cred="AS"] {
  background: #0099cc;
}
#parker-pathways-root .pp-badge-img[data-cred="BS"] {
  background: #00a86b;
}
#parker-pathways-root .pp-badge-img[data-cred="MS"] {
  background: #e06c2a;
}
#parker-pathways-root .pp-badge-img[data-cred="MBA"] {
  background: #c85000;
}
#parker-pathways-root .pp-badge-img[data-cred="MPH"] {
  background: #b83280;
}
#parker-pathways-root .pp-badge-img[data-cred="DC"] {
  background: #0b0f4f;
}
#parker-pathways-root .pp-badge-img[data-cred="PhD"] {
  background: #444;
}
#parker-pathways-root .pp-badge-img[data-cred="Diploma"] {
  background: #666;
}

/* Tablet: Full width cards with horizontal layout */
@media (min-width: 680px) and (max-width: 1024px) {
  #parker-pathways-root .pp-card,
  #pp-modal-root .pp-card,
  .pp-modal-card-list .pp-card {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 240px 1fr;
    margin: 0;
  }

  #parker-pathways-root .pp-list,
  #pp-modal-root .pp-modal-card-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
}

@media (max-width: 680px) {
  #parker-pathways-root .pp-card {
    grid-template-columns: 1fr;
    padding: 0;
  }
  #parker-pathways-root .pp-card__image-wrap {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    border-radius: 16px 16px 0 0;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  #parker-pathways-root .pp-card__image,
  #parker-pathways-root img.pp-card__image {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  #parker-pathways-root .pp-card__title,
  #parker-pathways-root .pp-card__desc {
    margin-left: 0;
    margin-right: 0;
  }

  #parker-pathways-root .pp-card__actions,
  #pp-modal-root .pp-card__actions {
    padding: 0 3px 0 0;
  }
}

/* Small UI bits */
#parker-pathways-root .pp-badge {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: 10px;
  background: #eef1ff;
  color: #262b55;
}
#parker-pathways-root .pp-check {
  font-size: 14px;
  color: green;
  font-weight: bold;
  margin-left: 4px;
}
#parker-pathways-root .pp-toast {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
}

/* ====================================
   MODAL SHELL
   ==================================== */
#parker-pathways-root.pp-modal-open {
  position: relative;
  isolation: isolate;
  z-index: 2147483647;
}
#parker-pathways-root .pp-modal-root {
  position: relative;
  z-index: auto;
}
.pp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: rgba(6, 9, 48, 0.7);
  backdrop-filter: saturate(120%) blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.pp-modal-overlay.is-open {
  animation: pp-modal-backdrop-fade-in 0.3s ease forwards;
  pointer-events: auto;
}
.pp-modal-overlay.is-closing {
  animation: pp-modal-backdrop-fade-out 0.25s ease forwards;
  pointer-events: none;
}

/* Backdrop animations (fade only) */
@keyframes pp-modal-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pp-modal-backdrop-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.pp-modal-sheet {
  position: relative;
  background: transparent;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow: auto;
  box-sizing: border-box;
  pointer-events: none; /* Allow clicks to pass through to overlay */
}

.pp-modal-sheet > * {
  pointer-events: auto; /* But allow clicks on modal content */
}

/* Mobile: Full-screen modals on small devices */
@media (max-width: 768px) {
  .pp-modal-sheet {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100vh;
  }
}

/* Modal sheet animations (scale + fade) - only on initial open, not after hydration */
.pp-modal-overlay.is-open:not(.pp-content-loaded) .pp-modal-sheet {
  animation: pp-modal-sheet-scale-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.pp-modal-overlay.is-closing .pp-modal-sheet {
  animation: pp-modal-sheet-scale-out 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pp-modal-sheet-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pp-modal-sheet-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
/* V2 and V3 Modals: Disable sheet scroll (modal content handles its own scrolling) */
.pp-modal-sheet:has(.pp-career-modal),
.pp-modal-sheet:has(.pp-program-modal) {
  overflow: hidden;
}
#parker-pathways-root .pp-modal-close:not(.pp-modal-close-v2) {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), clamp(12px, 2.4vw, 28px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial;
  cursor: pointer;
}
#parker-pathways-root .pp-modal-close:not(.pp-modal-close-v2):focus {
  outline: 2px solid #ffd7c2;
  outline-offset: 2px;
}

#parker-pathways-root .pp-modal-outer {
  max-width: 880px;
}
#parker-pathways-root .pp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#parker-pathways-root .pp-modal-title {
  font-size: 20px;
  font-weight: 700;
  flex: 1;
  text-align: left;
  margin: 0 15px;
}
#parker-pathways-root .pp-modal-x {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}
.pp-modal-overlay .pp-card__title {
  font-size: 24px;
}
#parker-pathways-root .pp-modal-content {
  padding: 16px 20px 24px;
  max-height: min(70vh, 720px);
  overflow: auto;
}
#parker-pathways-root .pp-modal-content .pp-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}

#parker-pathways-root .pp-modal-hero {
  display: block;
  width: 100%;
  max-height: 260px;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  margin: 8px 0 14px;
}
#parker-pathways-root .pp-modal-hd h3 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 6px;
}
#parker-pathways-root .pp-modal-desc {
  margin: 0 0 16px;
  color: var(--chip-ink);
}
#parker-pathways-root .pp-modal-section + .pp-modal-section {
  margin-top: 18px;
}
#parker-pathways-root .pp-modal-section h4 {
  font-size: 16px;
  margin: 0 0 8px;
  text-transform: none;
  letter-spacing: 0;
}
#parker-pathways-root .pp-modal-list {
  padding-left: 18px;
  margin: 0;
}
#parker-pathways-root .pp-modal-list li {
  margin: 4px 0;
}

/* ====================================
   PATHWAY (diagram + cells)
   ==================================== */
#parker-pathways-root .pp-pathway {
  --flame: url("https://www.parker.edu/wp-content/uploads/2022/07/parker-loading-flame.svg");
  --armW: 10px;
  --card: #f5f5f7;
  --ring: #f5f5f7;
  --ringCenter: #d65c33;
  --dot: #f5f5f7;
  --dotBiasLeft: 0.6;
  --dotBiasRight: 0.4;
  --dot-overlap-left: 30px;
  --dot-overlap-right: 30px;
  --arm: #f5f5f7;
  --title: #f5f5f7;
  --g: clamp(12px, 2.2vw, 32px);
  --mid-mx: 40px;
  --mid-my: 0px;
  --cellH: 200px;
  /* Individual card heights (can be overridden per card) */
  --cell-l1-h: var(--cellH);
  --cell-l2-h: var(--cellH);
  --cell-l3-h: var(--cellH);
  --cell-r1-h: var(--cellH);
  --cell-r2-h: var(--cellH);
  --cell-r3-h: var(--cellH);
  --cell-bl-h: var(--cellH);
  --cell-bm-h: var(--cellH);
  --cell-br-h: var(--cellH);
  --mid-end-xbias: 0.7;
  --mid-end-bias: 0.2;
  --mid-end-dx: 50px;
  --mid-end-dy: 0px;
  font: 500 1.25rem/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial;
  color: var(--ink);
  min-height: 100dvh;
}
#parker-pathways-root .pp-pathway-wrap {
  position: relative;
  min-height: 100dvh;
}
#parker-pathways-root .pp-pathway-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center 6vh;
  background-size: min(70vmin, 560px);
  pointer-events: none;
  z-index: 0;
}
#parker-pathways-root .pp-pathway .pathway {
  position: relative;
}
#parker-pathways-root .pp-pathway .connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#parker-pathways-root .pp-pathway .pathway-inner {
  padding: 1rem;
  position: relative;
  z-index: 1;
}
#parker-pathways-root .pp-pathway .wrap {
  display: flex;
  gap: var(--g);
  align-items: stretch;
  min-height: 60vh;
  position: relative;
  isolation: isolate;
}
#parker-pathways-root .pp-pathway .col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
#parker-pathways-root .pp-pathway .center {
  flex: 0 1 auto;
  width: clamp(280px, var(--centerW, 32vw), 560px);
  min-height: 320px;
  margin-inline: calc(-1 * var(--g));
  overflow: visible;
  position: relative;
}
#parker-pathways-root .pp-pathway svg {
  display: block;
  width: auto;
  height: 100%;
}
#parker-pathways-root .pp-pathway .arm {
  stroke: var(--arm);
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: round;
  stroke-width: var(--armW);
}
#parker-pathways-root .pp-pathway .ring-fo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#parker-pathways-root .pp-pathway .ring-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  text-align: center;
  color: #fff;
}
#parker-pathways-root .pp-pathway .ring-title {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#parker-pathways-root .pp-pathway .ring-sub {
  margin-top: 6px;
  font: 500 12px/1.2 system-ui, Segoe UI, Inter, Arial, sans-serif;
  opacity: 0.9;
}

/* SVG transform origins */
#parker-pathways-root .pp-pathway #diagram,
#parker-pathways-root .pp-pathway #ringGroup,
#parker-pathways-root .pp-pathway #ringLabelGroup {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Mid connector reveal */
#pp-connectorOverlay .arm-mid {
  stroke: var(--arm);
  fill: none;
  stroke-width: var(--armW);
  stroke-linecap: butt;
  stroke-linejoin: round;
}
#pp-connectorOverlay rect.dot-reveal.from-top {
  transform-origin: 50% 0%;
  transform: scaleY(0);
  transition: transform 400ms ease;
}

/* Group titles */
#parker-pathways-root .pp-pathway .cell-group-title-left,
#parker-pathways-root .pp-pathway .cell-group-title-right {
  font-size: 2rem;
  font-weight: 600;
  color: var(--title);
}
#parker-pathways-root .pp-pathway .cell-group-title-right {
  text-align: right;
}
#parker-pathways-root .pp-pathway .cell-group-title-center {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  color: var(--title);
}
#parker-pathways-root .pp-pathway .cell-group-title {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#parker-pathways-root .pp-pathway .cell-group-title.title-in {
  opacity: 1;
  transform: translateY(0);
}

/* Cells */
#parker-pathways-root .pp-pathway .cell {
  --fadeDir: to right;
  --fade0: rgba(255, 255, 255, 0);
  --fade1: rgba(255, 255, 255, 0.65);
  --fade2: var(--card);
  background-color: var(--card);
  background-image: linear-gradient(
      var(--fadeDir),
      var(--fade0) 0%,
      var(--fade1) 55%,
      var(--fade2) 100%
    ),
    var(--photo, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--cellH);
  font: 500 1.25rem/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial;
  color: var(--ink);
  transition: box-shadow 0.25s ease, clip-path 0.8s ease, opacity 0.5s ease;
  perspective: 1000px;
  border-radius: 12px;
  overflow: hidden; /* ⟵ real clip lives here */
}

/* Individual card height overrides */
#parker-pathways-root .pp-pathway #cell-l1 { height: var(--cell-l1-h); }
#parker-pathways-root .pp-pathway #cell-l2 { height: var(--cell-l2-h); }
#parker-pathways-root .pp-pathway #cell-l3 { height: var(--cell-l3-h); }
#parker-pathways-root .pp-pathway #cell-r1 { height: var(--cell-r1-h); }
#parker-pathways-root .pp-pathway #cell-r2 { height: var(--cell-r2-h); }
#parker-pathways-root .pp-pathway #cell-r3 { height: var(--cell-r3-h); }
#parker-pathways-root .pp-pathway #bLeft { height: var(--cell-bl-h); }
#parker-pathways-root .pp-pathway #bMid { height: var(--cell-bm-h); }
#parker-pathways-root .pp-pathway #bRight { height: var(--cell-br-h); }
#parker-pathways-root .pp-pathway #rightCol .cell {
  --fadeDir: to left;
}
#parker-pathways-root .pp-pathway #leftCol .cell,
#parker-pathways-root .pp-pathway #rightCol .cell {
  position: relative;
  z-index: 2;
  padding: 0;
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}
#parker-pathways-root .pp-pathway .cell.is-hidden {
  opacity: 0;
}
#parker-pathways-root .pp-pathway .cell.from-right {
  clip-path: inset(0 100% 0 0);
}
#parker-pathways-root .pp-pathway .cell.from-left {
  clip-path: inset(0 0 0 100%);
}
#parker-pathways-root .pp-pathway .cell.revealed {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

#parker-pathways-root .pp-pathway #centerCol {
  position: relative;
  perspective-origin: 50% 50%;
  z-index: 0;
  perspective: 1000px;
}
#parker-pathways-root .pp-pathway #diagram {
  position: relative;
  z-index: 0;
  transform-style: preserve-3d;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
#parker-pathways-root .pp-pathway #ringFlameImg {
  opacity: 1;
  transition: opacity 0.4s ease;
}
#parker-pathways-root.pp-intro-text-in .pp-pathway #ringFlameImg {
  opacity: 0.1;
}

/* Bottom row */
#parker-pathways-root .pp-pathway .bottom {
  margin: 1rem 0 3.5rem;
  position: relative;
  z-index: 1;
}
#parker-pathways-root .pp-pathway .bottom-row {
  position: relative;
  display: block;
  padding: 0;
  height: var(--cellH);
}
#parker-pathways-root .pp-pathway .bottom-card {
  position: absolute;
  top: 0;
  height: var(--cellH);
  width: auto;
  padding: 0;
  border-radius: 0.75rem;
  background: transparent;
  perspective: 1000px;
  border-radius: 12px;
  overflow: hidden;
}

/* ====================================
   FLIP CARD (unified, Safari-safe)
   ==================================== */
#parker-pathways-root .pp-pathway .cell .card-inner,
#parker-pathways-root .pp-pathway .bottom-card .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.6s;
  /* Never clip the rotating layer */
  overflow: visible !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}
#parker-pathways-root .pp-pathway .cell:hover .card-inner,
#parker-pathways-root .pp-pathway .bottom-card:hover .card-inner,
#parker-pathways-root .pp-pathway .cell.is-flipped .card-inner,
#parker-pathways-root .pp-pathway .bottom-card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

#parker-pathways-root .pp-pathway .card-front,
#parker-pathways-root .pp-pathway .card-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  border-radius: 12px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
#parker-pathways-root .pp-pathway .card-front {
  transform: rotateY(0deg) translateZ(0.01px);
  background-image: linear-gradient(
      var(--fadeDir),
      var(--fade0) 0%,
      var(--fade1) 55%,
      var(--fade2) 100%
    ),
    var(--photo, none);
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
}
#parker-pathways-root .pp-pathway .card-back {
  transform: rotateY(180deg) translateZ(0.01px);
  color: #fff;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(120% 120% at 30% 20%, #e36840, #d45e37 60%, #bc4f2b);
  box-shadow: none;
}

/* Modal card content layout: title pinned, content centered */
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway
  .card-front
  > .pp-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
.pp-modal-overlay .pp-card__title {
  width: 100%;
  text-align: center;
}
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway
  .cell.is-left
  .card-front
  > .pp-card__body {
  align-items: flex-start;
}
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway
  .cell.is-left
  .pp-card__title {
  text-align: left;
}
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway
  .card-front
  > .pp-card__body
  :is(
    .pp-chiplist,
    .pp-what,
    .pp-what-wrap,
    .pp-otj,
    .pp-otj-wrap,
    .pp-grad,
    .pp-grad-wrap,
    .pp-edu,
    .pp-wordcloud,
    .pp-centered-list,
    .pp-outlook-card,
    .pp-salary,
    .pp-salary-bleed,
    .pp-salary-graph
  ) {
  margin-top: auto;
  margin-bottom: auto;
}

/* ====================================
   CONTENT BLOCKS (what/otj/outlook/grad/etc.)
   ==================================== */
#parker-pathways-root .pp-what,
.pp-modal-overlay .pp-what {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  text-align: left;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}
#parker-pathways-root .pp-otj,
.pp-modal-overlay .pp-otj {
  margin: 0;
  padding-left: 18px;
  text-align: left;
}
#parker-pathways-root .pp-otj > li,
.pp-modal-overlay .pp-otj > li {
  margin: 2px 0;
}
#parker-pathways-root .pp-otj > li.pp-otj-ellipsis,
.pp-modal-overlay .pp-otj > li.pp-otj-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#parker-pathways-root .pp-otj-wrap,
.pp-modal-overlay .pp-otj-wrap {
  overflow: hidden;
  position: relative;
}

#parker-pathways-root .pp-centered-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 0 6px;
}
#parker-pathways-root .pp-centered-item {
  font: 500 1.25rem/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial;
  color: var(--ink);
}

/* Word cloud */
.pp-wordcloud {
  position: relative;
  min-height: 90px;
  padding: 6px 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-start;
}
#parker-pathways-root .pp-card__body .pp-wordcloud {
  width: 100%;
  justify-self: stretch;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  text-align: center;
}
#parker-pathways-root .pp-word,
.pp-modal-overlay .pp-word,
.pp-word {
  line-height: 1;
  white-space: nowrap;
  transform-origin: center;
  will-change: transform, opacity;
  animation: ppFloat var(--pp-dur, 8s) cubic-bezier(0.4, 0.6, 0.4, 0.6)
    var(--pp-delay, 0s) infinite alternate;
}
#parker-pathways-root .pp-word {
  max-width: 100%;
}
#parker-pathways-root .pp-word.is-wrapped {
  white-space: normal;
  overflow-wrap: anywhere;
}
@keyframes ppFloat {
  from {
    transform: translate(var(--pp-x0, 0), var(--pp-y0, 0))
      rotate(var(--pp-r0, 0deg));
    opacity: 0.96;
  }
  to {
    transform: translate(var(--pp-x1, 0), var(--pp-y1, 0))
      rotate(var(--pp-r1, 0deg));
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #parker-pathways-root .pp-word,
  .pp-modal-overlay .pp-word,
  .pp-word {
    animation: none !important;
  }
}

/* Outlook (salary) */
#parker-pathways-root .pp-pathway .card-front:has(.pp-outlook-card),
.pp-modal-overlay .pp-pathway .card-front:has(.pp-outlook-card) {
  background-image: linear-gradient(
      45deg,
      rgb(169, 199, 69),
      rgb(219, 241, 141)
    ),
    var(--photo, none) !important;
  background-size: cover;
  background-position: center;
}
#parker-pathways-root .pp-outlook-card {
  background: transparent !important;
  padding: 12px;
  --edge-gap: 0;
}
#parker-pathways-root .pp-outlook-card .pp-outlook-content {
  padding: var(--edge-gap, 0);
}
#parker-pathways-root .pp-outlook-card .pp-salary {
  display: grid;
  row-gap: 6px;
}
#parker-pathways-root .pp-outlook-card .pp-salary-bleed {
  margin: 0;
  width: 90%;
  margin-inline: auto;
  max-width: none;
}
#parker-pathways-root .pp-outlook-card .pp-salary-median {
  text-align: center;
  font-weight: 800;
}
#parker-pathways-root .pp-outlook-card .pp-salary-graph svg {
  display: block;
  width: 90%;
  height: auto;
  margin-inline: auto;
}
#parker-pathways-root .pp-outlook-card .pp-salary-endpoints {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
#parker-pathways-root
  .pp-pathway
  .card-front:has(.pp-outlook-card)
  > .pp-card__body.pp-outlook-card {
  width: 90%;
  margin: 0 auto;
  overflow: visible;
}
.pp-modal-overlay .pp-pathway .pp-salary-median,
.pp-modal-overlay .pp-pathway .pp-salary-endpoints span {
  color: var(--salary-green);
}

/* What They Do (image/wash) */
#parker-pathways-root .pp-pathway .card-front:has(.pp-what),
#parker-pathways-root .pp-pathway .card-front:has(.pp-what-wrap) {
  background: linear-gradient(45deg, rgb(237, 179, 67), rgb(255, 222, 140)),
    var(--photo, none);
  background-size: cover;
  background-position: center;
}
#parker-pathways-root .pp-what,
#parker-pathways-root .pp-what-wrap {
  background: transparent !important;
  padding: 12px 12px 0;
}
#parker-pathways-root
  .pp-pathway
  .card-front:has(.pp-what, .pp-what-wrap)
  > .pp-card__body {
  width: 90%;
  margin: 0 auto;
  overflow: visible;
}

/* On the Job */
#parker-pathways-root .pp-pathway .card-front:has(.pp-otj-wrap),
#parker-pathways-root .pp-pathway .card-front:has(.pp-otj) {
  background: linear-gradient(45deg, rgb(156, 126, 206), rgb(200, 173, 240)),
    var(--photo, none);
  background-size: cover;
  background-position: center;
}
#parker-pathways-root .pp-otj-wrap,
#parker-pathways-root .pp-otj {
  background: transparent !important;
  padding: 12px;
}
#parker-pathways-root
  .pp-pathway
  .card-front:has(.pp-otj-wrap, .pp-otj)
  > .pp-card__body {
  width: 90%;
  margin: 0 auto;
  overflow: visible;
}

/* Graduate Pathways */
#parker-pathways-root .pp-pathway .card-front:has(.pp-grad) {
  background: linear-gradient(45deg, rgb(64, 141, 195), rgb(124, 191, 240)),
    var(--photo, none);
  background-size: cover;
  background-position: center;
}
#parker-pathways-root .pp-grad {
  background: transparent !important;
  padding: 12px;
}
#parker-pathways-root .pp-pathway .card-front:has(.pp-grad) > .pp-card__body {
  width: 90%;
  margin: 0 auto;
  overflow: visible;
}
#parker-pathways-root .pp-pathway .card-front.pp-grad-face {
  background: linear-gradient(45deg, rgb(64, 141, 195), rgb(124, 191, 240)),
    var(--photo, none) !important;
  background-size: cover;
  background-position: center;
}

/* Bottom-row gradient variants */
#parker-pathways-root .pp-pathway #bLeft .card-front,
.pp-modal-overlay .pp-pathway #bLeft .card-front {
  background-image: linear-gradient(
      45deg,
      rgb(86, 193, 164),
      rgb(149, 235, 209)
    ),
    var(--photo, none) !important;
  background-size: cover;
  background-position: center;
}
#parker-pathways-root .pp-pathway #bMid .card-front,
.pp-modal-overlay .pp-pathway #bMid .card-front {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.22)
    ),
    linear-gradient(45deg, rgb(232, 119, 90), rgb(255, 186, 150)),
    var(--photo, none) !important;
  background-size: cover;
  background-position: center;
}
#parker-pathways-root .pp-pathway #bRight .card-front,
.pp-modal-overlay .pp-pathway #bRight .card-front {
  background-image: linear-gradient(
      45deg,
      rgb(210, 92, 121),
      rgb(244, 173, 193)
    ),
    var(--photo, none) !important;
  background-size: cover;
  background-position: center;
}

/* Title accent colors on specific cards (modal) */
.pp-modal-overlay .pp-pathway .card-front:has(.pp-what) .pp-card__title {
  color: var(--ttl-yellow-dk);
}
.pp-modal-overlay .pp-pathway .card-front:has(.pp-grad) .pp-card__title {
  color: var(--ttl-blue-dk);
}
.pp-modal-overlay .pp-pathway #bLeft .pp-card__title,
.pp-modal-overlay .pp-pathway .card-front:has(.pp-wordcloud) .pp-card__title {
  color: var(--ttl-mint-dk);
}
.pp-modal-overlay .pp-pathway #bMid .pp-card__title {
  color: var(--ttl-orange-dk);
}
.pp-modal-overlay .pp-pathway #bRight .pp-card__title {
  color: var(--ttl-red-dk);
}
.pp-modal-overlay .pp-pathway .card-front:has(.pp-otj),
.pp-modal-overlay .pp-pathway .card-front:has(.pp-otj-wrap) .pp-card__title {
  color: var(--ttl-purple-dk);
}

/* ====================================
   INTERACTION + MISC
   ==================================== */
#parker-pathways-root .pp-row.has-modal [data-pp-modal-trigger] {
  cursor: pointer;
  text-decoration: none;
}
#parker-pathways-root .pp-row.has-modal [data-pp-modal-trigger]:hover,
#parker-pathways-root .pp-row.has-modal [data-pp-modal-trigger]:focus {
  text-decoration: underline;
  outline: none;
}
#parker-pathways-root .pp-row,
#parker-pathways-root .pp-row * {
  pointer-events: auto;
}
#parker-pathways-root .pp-row .pp-overlay {
  pointer-events: none;
}
#parker-pathways-root [data-pp-modal-trigger] {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  z-index: 2;
}

/* Group headers */
#parker-pathways-root .pp-list .pp-grouphead {
  grid-column: 1/-1;
  padding: 0;
  margin: 0 0 6px;
  list-style-type: none;
}
#parker-pathways-root .pp-grouphead-inner {
  display: inline-block;
  padding: 8px 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
#parker-pathways-root .pp-grouphead + .pp-item {
  margin-top: 0;
}

#parker-pathways-root .pp-muted {
  opacity: 0.75;
  font-weight: 500;
}

/* Bottom cards reveal animation */
.bottom-card {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
.bottom-card.is-hidden {
  opacity: 0;
  transform: translateY(24px);
}
#bLeft {
  --reveal-delay: 60ms;
}
#bMid {
  --reveal-delay: 140ms;
}
#bRight {
  --reveal-delay: 220ms;
}
.bottom-card.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease var(--reveal-delay, 0ms),
    transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .bottom-card.revealed {
    transition: none;
  }
}

/* Shimmer */
#parker-pathways-root .pp-shimmerable {
  position: relative;
  overflow: hidden;
}
#parker-pathways-root .pp-shimmerable.is-shimmering::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.06) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translate(-120%, -120%) skewX(-18deg);
  pointer-events: none;
  filter: blur(0.5px);
  animation: ppShimmerSweep var(--pp-shimmer-dur, 2400ms) ease-out forwards;
}
@keyframes ppShimmerSweep {
  to {
    transform: translate(120%, 120%) skewX(-18deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #parker-pathways-root .pp-shimmerable.is-shimmering::after {
    animation: none;
    opacity: 0;
  }
}
#parker-pathways-root #ringFlame .pp-svg-shimmer {
  pointer-events: none;
  filter: blur(0.5px);
  transform: translate(-120%, -120%) skewX(-18deg);
  animation: ppShimmerSweep var(--pp-shimmer-dur, 2400ms) ease-out forwards;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  #parker-pathways-root #ringFlame .pp-svg-shimmer {
    animation: none;
    opacity: 0;
  }
}

/* ====================================
   CIRCLE POSITION LAYOUTS
   ==================================== */
/* Center position (default) - all columns visible */
.pp-pathway-wrap.pp-circle-center #leftCol,
.pp-pathway-wrap.pp-circle-center #rightCol,
.pp-pathway-wrap.pp-circle-center .bottom {
  display: flex;
}

/* Top-left position - hide left column, show right and bottom */
.pp-pathway-wrap.pp-circle-top-left #leftCol {
  display: none !important;
}
.pp-pathway-wrap.pp-circle-top-left .wrap {
  justify-content: flex-start;
}
.pp-pathway-wrap.pp-circle-top-left #centerCol {
  order: -1;
}

/* Top-right position - hide right column, show left and bottom */
.pp-pathway-wrap.pp-circle-top-right #rightCol {
  display: none !important;
}
.pp-pathway-wrap.pp-circle-top-right .wrap {
  justify-content: flex-end;
}
.pp-pathway-wrap.pp-circle-top-right #centerCol {
  order: 1;
}

/* Bottom-left position - hide left and bottom, show right */
.pp-pathway-wrap.pp-circle-bottom-left #leftCol,
.pp-pathway-wrap.pp-circle-bottom-left .bottom {
  display: none !important;
}
.pp-pathway-wrap.pp-circle-bottom-left .wrap {
  justify-content: flex-start;
}

/* Bottom-right position - hide right and bottom, show left */
.pp-pathway-wrap.pp-circle-bottom-right #rightCol,
.pp-pathway-wrap.pp-circle-bottom-right .bottom {
  display: none !important;
}
.pp-pathway-wrap.pp-circle-bottom-right .wrap {
  justify-content: flex-end;
}

/* ====================================
   MODIFIERS (layout toggles)
   ==================================== */
/* Hide group titles in CAREERS modal */
.pp-modal-overlay.pp-kind-careers .pp-pathway .cell-group-title.title-in,
.pp-modal-overlay.pp-kind-careers .pp-pathway .cell-group-title-left.title-in,
.pp-modal-overlay.pp-kind-careers .pp-pathway .cell-group-title-right.title-in,
.pp-modal-overlay.pp-kind-careers
  .pp-pathway
  .cell-group-title-center.title-in {
  display: none !important;
}

/* Hide L3 + keep geometry rendered */
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #cell-l3 {
  display: none;
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #leftArms polyline:nth-of-type(3),
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #leftDots > g:nth-of-type(3) {
  opacity: 0;
  stroke-width: 0;
  pointer-events: none;
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #leftCol {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: auto 1fr 1fr;
  gap: var(--cellGap, 16px);
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #cell-l1 {
  grid-row: 2;
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #cell-l2 {
  grid-row: 3 !important;
  height: auto !important;
  min-height: 0 !important;
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #cell-l1,
.pp-modal-overlay .pp-pathway-wrap.pp-no-l3 #cell-l2 {
  height: auto !important;
  min-height: 0 !important;
}
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway-wrap.pp-no-l3
  #cell-l1
  .card-inner,
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway-wrap.pp-no-l3
  #cell-l2
  .card-inner,
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway-wrap.pp-no-l3
  #cell-l1
  .card-front,
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway-wrap.pp-no-l3
  #cell-l2
  .card-front,
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway-wrap.pp-no-l3
  #cell-l1
  .card-back,
#parker-pathways-root
  .pp-modal-overlay
  .pp-pathway-wrap.pp-no-l3
  #cell-l2
  .card-back {
  height: 100% !important;
  min-height: 0 !important;
}

/* Hide R3 and let R2 expand */
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #cell-r3 {
  display: none;
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #rightArms polyline:nth-of-type(3),
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #rightDots > g:nth-of-type(3) {
  opacity: 0;
  stroke-width: 0;
  pointer-events: none;
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #rightCol {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: auto auto 1fr;
  gap: var(--cellGap, 16px);
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #cell-r1 {
  grid-row: 2;
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #cell-r2 {
  grid-row: 3 / -1;
  height: auto !important;
  min-height: calc(var(--cellH) * 2 + var(--g, 16px));
}
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #cell-r2 .card-inner,
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #cell-r2 .card-front,
.pp-modal-overlay .pp-pathway-wrap.pp-no-r3 #cell-r2 .pp-card__body {
  height: 100%;
}

/* ====================================
   HYDRATION GATE
   ==================================== */
.pp-modal-overlay:not(.pp-hydrated) .pp-pathway .card-front,
.pp-modal-overlay:not(.pp-hydrated) .pp-pathway .card-back {
  visibility: hidden;
}
.pp-modal-overlay:not(.pp-hydrated) .pp-pathway .cell,
.pp-modal-overlay:not(.pp-hydrated) .pp-pathway .bottom-card {
  opacity: 0;
}
.pp-modal-overlay.pp-hydrated .pp-pathway .cell {
  opacity: 1;
  transition: opacity 180ms ease;
}
.pp-modal-overlay.pp-hydrated .pp-pathway .bottom-card:not(.revealed) {
  opacity: 0;
  transform: translateY(24px);
}
.pp-modal-overlay.pp-hydrated .pp-pathway .bottom-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================
   V2 CAREER MODAL (based on sample.html)
   ==================================== */
/* Modal content fade-in animation - only for content sections, not images or container */
.pp-program-modal > *:not(.pp-modal-close):not(.pp-program-modal__header):not(.pp-program-modal__loading) {
  animation: pp-modal-content-fade-in 0.4s ease-in-out forwards;
}

@keyframes pp-modal-content-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pp-career-modal {
  width: 100%;
  max-width: 875px;
  max-height: calc(90vh - 32px);
  margin: 0 auto;
  padding: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 8px;
  border: 1px solid rgba(82, 82, 82, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

/* Prevent any child elements from causing horizontal overflow */
.pp-career-modal * {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Force all text to wrap aggressively on mobile */
@media (max-width: 768px) {
  .pp-career-modal,
  .pp-career-modal * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Modal content wrapper - has the padding */
.pp-career-modal .pp-modal-content-wrapper,
.pp-program-modal .pp-modal-content-wrapper,
#parker-pathways-root .pp-modal-content-wrapper {
  padding: 20px 25px 25px 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 768px) {
  .pp-career-modal .pp-modal-content-wrapper,
  .pp-program-modal .pp-modal-content-wrapper,
  #parker-pathways-root .pp-modal-content-wrapper {
    padding: 20px 15px 15px 15px;
  }
}

/* Modal header controls container
   Works both inside #parker-pathways-root (main app) and in standalone modals */
.pp-modal-header-controls {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  padding: 0;
  background: transparent;
  z-index: 1000;
  flex-direction: column;
  height: auto;
}

@media (max-width: 768px) {
  .pp-modal-header-controls {
    padding: 0;
  }
}

/* V2 Modal: Close button - Simple X button on the right side of header */
.pp-career-modal .pp-modal-title,
.pp-program-modal .pp-modal-title {
  flex: 1;
  text-align: left;
  overflow: hidden;
}

/* Higher specificity to override legacy close button styles */
#parker-pathways-root .pp-career-modal .pp-modal-close,
#parker-pathways-root .pp-program-modal .pp-modal-close,
#pp-modal-root .pp-career-modal .pp-modal-close,
#pp-modal-root .pp-program-modal .pp-modal-close,
.pp-career-modal .pp-modal-close,
.pp-program-modal .pp-modal-close {
  position: static !important;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0;
  margin-left: 15px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0b1267 !important;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  gap: 0 !important;
}

#parker-pathways-root .pp-career-modal .pp-modal-close:hover,
#parker-pathways-root .pp-program-modal .pp-modal-close:hover,
#pp-modal-root .pp-career-modal .pp-modal-close:hover,
#pp-modal-root .pp-program-modal .pp-modal-close:hover,
.pp-career-modal .pp-modal-close:hover,
.pp-program-modal .pp-modal-close:hover {
  transform: scale(1.1) !important;
  opacity: 0.7;
}

/* Back button styles moved to modals.css for consolidation */

/* Header Section */
.pp-career-modal__header {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  min-height: 216px;
}

.pp-career-modal__header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  justify-content: center;
}

.pp-career-modal__title {
  color: #0b1267;
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pp-career-modal__subtitle {
  color: #343434;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word;
}

.pp-career-modal__header-image {
  flex: 1;
  width: 50%;
  height: 100%;
  min-height: 216px;
  border-radius: 8px !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder in loaded modal needs more height */
.pp-career-modal__header-image.pp-modal-placeholder {
  min-height: 272px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}

/* Placeholder during loading state uses smaller height */
.pp-career-modal__loading + * .pp-modal-placeholder,
.pp-career-modal:has(.pp-career-modal__loading) .pp-modal-placeholder {
  min-height: 216px;
}

/* Parker Programs Button */
.pp-career-modal__button-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.pp-career-modal__button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #254ca7;
  color: white;
  text-align: center;
  text-decoration: none;
  font-family: Barlow, sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button.pp-career-modal__button.pp-career-modal__button--programs {
  background-color: #D65D33 !important;
  border: 2px solid #D65D33 !important;
  margin-bottom: 10px;
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-family: "azo-sans-web", Sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 18px !important;
  letter-spacing: 0.64px !important;
  color: #FFF !important;
  padding: 11px 40px 11px 40px !important;
  border-radius: 25px !important;
  transform: translateY(0);
  min-height: 50px !important;
  transition: all 0.2s ease-in-out;
  text-decoration: none !important;
  text-align: center;
  gap: 10px;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-synthesis: none !important;
}

button.pp-career-modal__button.pp-career-modal__button--programs:hover {
  background-color: #c14d28 !important;
  border-color: #c14d28 !important;
  text-decoration: none !important;
  color: #FFF !important;
}

/* Animation for programs title attention grab */
@keyframes pp-title-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.pp-career-modal__programs-title.pp-pulse {
  animation: pp-title-pulse 0.6s ease-in-out;
  transform-origin: left center;
  display: inline-block;
}

/* Job Description Section */
.pp-career-modal__section-job-desc {
  padding: 10px;
  background: #dfe6fb;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pp-career-modal__section-title {
  color: #343434;
  font-size: 20px;
  font-weight: 600;
  word-wrap: break-word;
}

.pp-career-modal__section-text {
  color: #343434;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word;
  white-space: pre-line;
  margin-bottom: 20px;
}

.pp-career-modal__section-text ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.pp-career-modal__section-text li {
  margin: 4px 0;
  line-height: 1.4;
}

.pp-career-modal__subsection {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pp-career-modal__subsection-title {
  color: #343434;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  word-wrap: break-word;
}

/* Typical Duties Section */
.pp-career-modal__section-duties {
  padding: 10px;
  background: #c9d6fc;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Salary Section */
.pp-career-modal__section-salary {
  padding: 10px;
  background: #b2c5fc;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pp-career-modal__salary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pp-career-modal__salary-amount {
  color: #343434;
  font-size: 33px !important;
  font-weight: 400;
  word-wrap: break-word;
}

.pp-career-modal__salary-chart {
  align-self: stretch;
  height: auto;
  min-height: 80px;
  background: transparent;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.pp-career-modal__salary-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  padding: 0 7%;
  font-weight: 600;
  color: #343434;
}

.pp-salary-low {
  text-align: left;
}

.pp-salary-high {
  text-align: right;
}

/* Parker Programs Section */
.pp-career-modal__section-programs {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: rgb(223, 230, 251);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pp-career-modal__programs-title {
  color: #0b1267;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  word-wrap: break-word;
  margin-bottom: 15px;
}

.pp-program-chip-v2 {
  /* Button reset */
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;

  /* Styling */
  transition: opacity 0.2s ease, transform 0.1s ease;
  cursor: pointer;
}

.pp-program-chip-v2:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}

.pp-program-chip-v2:active {
  transform: translateY(0);
}

.pp-program-chip-v2:focus-visible {
  outline: 2px solid #0b1267;
  outline-offset: 2px;
}

/* Career chips in V3 program modals - same styling as program chips */
.pp-career-chip-v3 {
  /* Button reset */
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;

  /* Styling */
  transition: opacity 0.2s ease, transform 0.1s ease;
  cursor: pointer;
}

.pp-career-chip-v3:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}

.pp-career-chip-v3:active {
  transform: translateY(0);
}

.pp-career-chip-v3:focus-visible {
  outline: 2px solid #0b1267;
  outline-offset: 2px;
}

/* Careers section title in V3 program modals */
.pp-program-modal__careers-title {
  color: #0b1267;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  word-wrap: break-word;
  margin-bottom: 15px;
}

/* Button pulse animation when navigating from career modal */
@keyframes pp-btn-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(11, 18, 103, 0.7);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 15px rgba(11, 18, 103, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(11, 18, 103, 0);
  }
}

.pp-btn-pulse {
  animation: pp-btn-pulse 500ms ease-in-out;
  animation-fill-mode: forwards;
  position: relative;
  z-index: 10;
}

/* ===== Modal Card List (for "Leads To" sections) ===== */
/* Uses the same .pp-card structure as main page cards */
.pp-modal-card-list {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Ensure modal cards inherit base styles and add slight visual tweaks */
.pp-modal-card-list .pp-card {
  /* Let base .pp-card styles apply, just tweak shadow and border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  border-color: #8DA7FF !important;
}

.pp-modal-card-list .pp-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Ensure main page card images fill their containers without whitespace */
#parker-pathways-root .pp-list .pp-card__image-wrap {
  height: 100% !important;
  min-height: 145px !important;
}

#parker-pathways-root .pp-list img.pp-card__image {
  width: 100%;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 680px) {
  .pp-modal-card-list .pp-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .pp-modal-card-list .pp-card__image-wrap {
    border-radius: 16px 16px 0 0;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  .pp-modal-card-list .pp-card__image,
  .pp-modal-card-list img.pp-card__image {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  .pp-modal-card-list .pp-card__title,
  .pp-modal-card-list .pp-card__desc {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Responsive - Tablet */
@media (min-width: 680px) and (max-width: 1024px) {
  /* Loading state image max-height for tablet */
  .pp-career-modal:has(.pp-career-modal__loading) .pp-career-modal__header-image {
    max-height: 300px;
    object-fit: cover;
  }
}

/* Responsive - Mobile */
@media (max-width: 599px) {
  .pp-career-modal {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 0;
    margin: 0;
    left: 0;
    right: 0;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* Move header image to top */
  .pp-career-modal__header-image {
    order: -1;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  /* Ensure header controls stay at their position */
  .pp-modal-header-controls {
    order: 0;
  }

  /* Content wrapper comes after */
  .pp-modal-content-wrapper {
    order: 1;
    flex: 1;
    overflow-y: auto;
  }

  .pp-career-modal__header {
    flex-direction: column;
    min-height: auto;
    max-width: 100%;
  }

  .pp-career-modal__header-content {
    width: 100%;
    flex: 0 1 auto;
    max-width: 100%;
  }

  /* Loading state image max-height for mobile */
  .pp-career-modal:has(.pp-career-modal__loading) .pp-career-modal__header-image {
    max-height: 200px;
    object-fit: cover;
  }

  /* Mobile-specific animation - shrink and fade only (below 600px) */
}

@media (max-width: 768px) {

  .pp-career-modal__title {
    font-size: 24px;
    max-width: 100%;
    padding-right: 45px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .pp-career-modal__subtitle {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .pp-career-modal__salary-range {
    padding: 0 5%;
    max-width: 100%;
  }

  .pp-career-modal__section-text {
    margin-bottom: 10px;
    max-width: 100%;
  }

  /* Ensure all sections respect viewport width */
  .pp-career-modal__section-job-desc,
  .pp-career-modal__section-duties,
  .pp-career-modal__section-salary,
  .pp-career-modal__section-programs {
    max-width: 100%;
    width: 100%;
  }
}

/* Career and Program modal 50/50 layout for screens 600px and above */
@media (min-width: 600px) and (max-width: 768px) {
  .pp-career-modal__header,
  .pp-program-modal__header {
    display: flex;
    flex-direction: row;
    gap: 15px;
  }

  .pp-career-modal__header-content,
  .pp-program-modal__header-content {
    flex: 1;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  .pp-career-modal__button-container,
  .pp-program-modal__button-container {
    margin-top: 15px;
  }

  .pp-program-modal__title-row {
    gap: 0;
    margin-bottom: 0;
  }

  .pp-career-modal__header-content > *,
  .pp-program-modal__header-content > * {
    flex-shrink: 0;
    flex-grow: 0;
  }

  .pp-career-modal__subtitle,
  .pp-program-modal__subtitle {
    flex: 0 0 auto;
  }

  .pp-career-modal__header-image,
  .pp-program-modal__header-image {
    flex: 1;
    width: 50%;
    order: 1;
  }
}

@media (max-width: 680px) {
  .pp-career-modal__title {
    font-size: 21px !important;
  }

  /* Stack cards vertically on mobile */
  #parker-pathways-root .pp-item.pp-card,
  #parker-pathways-root .pp-card,
  #pp-modal-root .pp-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    max-height: none !important;
    min-height: auto !important;
  }

  /* Adjust card body padding for mobile */
  #parker-pathways-root .pp-card__body,
  #pp-modal-root .pp-card__body {
    padding: 12px 16px !important;
  }

  /* General pp-card styling for all cards in modals and elsewhere */
  .pp-card__image-wrap,
  #parker-pathways-root .pp-card__image-wrap,
  #pp-modal-root .pp-card__image-wrap,
  .pp-modal-card-list .pp-card__image-wrap,
  .pp-program-modal .pp-card__image-wrap,
  .pp-career-modal .pp-card__image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .pp-card__image,
  #parker-pathways-root .pp-card__image,
  #pp-modal-root .pp-card__image,
  .pp-modal-card-list .pp-card__image,
  .pp-program-modal .pp-card__image,
  .pp-career-modal .pp-card__image,
  img.pp-card__image {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  .pp-card__title,
  .pp-card__desc {
    margin-left: 0;
    margin-right: 0;
  }

  #pp-modal-root .pp-card__title,
  #pp-modal-root .pp-card__desc {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 680px) {
  .pp-career-modal__title {
    font-size: 18px !important;
  }
}

/* Source Attribution */
.pp-career-modal__source {
  font-size: 12px;
  font-style: italic;
  color: #666;
  margin-top: 20px;
  padding: 10px;
  text-align: left;
  line-height: 1.4;
}

.pp-career-modal__source a {
  color: #0b1267;
  text-decoration: underline;
}

/* Collapsible wrapper - always visible */
.pp-career-modal__collapsible {
  display: block;
  margin-bottom: 0;
}

/* Collapsible sections - mobile only */
@media (max-width: 768px) {
  .pp-career-modal__collapsible {
    background: #ECECEC;
    border-radius: 5px;
  }

  .pp-career-modal__collapsible-header {
    width: 100%;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .pp-career-modal__collapsible-content {
    display: block !important;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: transparent;
  }

  .pp-career-modal__collapsible-content.collapsed {
    max-height: 0;
  }

  .pp-career-modal__collapsible-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .pp-career-modal__collapsible-icon svg {
    display: block;
    width: 21px;
    height: 22px;
  }

  /* Section title styling in header */
  .pp-career-modal__collapsible-header .pp-career-modal__section-title {
    color: #343434;
    font-size: 20px;
    font-family: Barlow, sans-serif;
    font-weight: 600;
  }

  /* Override colored backgrounds to gray on mobile */
  .pp-career-modal__section-job-desc,
  .pp-career-modal__section-duties {
    display: flex !important;
    background: transparent !important;
    padding: 0 15px 15px 15px;
  }

  /* Hide section titles inside content on mobile (header has them) */
  .pp-career-modal__section-job-desc > .pp-career-modal__section-title,
  .pp-career-modal__section-duties > .pp-career-modal__section-title {
    display: none;
  }

  /* Match salary section to collapsible gray on mobile */
  .pp-career-modal__section-salary {
    background: #ECECEC !important;
  }
}

/* Loading state for V2 modal */
.pp-career-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
}

/* Loading image animation - positioned where header image will be */
.pp-career-modal:has(.pp-career-modal__loading) .pp-career-modal__header-image {
  width: 100%;
  max-width: 875px;
  height: auto;
  min-height: 300px;
  max-height: 400px;
  object-fit: cover;
  margin-bottom: 20px;
}

.pp-career-modal__loading-spinner {
  width: 150px;
  height: 150px;
  background-image: url('../img/parker-loading-flame.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pp-career-modal__loading-text {
  color: #343434;
  font-size: 16px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

@keyframes pp-spin {
  to { transform: rotate(360deg); }
}

/* Desktop - no collapsible behavior */
@media (min-width: 769px) {
  /* Hide collapsible wrapper and header on desktop */
  .pp-career-modal__collapsible {
    background: none;
    margin-bottom: 0;
  }

  .pp-career-modal__collapsible-header {
    display: none !important;
  }

  .pp-career-modal__collapsible-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ensure sections display normally on desktop */
  .pp-career-modal__section-job-desc,
  .pp-career-modal__section-duties {
    display: block !important;
  }
}

/* ===== PROGRAM MODAL V3 (Programs - No API, Custom 7 Sections) ===== */
.pp-program-modal {
  width: 100%;
  max-width: 875px;
  max-height: calc(90vh - 32px);
  margin: 0 auto;
  padding: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 8px;
  border: 1px solid rgba(82, 82, 82, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

.pp-program-modal * {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}


/* Title row with back button - stacked layout */
.pp-program-modal__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

/* Back button styles moved to modals.css for consolidation */

.pp-program-modal__title-row .pp-program-modal__title {
  width: 100%;
  margin: 0;
}

/* Header Section */
.pp-program-modal__header {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  min-height: 216px;
}

.pp-program-modal__header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  justify-content: center;
}

.pp-program-modal__title {
  color: #0b1267;
  font-size: 28px;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pp-program-modal__subtitle {
  color: #343434;
  font-size: 18px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word;
}

/* Button container - centered layout */
.pp-program-modal__button-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

/* Button container in mission section */
.pp-program-modal__button-container--mission {
  margin-top: 20px;
}

/* Individual button styling */
.pp-program-modal__button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #254ca7;
  color: white;
  text-align: center;
  text-decoration: none;
  font-family: Barlow, sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.pp-program-modal__button:hover {
  background-color: #1a3a7f;
}

/* Apply button specific styling */
.pp-program-modal__button--apply {
  background-color: #D65D33;
  border: 2px solid #D65D33;
  margin-bottom: 10px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-family: "azo-sans-web", Sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.64px;
  color: #FFF !important;
  padding: 11px 40px 11px 40px;
  border-radius: 25px;
  transform: translateY(0);
  min-height: 50px;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  text-align: center;
  gap: 10px;
}

.pp-program-modal__button--apply:hover {
  background-color: #c14d28;
  border-color: #c14d28;
  text-decoration: none;
  color: #FFF !important;
}

/* Button icon styling */
.pp-program-modal__button-icon {
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out;
}

.pp-program-modal__button--apply:hover .pp-program-modal__button-icon {
  transform: translateX(5px);
}

/* Requirements button specific styling */
.pp-program-modal__button--requirements {
  border: 2px solid #FFF;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-family: "azo-sans-web", Sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.64px;
  color: #FFF !important;
  padding: 11px 40px 11px 40px;
  border-radius: 25px;
  transform: translateY(0);
  min-height: 50px;
  text-decoration: none;
  text-align: center;
}

.pp-program-modal__button--requirements:hover {
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  color: #FFF !important;
  transform: translateY(-5px);
}

.pp-program-modal__header-image {
  flex: 1;
  width: 50%;
  height: 100%;
  min-height: 216px;
  border-radius: 8px !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Placeholder in loaded modal needs more height */
.pp-program-modal__header-image.pp-modal-placeholder {
  min-height: 272px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}

/* Placeholder during loading state uses smaller height */
.pp-program-modal__loading + * .pp-modal-placeholder,
.pp-program-modal:has(.pp-program-modal__loading) .pp-modal-placeholder {
  min-height: 216px;
}

/* Section Title (shared) */
.pp-program-modal__section-title {
  color: #343434;
  font-size: 20px;
  font-family: Barlow, sans-serif;
  font-weight: 600;
  word-wrap: break-word;
}

/* Section Text (shared) */
.pp-program-modal__section-text {
  color: #343434;
  font-size: 18px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word;
  white-space: pre-line;
}

/* CTA Section */
/* Introduction Section */
.pp-program-modal__section-introduction {
  background: #dfe6fb;
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  align-items: stretch;
  min-height: fit-content;
}

.pp-program-modal__introduction-image {
  width: 50%;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px 0 0 8px;
  flex-shrink: 0;
}

.pp-program-modal__introduction-content {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  flex-shrink: 0;
}

/* When no image, content takes full width */
.pp-program-modal__section-introduction:not(:has(.pp-program-modal__introduction-image)) .pp-program-modal__introduction-content,
.pp-program-modal__section-introduction.pp-full-width .pp-program-modal__introduction-content {
  width: 100%;
}

/* Introduction heading styling */
.pp-program-modal__introduction-content .pp-program-modal__section-text:first-child {
  color: rgb(37, 76, 167);
  font-family: azo-sans-web, sans-serif;
  font-size: 39px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 54px;
}

/* Disclaimer Text */
.pp-program-modal__disclaimer {
  font-size: 12px;
  font-style: italic;
  text-align: right;
  color: #666;
}

/* Bottom CTA Section */
.pp-program-modal__section-cta {
  background: white;
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  box-shadow: none;
  align-items: stretch;
  min-height: fit-content;
}

.pp-program-modal__cta-image {
  width: 50%;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px 0 0 8px;
  flex-shrink: 0;
}

.pp-program-modal__cta-content {
  width: 50%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  flex-shrink: 0;
}

.pp-program-modal__cta-tagline {
  color: #D65D33;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pp-program-modal__cta-heading {
  color: #254ca7;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
}

.pp-program-modal__cta-text {
  color: #343434;
  font-size: 16px;
  line-height: 1.6;
  font-family: Barlow, sans-serif;
}

/* CTA button specific styling */
.pp-program-modal__button--cta {
  background-color: #D65D33;
  border: 2px solid #D65D33;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-family: "azo-sans-web", Sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.64px;
  color: #FFF !important;
  padding: 11px 40px 11px 40px;
  border-radius: 25px;
  min-height: 50px;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  text-align: center;
  gap: 10px;
}

.pp-program-modal__button--cta:hover {
  background-color: #c14d28;
  border-color: #c14d28;
  text-decoration: none;
  color: #FFF !important;
}

/* When no image, content takes full width */
.pp-program-modal__section-cta:not(:has(.pp-program-modal__cta-image)) .pp-program-modal__cta-content,
.pp-program-modal__section-cta.pp-full-width .pp-program-modal__cta-content {
  width: 100%;
}

/* Inline images (when text exceeds breakpoint) */
.pp-introduction-inline-image,
.pp-cta-inline-image {
  float: right;
  max-width: 45%;
  height: auto;
  margin: 0 0 20px 20px;
  border-radius: 8px;
  object-fit: cover;
}

/* For image-inline mode, content takes full width */
.pp-program-modal__section-introduction.pp-image-inline .pp-program-modal__introduction-content,
.pp-program-modal__section-cta.pp-image-inline .pp-program-modal__cta-content {
  width: 100%;
}

/* Clear float after content to prevent layout issues */
.pp-program-modal__introduction-content::after,
.pp-program-modal__cta-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Our Mission Section */
.pp-program-modal__section-mission {
  background-image: linear-gradient(150deg, #254ca7 0%, #0e1781 100%);
  border-radius: 8px;
  padding: 10px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: none;
}

/* Mission title/header styling */
.pp-program-modal__section-mission > .pp-program-modal__section-text:first-child {
  color: #fa8157;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 39px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 54px;
}

/* Mission text styling */
.pp-program-modal__section-mission > .pp-program-modal__section-text:nth-child(2) {
  color: white;
  font-size: 18px;
  line-height: 30px;
}

/* Stats Section (6 rows × 2 cols, col2 has 3 cells spanning 2 rows each) */
.pp-program-modal__section-stats {
  background: white;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: none;
}

/* Stats header styling */
.pp-program-modal__stats-header {
  color: #fa8157;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 39px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 54px;
}

.pp-program-modal__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 5px;
}

.pp-program-modal__stat-item {
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  border-radius: 8px;
  color: #343434;
  font-size: 16px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
  line-height: 1.4;
}

.pp-program-modal__stat-item--span2 {
  grid-row: span 2;
}

/* Style for statistics value cells (1st, 4th, 7th children = stat1.value, stat2.value, stat3.value) */
.pp-program-modal__stats-grid > .pp-program-modal__stat-item:nth-child(3n+1) {
  color: #254ca7;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 39px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 50px;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Style for statistics label cells (3rd, 6th, 9th children = stat1.label, stat2.label, stat3.label) */
.pp-program-modal__stats-grid > .pp-program-modal__stat-item:nth-child(3n) {
  color: #254ca7;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 35px;
  padding-top: 0px;
}

/* Style for statistics text cells (2nd, 5th, 8th children = stat1.text, stat2.text, stat3.text) */
.pp-program-modal__stats-grid > .pp-program-modal__stat-item:nth-child(3n+2) {
  font-size: 18px;
}

/* Concentrations Section */
.pp-program-modal__section-concentrations {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: none;
}

.pp-program-modal__concentrations-heading {
  color: #254ca7;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.3;
}

.pp-program-modal__concentrations-content {
  color: #343434;
  font-size: 16px;
  line-height: 1.6;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

.pp-program-modal__concentrations-link {
  color: #D65D33;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.pp-program-modal__concentrations-link:hover {
  color: #254ca7;
}

/* Video/Image Section */
.pp-program-modal__section-videoimage {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: none;
}

.pp-program-modal__videoimage-heading {
  color: #254ca7;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

.pp-program-modal__videoimage-text {
  color: #343434;
  font-size: 16px;
  line-height: 1.6;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

.pp-program-modal__videoimage-video,
.pp-program-modal__videoimage-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: none;
}

/* Career Path Section (special layout) */
.pp-program-modal__section-careerpath {
  background: transparent;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pp-program-modal__careerpath-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pp-program-modal__careerpath-col1 {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0px;
}

.pp-program-modal__careerpath-col2 {
  background: transparent;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #343434;
  font-size: 18px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
  line-height: 30px;
}

.pp-program-modal__careerpath-item {
  background: transparent;
  padding: 10px;
  border-radius: 8px;
  color: #343434;
  font-size: 16px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

/* Career path slogan styling (first item in col1) */
.pp-program-modal__careerpath-col1 > .pp-program-modal__careerpath-item:first-child {
  color: #254ca7;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 39px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 42px;
}

/* Career path tagline styling (second item in col1) */
.pp-program-modal__careerpath-col1 > .pp-program-modal__careerpath-item:last-child {
  color: #343434;
  font-size: 21px;
  line-height: 30px;
  font-weight: 600;
  padding-top: 0px;
}

.pp-program-modal__careerpath-heading {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #254ca7;
}

.pp-program-modal__careerpath-content {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* Careers This May Lead To Section */
.pp-program-modal__section-careers {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: rgb(223, 230, 251);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Program Highlights Section (2 cols × 2 rows) */
.pp-program-modal__section-highlights {
  background: #D65D33;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: none;
}

/* Highlights header styling */
.pp-program-modal__highlights-header {
  color: white;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 39px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 54px;
}

.pp-program-modal__highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pp-program-modal__highlight-program {
  background: white;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: none;
}

.pp-program-modal__highlight-program-heading {
  color: #254ca7;
  font-family: "Barlow", Sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 43px;
}

.pp-program-modal__highlight-program-text {
  color: #343434;
  font-size: 16px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
  line-height: 1.4;
}

/* Extra Information Section (collapsible) */
.pp-program-modal__section-extra {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Extra text styling */
.pp-program-modal__section-extra > .pp-program-modal__section-text {
  color: #343434;
  font-size: 18px;
  line-height: 30px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

/* SACSCOC Accreditation Section (2 columns) */
.pp-program-modal__section-accreditation {
  background: white;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: none;
}

.pp-program-modal__accreditation-grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 10px;
}

.pp-program-modal__accreditation-col {
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  border-radius: 8px;
  color: #343434;
  font-size: 16px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

/* Accreditation image column - center horizontally and vertically */
.pp-program-modal__accreditation-image-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-program-modal__accreditation-image {
  max-width: 100%;
  height: auto;
}

.pp-program-modal__accreditation-heading {
  color: #254ca7;
  font-family: "azo-sans-web", Sans-serif;
  font-size: 36px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 54px;
  margin-bottom: 10px;
}

.pp-program-modal__accreditation-content {
  color: #343434;
  font-size: 18px;
  line-height: 30px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

/* Collapsible wrapper - always visible */
.pp-program-modal__collapsible {
  display: block;
  margin-bottom: 0;
}

/* Responsive - Tablet */
@media (min-width: 680px) and (max-width: 1024px) {
  /* Loading state image max-height for tablet */
  .pp-program-modal:has(.pp-program-modal__loading) .pp-program-modal__header-image {
    max-height: 300px;
    object-fit: cover;
  }
}

/* Collapsible sections - mobile only */
@media (max-width: 768px) {
  .pp-program-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
}

/* Program modal - mobile layout below 600px */
@media (max-width: 599px) {
  /* Move header image to top */
  .pp-program-modal__header-image {
    order: -1;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
}

@media (max-width: 768px) {

  /* Ensure header controls stay at their position */
  .pp-modal-header-controls {
    order: 0;
  }

  /* Content wrapper comes after */
  .pp-modal-content-wrapper {
    order: 1;
    flex: 1;
    overflow-y: auto;
  }

  .pp-program-modal__title {
    font-size: 24px !important;
    max-width: 100%;
    padding-right: 45px;
  }

  .pp-program-modal__collapsible {
    background: #ECECEC;
    border-radius: 8px;
  }

  .pp-program-modal__collapsible-header {
    width: 100%;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .pp-program-modal__collapsible-content {
    display: block !important;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: transparent;
    padding: 0 15px 15px 15px;
  }

  .pp-program-modal__collapsible-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .pp-program-modal__collapsible-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .pp-program-modal__collapsible-icon svg {
    display: block;
    width: 21px;
    height: 22px;
  }

  /* Section title styling in header */
  .pp-program-modal__collapsible-header .pp-program-modal__section-title {
    color: #343434;
    font-size: 20px;
    font-family: Barlow, sans-serif;
    font-weight: 600;
  }

  /* Hide section titles inside collapsible content on mobile */
  .pp-program-modal__collapsible-content .pp-program-modal__section-title {
    display: none;
  }

  /* Mobile responsive grids */
  .pp-program-modal__stats-grid,
  .pp-program-modal__careerpath-grid,
  .pp-program-modal__highlights-grid,
  .pp-program-modal__accreditation-grid {
    grid-template-columns: 1fr;
  }

  .pp-program-modal__careerpath-col1 {
    grid-template-rows: auto;
    gap: 10px;
  }

  .pp-program-modal__header-image {
    width: 100%;
    min-height: 150px;
    max-height: 200px;
  }
}

/* Program modal header - column layout below 600px only */
@media (max-width: 599px) {
  .pp-program-modal__header {
    flex-direction: column;
    min-height: auto;
  }
}

@media (max-width: 768px) {

  /* Loading state image max-height for mobile */
  .pp-program-modal:has(.pp-program-modal__loading) .pp-program-modal__header-image {
    max-height: 200px;
    object-fit: cover;
  }

  .pp-program-modal__header-content {
    flex: 0 1 auto;
  }

  /* Hide introduction and CTA images on mobile */
  .pp-program-modal__introduction-image,
  .pp-introduction-inline-image,
  .pp-program-modal__cta-image,
  .pp-cta-inline-image {
    display: none !important;
  }

  /* Make introduction and CTA content full width when images are hidden */
  .pp-program-modal__introduction-content,
  .pp-program-modal__cta-content {
    width: 100% !important;
  }

  .pp-program-modal__title-row {
    gap: 0px;
  }

  .pp-program-modal__title-row .pp-program-modal__title {
    margin-top: 20px;
  }

  /* Stack inline images on mobile instead of floating */
  .pp-introduction-inline-image,
  .pp-cta-inline-image {
    float: none;
    max-width: 100%;
    margin: 0 0 15px 0;
    display: block;
  }
}

@media (max-width: 680px) {
  .pp-program-modal__title {
    font-size: 21px !important;
  }

  /* Ensure pp-cards in program modals have consistent styling */
  .pp-program-modal .pp-card__image-wrap {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  .pp-program-modal .pp-card__image,
  .pp-program-modal img.pp-card__image {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  .pp-program-modal .pp-card__title,
  .pp-program-modal .pp-card__desc {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 680px) {
  .pp-program-modal__title {
    font-size: 18px !important;
  }
}

/* Desktop - no collapsible behavior for V3 Stats and Extended */
@media (min-width: 769px) {
  .pp-program-modal__collapsible-header {
    display: none !important;
  }

  .pp-program-modal__collapsible-content {
    display: block !important;
    padding: 10px;
  }

  /* Stats section gets blue background on desktop */
  .pp-program-modal__collapsible[data-collapsible="stats"] .pp-program-modal__collapsible-content {
    background: #b2c5fc;
    border-radius: 8px;
  }

  /* Extended section gets transparent background on desktop */
  .pp-program-modal__collapsible[data-collapsible="extended"] .pp-program-modal__collapsible-content {
    background: transparent;
    border-radius: 8px;
  }

  /* Show section titles on desktop */
  .pp-program-modal__collapsible-content .pp-program-modal__section-title {
    display: block;
  }
}

/* Loading spinner (same as V2) */
.pp-program-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 20px;
}

/* Loading image animation - positioned where header image will be */
.pp-program-modal:has(.pp-program-modal__loading) .pp-program-modal__header-image {
  width: 100%;
  max-width: 875px;
  height: auto;
  min-height: 300px;
  max-height: 400px;
  object-fit: cover;
  margin-bottom: 20px;
}

.pp-program-modal__loading-spinner {
  width: 150px;
  height: 150px;
  background-image: url('../img/parker-loading-flame.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pp-program-modal__loading-text {
  color: #343434;
  font-size: 16px;
  font-family: Barlow, sans-serif;
  font-weight: 400;
}

/* Header image transition animation - only during loading->loaded transition */
@media (min-width: 600px) {
  .pp-program-modal__header-image.pp-image-transitioning {
    animation: pp-modal-image-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

/* Mobile-specific animation for program modal (below 600px) */
@media (max-width: 599px) {
  .pp-program-modal__header-image.pp-image-transitioning {
    animation: pp-modal-image-slide-in-mobile 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

.pp-muted {
  color: #666;
  font-style: italic;
}

/* ===============================
   Modal Trigger Button Shortcode
   =============================== */

/* Global styles for [pp_modal] shortcode buttons */
.pp-modal-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: #091268;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pp-modal-trigger-btn:hover {
  background: #0a1580;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pp-modal-trigger-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pp-modal-trigger-btn:focus {
  outline: 2px solid #091268;
  outline-offset: 2px;
}

/* Responsive sizing for mobile */
@media (max-width: 768px) {
  .pp-modal-trigger-btn {
    padding: 10px 16px;
    font-size: 14px;
    max-width: 100%;
    width: auto;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .pp-modal-trigger-btn {
    padding: 8px 12px;
    font-size: 13px;
    display: block;
    width: 100%;
  }
}

/* Modal-only wrapper: invisible container that doesn't affect page layout
   Used for individual modal triggers - provides styling context but doesn't show on page
   #pp-modal-root is separate on body, not nested inside this wrapper */
#parker-pathways-root.pp-modal-only-wrapper {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* =============================================================================
   Full-Page Modal - Embeds the entire Pathways interface in a modal
   ============================================================================= */

/* Full-page modal inherits all #parker-pathways-root styles since it's rendered inside the modal root */
/* Additional specific overrides for full-page modal container */
.pp-full-page-modal-container {
  /* Container-specific styles already defined below */
}

/* Full-page modal uses same overlay structure as individual modals */
.pp-modal-overlay.pp-full-page-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999999 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pp-modal-overlay.pp-full-page-modal .pp-modal-sheet {
  width: 95%;
  max-width: 1400px;
  height: 90vh;
  max-height: 900px;
}

.pp-full-page-modal-sheet {
  position: relative;
  width: 95%;
  max-width: 1400px;
  height: 90vh;
  max-height: 900px;
  background: rgba(12, 18, 99, 0.85);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.pp-full-page-modal-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Close button for full-page modal - high specificity to override general modal close button */
#parker-pathways-root .pp-modal-close.pp-full-page-modal-close,
.pp-full-page-modal .pp-modal-close.pp-full-page-modal-close,
.pp-modal-close.pp-full-page-modal-close {
  position: absolute !important;
  top: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

#parker-pathways-root .pp-modal-close.pp-full-page-modal-close:hover,
.pp-full-page-modal .pp-modal-close.pp-full-page-modal-close:hover,
.pp-modal-close.pp-full-page-modal-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateX(-50%) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.pp-full-page-modal-close:active {
  transform: scale(0.98);
}

.pp-full-page-modal-close svg {
  width: 20px;
  height: 20px;
}

/* Modal content styling */
.pp-full-page-modal-container {
  background: transparent;
  min-height: 100%;
  padding: 10px;
  padding-bottom: 150px;
  box-sizing: border-box;
}

/* Ensure pp-wrap has proper styling in modal */
.pp-full-page-modal .pp-wrap {
  min-height: 100%;
}

/* Ensure grid has proper spacing in modal */
.pp-full-page-modal .pp-list {
  min-height: 300px;
}

/* Modal uses same grid layout as main page below the fold */
.pp-full-page-modal .pp-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 560px) !important;
  grid-template-areas: "controls search" !important;
  gap: 12px !important;
  margin-bottom: 20px;
  margin-top: 85px !important; /* Space for close button */
}

/* Modal controls - left side */
.pp-full-page-modal .pp-controls {
  grid-area: controls !important;
  display: flex !important;
}

/* Modal toggle inside controls */
.pp-full-page-modal .pp-controls .pp-switch-wrapper {
  display: inline-flex !important;
}

/* Modal collapsible - right side, ALWAYS visible (override scroll-based hiding) */
.pp-full-page-modal .pp-subfilters-collapsible {
  grid-area: search !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  max-height: none !important;
  transform: none !important;
}

/* Modal collapsible header - always visible */
.pp-full-page-modal .pp-subfilters-collapsible-header {
  display: flex !important;
}

/* Modal 3-way toggle - hidden by default (above 1120px) */
.pp-full-page-modal .pp-modal-three-way {
  display: none !important;
}

/* Modal search panel - hidden by default and above 1120px */
.pp-full-page-modal .pp-modal-search-panel {
  display: none !important;
}

/* Above 1120px: always hide modal search panel (use collapsible instead) */
@media (min-width: 1121px) {
  .pp-full-page-modal .pp-modal-search-panel,
  .pp-full-page-modal .pp-modal-search-panel.active {
    display: none !important;
  }
}

/* At 1120px and below: show 3-way toggle, hide controls and collapsible */
@media (max-width: 1120px) {
  /* Hide controls and collapsible in modal */
  .pp-full-page-modal .pp-controls {
    display: none !important;
  }

  .pp-full-page-modal .pp-subfilters-collapsible {
    display: none !important;
  }

  /* Show 3-way toggle - override opacity/pointer-events from main page */
  .pp-full-page-modal .pp-modal-three-way {
    display: inline-flex !important;
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Modal 3-way toggle highlighter positions */
  .pp-full-page-modal .pp-modal-three-way [type="radio"]:checked#pp-three-programs-modal ~ .pp-three-highlighter {
    transform: translateX(0);
  }

  .pp-full-page-modal .pp-modal-three-way [type="radio"]:checked#pp-three-careers-modal ~ .pp-three-highlighter {
    transform: translateX(100%);
  }

  .pp-full-page-modal .pp-modal-three-way [type="radio"]:checked#pp-three-search-modal ~ .pp-three-highlighter {
    transform: translateX(200%);
  }

  /* Modal head becomes flex column for 3-way layout */
  .pp-full-page-modal .pp-head {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    gap: 16px !important;
  }
}

/* Modal search panel - override ALL main page hiding rules with high specificity */
/* Only show between 681px and 1120px (3-way toggle range) */
@media (min-width: 681px) and (max-width: 1120px) {
  .pp-full-page-modal .pp-head .pp-modal-search-panel.active,
  .pp-modal-overlay.pp-full-page-modal .pp-modal-search-panel.active,
  .pp-full-page-modal .pp-search-panel.pp-modal-search-panel.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
}

/* At 680px and below: hide 3-way toggle, show collapsible */
@media (max-width: 680px) {
  .pp-full-page-modal .pp-modal-three-way {
    display: none !important;
  }

  .pp-full-page-modal .pp-modal-search-panel,
  .pp-full-page-modal .pp-modal-search-panel.active {
    display: none !important;
  }

  /* Reset head to flex column layout */
  .pp-full-page-modal .pp-head {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    gap: 12px !important;
  }

  /* Override main page's display:contents rule - use higher specificity */
  .pp-full-page-modal .pp-controls,
  .pp-full-page-modal #parker-pathways-root .pp-controls,
  #parker-pathways-root.pp-full-page-modal-container .pp-controls {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
  }

  .pp-full-page-modal .pp-controls .pp-switch-wrapper,
  #parker-pathways-root.pp-full-page-modal-container .pp-controls .pp-switch-wrapper {
    width: 100% !important;
  }

  .pp-full-page-modal .pp-subfilters-collapsible,
  #parker-pathways-root.pp-full-page-modal-container .pp-subfilters-collapsible {
    display: flex !important;
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Disable sticky positioning for group headers in full-page modal */
.pp-full-page-modal .pp-grouphead {
  position: relative !important;
  top: auto !important;
}

/* Ensure proper scroll behavior */
.pp-full-page-modal-container::-webkit-scrollbar {
  width: 10px;
}

.pp-full-page-modal-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0 12px 12px 0;
}

.pp-full-page-modal-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.pp-full-page-modal-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .pp-full-page-modal-sheet {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .pp-full-page-modal-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .pp-full-page-modal-container {
    padding: 10px;
    padding-bottom: 130px;
  }

  .pp-full-page-modal .pp-list {
    padding: 0;
  }

  /* Modal stacked layout on mobile */
  .pp-full-page-modal .pp-head {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    margin-top: 85px !important;
    gap: 12px !important;
  }

  .pp-full-page-modal .pp-controls {
    width: 100% !important;
  }

  .pp-full-page-modal .pp-controls .pp-switch-wrapper {
    width: 100% !important;
  }

  .pp-full-page-modal .pp-subfilters-collapsible {
    width: 100% !important;
  }
}

/* ===================================================================
   Typing Animation
   =================================================================== */

.pp-typing-container {
  position: relative;
  text-align: center;
  padding: 0;
  margin-top: -12px;
  max-width: 1200px;
  width: 100%;
  /* Reserve space to prevent CLS when typing animation starts */
  min-height: 50px;
}

.pp-typing-text {
  font-size: clamp(18px, 4vw, 32px);
  font-weight: 600;
  color: #ffffff;
  opacity: 0.8;
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ppTypingWord {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
}

.pp-typing-cursor {
  display: inline-block;
  font-weight: 400;
  color: #ffffff;
  animation: pp-blink 1s step-end infinite;
  margin-left: 2px;
}

@keyframes pp-blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .pp-typing-container {
    min-height: 45px;
    padding: 0;
  }
}

/* 680px - 768px */
@media (min-width: 681px) and (max-width: 768px) {
  .pp-typing-container {
    margin-top: -24px;
  }

  .pp-featured-heading {
    font-size: 18px !important;
  }
}

/* Tablet/Mobile - 768px and below */
@media (max-width: 768px) {
  .pp-typing-container {
    padding: 0;
    min-height: 40px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .pp-typing-container {
    padding: 0;
    min-height: 35px;
  }
}

/* Small Mobile */
@media (max-width: 375px) {
  .pp-typing-container {
    min-height: 30px;
    margin-top: 0;
  }

  .pp-typing-text {
    font-size: 12px;
    align-items: flex-start;
  }
}

/* ===================================================================
   Explore Navigation (below typing animation)
   =================================================================== */
.pp-explore-navigation {
  position: relative;
  text-align: center;
  padding: 0 20px;
  max-width: 600px;
  width: 100%;
  min-height: 120px;
  visibility: visible;
}

.pp-explore-title {
  font-size: 27px;
  font-weight: 600;
  color: #FFFFFFD9;
  margin: 0 0 24px 0;
}

/* Switch wrapper when in explore navigation */
.pp-explore-navigation .pp-switch-wrapper {
  margin: 0 auto;
  transition: all 0.3s ease;
}

.pp-explore-helper {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pp-explore-navigation {
    padding: 0 16px;
  }

  .pp-explore-title {
    font-size: 16px;
  }

  .pp-explore-helper {
    font-size: 13px;
  }
}

@media (max-width: 680px) {
  .pp-hero {
    padding-left: 0;
    padding-right: 0;
  }

  .pp-explore-navigation {
    padding: 0;
    max-width: 100%;
  }

  .pp-explore-navigation .pp-switch-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .pp-explore-helper {
    font-size: 12px;
  }
}

/* ===================================================================
   Featured Section - Horizontal Scrolling Cards
   =================================================================== */

.pp-featured {
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Performance: Reserve space to prevent CLS */
  min-height: 232px; /* heading (24px + 16px margin) + cards (160px + 32px padding) */
}

/* When featured is inside hero section - positioned absolutely to prevent CLS */
.pp-hero .pp-featured {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 24px;
}

/* Hide featured section at 320px and below */
@media (max-width: 320px) {
  .pp-featured {
    display: none !important;
  }

  /* Remove hero min-height so list appears right after toggle */
  .pp-hero {
    height: auto;
    min-height: auto;
    max-height: none;
    padding-bottom: 0;
  }
}

.pp-featured-heading {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff !important;
  opacity: 0.8;
  margin: 0 0 16px 0;
  text-align: left;
}

.pp-featured-scroll {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Performance: Explicit height to prevent CLS */
  height: 192px; /* 160px card height + 32px padding */
}

.pp-featured-card {
  flex: 0 0 280px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
  background-size: cover;
  background-position: center;
  background-color: #e5e7eb;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: auto;
}

.pp-featured-card.pp-center-active {
  transform: translateY(-4px) scale(1.20);
  transform-origin: center bottom;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 10;
  isolation: isolate;
}

.pp-featured-card.pp-push-left {
  transform: translateX(var(--push-distance)) translateZ(0);
}

.pp-featured-card.pp-push-right {
  transform: translateX(var(--push-distance)) translateZ(0);
}

.pp-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.pp-featured-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  z-index: 1;
}

.pp-featured-card-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0.8;
  text-align: left;
}

/* Related links container gradient */
.be-related-link-container {
  background: linear-gradient(to bottom, rgba(11, 18, 103, 0), rgba(11, 18, 103, 1));
}

.be-related-link-container .be-label,
.be-related-link-container .be-list {
  display: none !important;
}

/* Mobile adjustments - hide featured at 680px and below */
@media (max-width: 680px) {
  .pp-featured {
    display: none !important;
  }
}

/* ===================================================================
   THREE-WAY TOGGLE (Programs | Careers | Search)
   Only visible at 1120px and below
   =================================================================== */

/* Hide 3-way toggle and search panel by default (above 1120px) */
.pp-three-way-toggle,
.pp-search-panel {
  display: none;
}

/* --------- Sticky Search Bar --------- */
.pp-sticky-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, #F0F0F0, #E3E3E3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding: 12px 10px;
  /* Account for iOS safe area */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile: ensure proper safe area handling */
@media (max-width: 680px) {
  .pp-sticky-search {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

.pp-sticky-search.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Sticky search inner layout */
.pp-sticky-search-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  position: relative;
}

.pp-sticky-search-wrap {
  position: relative;
  flex: 1;
}

.pp-sticky-search-icon {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 32px;
  stroke: #999;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(to bottom, #F5F5F5, #E0E0E0);
  border: 1px solid #C0C0C0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.pp-sticky-search-icon:hover {
  background: linear-gradient(to bottom, #FAFAFA, #E5E5E5);
}

.pp-sticky-search-icon:active {
  background: linear-gradient(to bottom, #E0E0E0, #D0D0D0);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.pp-sticky-search-icon svg {
  width: 18px;
  height: 18px;
  stroke: #999;
}

#ppSearchSticky {
  width: 100%;
  padding: 10px 52px 10px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  background: #F8F9FF !important;
  color: #1a1d3a !important;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Hide native clear button for sticky search */
#ppSearchSticky::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none !important;
}

.pp-sticky-search .pp-search input {
  background: #FFFFFF !important;
  border: 1px solid #D0D0D0 !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  color: #333 !important;
}

.pp-sticky-search .pp-search input::placeholder {
  color: rgba(26, 29, 58, 0.5) !important;
}

.pp-sticky-search .pp-search input:focus {
  border-color: rgba(214, 92, 51, 0.4) !important;
  background: #F8F9FF !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 2px rgba(214, 92, 51, 0.1) !important;
}

.pp-sticky-clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #2F3594;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.pp-sticky-clear svg {
  stroke: #2F3594;
}

.pp-sticky-clear:hover {
  opacity: 0.7;
}

.pp-sticky-clear svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pp-sticky-clear span {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* At 681px-1120px: use 3-way toggle system */
@media (min-width: 681px) and (max-width: 1120px) {
  /* Hide original collapsible search/filters - replaced by search panel */
  #parker-pathways-root .pp-subfilters-collapsible {
    display: none !important;
  }

  /* Hide controls container - we use the hero toggle + 3-way toggle instead */
  #parker-pathways-root .pp-controls {
    display: none !important;
    max-height: 0 !important;
  }

  /* Keep hero toggle visible - it will be hidden via JS on scroll */
  .pp-explore-navigation {
    transition: opacity 0.3s ease;
  }

  /* Adjust head layout for 3-way toggle */
  #parker-pathways-root .pp-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* 3-way toggle - hidden by default, shown via JS on scroll */
  .pp-three-way-toggle {
    display: inline-flex;
    position: relative;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100%;
    margin: 0 auto 16px;
    order: 1;
    /* Initially hidden - JS controls visibility */
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: box-shadow 0.2s ease 0.2s;
    overflow: hidden;
  }

  /* Gradient overlay using pseudo-element */
  .pp-three-way-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #20255C, #313799);
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.2s ease 0.2s;
    z-index: 0;
    pointer-events: none;
  }

  /* When search is selected, show gradient background and shadow */
  .pp-three-way-toggle:has(#pp-three-search:checked) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease;
  }

  .pp-three-way-toggle:has(#pp-three-search:checked)::before {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
}

/* Disable transitions during resize */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* At 680px and below: no 3-way toggle, use original collapsible dropdown */
@media (max-width: 680px) {
  /* Hide 3-way toggle completely */
  .pp-three-way-toggle {
    display: none !important;
  }

  /* Hide search panel - use original collapsible instead */
  .pp-search-panel {
    display: none !important;
  }

  /* Hide empty controls container on main page (toggle is in hero) */
  #parker-pathways-root .pp-controls {
    display: none !important;
    max-height: 0 !important;
  }

  /* Wrap - normal positioning */
  #parker-pathways-root .pp-wrap {
    margin-top: 0;
    padding-top: 0;
  }

  /* Navigation in hero */
  .pp-explore-navigation {
    min-height: 42px;
    height: 42px;
    position: relative;
    z-index: 3;
  }

  /* 2-way toggle gradient background to match search header */
  #parker-pathways-root .pp-explore-navigation .pp-switch-wrapper {
    background: linear-gradient(to right, #232768, #2F3797);
    border-radius: 30px;
  }

  /* Collapsible - JS moves it after explore-nav on mobile, so zero margin between them */
  #parker-pathways-root .pp-subfilters-collapsible {
    display: flex !important;
    flex-direction: column;
    position: relative;
    width: 175px;
    margin: 0 auto;
    background: none;
    border-radius: 0 0 10px 10px;
    overflow: visible;
    opacity: 1;
    transition: width 0.3s ease, margin 0.3s ease, border-radius 0.3s ease;
  }

  /* Container expanded state */
  #parker-pathways-root .pp-subfilters-collapsible.expanded {
    width: 100%;
    margin-top: 8px;
    margin-right: 0;
    border-radius: 12px;
  }

  /* Header inside container - reduce top padding to minimize gap */
  #parker-pathways-root .pp-subfilters-collapsible-header {
    max-width: 175px;
    width: 175px;
    height: auto;
    padding: 0 0 5px 0;
    margin: 0 auto;
    border-radius: 0 0 10px 10px;
    background: #1f1b2d45;
    border: none;
    outline: none !important;
    box-shadow: none;
    justify-content: center;
    /* Visible by default, JS hides during expand */
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  /* Hide header during expand animation */
  #parker-pathways-root .pp-subfilters-collapsible-header.header-hidden {
    opacity: 0;
  }

  #parker-pathways-root .pp-subfilters-collapsible-header:hover,
  #parker-pathways-root .pp-subfilters-collapsible-header:focus {
    box-shadow: none;
  }

  #parker-pathways-root .pp-subfilters-collapsible-header[aria-expanded="true"] {
    box-shadow: none;
    display: none;
  }

  #parker-pathways-root .pp-subfilters-collapsible-header::before {
    display: none;
  }

  /* Hide search icon in hero section */
  #parker-pathways-root .pp-subfilters-collapsible-header .pp-collapsible-search-icon {
    display: none;
  }

  /* Hide chevron when expanded */
  #parker-pathways-root .pp-subfilters-collapsible-header[aria-expanded="true"] .pp-subfilters-collapsible-icon {
    display: none;
  }

  /* Content tucked behind 2-way with negative margin */
  #parker-pathways-root .pp-subfilters-collapsible-content {
    border-radius: 0 0 12px 12px;
    margin-top: -35px;
    padding: 80px 16px 48px;
    max-height: 600px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.3s ease;
  }

  #parker-pathways-root .pp-subfilters-collapsible-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }

  /* Close button in content - top right */
  #parker-pathways-root .pp-collapsible-close-btn {
    display: flex;
    position: absolute;
    top: 40px;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    z-index: 100;
  }

  #parker-pathways-root .pp-collapsible-close-btn svg {
    width: 21px;
    height: 22px;
    stroke: rgba(255, 255, 255, 0.7);
  }

  /* Ensure cards are visible at this breakpoint */
  #parker-pathways-root .pp-list {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #parker-pathways-root .pp-list .pp-item,
  #parker-pathways-root .pp-list .pp-card {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Hide close button above 680px */
@media (min-width: 681px) {
  #parker-pathways-root .pp-collapsible-close-btn {
    display: none;
  }
}

/* Smaller mobile adjustments for collapsible */
@media (max-width: 480px) {
  #parker-pathways-root .pp-subfilters-collapsible-content {
    padding: 80px 10px 48px;
  }

  #parker-pathways-root .pp-subfilters-collapsible-content .pp-chip {
    font-size: 12px;
    padding: 4px 10px;
  }
}

@media (max-width: 375px) {
  #parker-pathways-root .pp-subfilters-collapsible-header {
    height: 40px;
    font-size: 15px;
    padding: 0 0 5px 0;
    margin-top: -2px;
  }

  #parker-pathways-root .pp-subfilters-collapsible-content {
    padding: 80px 8px 48px;
  }

  #parker-pathways-root .pp-subfilters-collapsible-content .pp-search input {
    height: 40px;
    font-size: 15px;
  }

  #parker-pathways-root .pp-subfilters-collapsible-content .pp-subfilters .pp-chip {
    min-width: 24px;
    padding: 3px 6px;
  }
}

/* 3-way toggle styling - applies at 681px-1120px */
@media (min-width: 681px) and (max-width: 1120px) {
  /* Hide radio inputs */
  .pp-three-way-toggle [type="radio"] {
    position: absolute;
    left: -9999px;
  }

  /* Labels */
  .pp-three-way-toggle label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 1;
    flex: 1;
    line-height: 32px;
    cursor: pointer;
    border-radius: 30px;
    transition: color 0.25s ease-in-out;
    text-align: center;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
  }

  .pp-three-way-toggle label:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .pp-three-way-toggle .pp-toggle-icon {
    width: 16px;
    height: 16px;
  }

  /* Checked state - dark text */
  .pp-three-way-toggle [type="radio"]:checked + label {
    color: #1a1d3a;
  }

  .pp-three-way-toggle [type="radio"]:checked + label:hover {
    background: transparent;
  }

  /* Ensure pp-list and items are visible in 3-way toggle mode */
  #parker-pathways-root .pp-list {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #parker-pathways-root .pp-list .pp-item,
  #parker-pathways-root .pp-list .pp-card {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Highlighter - positioned for 3 items (33.33% width) */
  .pp-three-highlighter {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(33.333% - 4px);
    height: calc(100% - 8px);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(214, 92, 51, 0.95), rgba(255, 184, 150, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease-in-out;
    pointer-events: none;
  }

  /* Highlighter positions based on checked radio */
  /* Programs (first) - default position */
  .pp-three-way-toggle [type="radio"]:checked#pp-three-programs ~ .pp-three-highlighter {
    transform: translateX(0);
  }

  /* Careers (second) - move to middle */
  .pp-three-way-toggle [type="radio"]:checked#pp-three-careers ~ .pp-three-highlighter {
    transform: translateX(100%);
  }

  /* Search (third) - move to right */
  .pp-three-way-toggle [type="radio"]:checked#pp-three-search ~ .pp-three-highlighter {
    transform: translateX(200%);
  }

  /* Search Panel - visible when Search is selected */
  .pp-search-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 66px 16px 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-top: -50px;
    margin-bottom: 16px;
    animation: pp-panel-slide-in 0.3s ease-out;
    order: 2;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .pp-search-panel.active {
    display: flex;
  }

  /* Controls container styling */
  #parker-pathways-root .pp-controls {
    order: 3;
    width: 100%;
  }

  @keyframes pp-panel-slide-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Inline search row - all on same line */
  .pp-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .pp-search-mode-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Bullet-style options */
  .pp-search-mode-bullets {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .pp-search-mode-bullets [type="radio"] {
    position: absolute;
    left: -9999px;
  }

  .pp-bullet-option {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s ease;
  }

  .pp-bullet-option::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    margin-right: 3px;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .pp-bullet-option:hover {
    color: rgba(255, 255, 255, 0.8);
  }

  .pp-bullet-option:hover::before {
    background: rgba(255, 255, 255, 0.5);
  }

  .pp-search-mode-bullets [type="radio"]:checked + .pp-bullet-option {
    color: #fff;
  }

  .pp-search-mode-bullets [type="radio"]:checked + .pp-bullet-option::before {
    background: #d65c33;
    transform: scale(1.2);
  }

  /* Inline search input */
  .pp-search-inline {
    flex: 1;
    min-width: 0;
  }

  .pp-search-panel .pp-search input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: #1f1b2d2e;
    color: #fff;
  }

  .pp-search-panel .pp-search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .pp-search-panel .pp-search input:focus {
    outline: none;
    border-color: rgba(214, 92, 51, 0.6);
    background: #ffffff14;
  }

  /* Credential chips in panel */
  #parker-pathways-root .pp-cred-three-way {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .pp-cred-three-way .pp-chip {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .pp-cred-three-way .pp-chip:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .pp-cred-three-way .pp-chip[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(214, 92, 51, 0.95), rgba(255, 184, 150, 0.85));
    color: #1a1d3a;
    border-color: transparent;
  }

  /* Alphabet chips in panel (for Careers) */
  .pp-alpha-three-way {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    width: 100%;
  }

  .pp-alpha-three-way .pp-chip {
    font-size: 12px;
    padding: 4px 10px;
    min-width: 32px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }

  .pp-alpha-three-way .pp-chip:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .pp-alpha-three-way .pp-chip[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(214, 92, 51, 0.95), rgba(255, 184, 150, 0.85));
    color: #1a1d3a;
    border-color: transparent;
  }
}

/* ===== PP-BLOG-CARD DESIGN ===== */
/* Blog-style cards for responsive breakpoints */

.pp-blog-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pp-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.pp-blog-card-header {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.pp-blog-card-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-blog-card .pp-blog-card-header .pp-badge-img {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px !important;
}

.pp-blog-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px;
  min-height: 180px;
}

.pp-blog-card-body .pp-card__actions {
  margin-top: auto;
  margin-bottom: 3px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.pp-blog-card-body .pp-card__actions .pp-btn {
  width: auto !important;
  max-width: max-content !important;
  flex-shrink: 0;
}

.pp-blog-card-body h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #0b1267;
  line-height: 1.3;
  font-family: Barlow, sans-serif;
}

.pp-blog-card-body p {
  font-size: 14px;
  margin: 0;
  font-weight: 500;
  color: rgb(70, 68, 68);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog card grid container */
.pp-blog-card-grid {
  display: grid;
  gap: 20px;
  width: 100%;
}

.pp-blog-card-grid .pp-grouphead {
  grid-column: 1 / -1;
}

/* Media queries for blog card layout - only active when useBlogCards is enabled */
/* 850-1024px: 3 column */
@media (min-width: 850px) and (max-width: 1024px) {
  #parker-pathways-root.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  /* Always show pp-list if it only contains empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards .pp-list:has(> .pp-item:only-child:not(.pp-card)) {
    display: grid !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    display: grid;
  }

  /* Hide blog card grid when pp-list has empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards:has(.pp-list > .pp-item:only-child:not(.pp-card)) .pp-blog-card-grid {
    display: none !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

/* 769-849px: 2 column */
@media (min-width: 769px) and (max-width: 849px) {
  #parker-pathways-root.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  /* Always show pp-list if it only contains empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards .pp-list:has(> .pp-item:only-child:not(.pp-card)) {
    display: grid !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    display: grid;
  }

  /* Hide blog card grid when pp-list has empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards:has(.pp-list > .pp-item:only-child:not(.pp-card)) .pp-blog-card-grid {
    display: none !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* 581-699px: 2 column */
@media (min-width: 581px) and (max-width: 699px) {
  #parker-pathways-root.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  /* Always show pp-list if it only contains empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards .pp-list:has(> .pp-item:only-child:not(.pp-card)) {
    display: grid !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    display: grid;
  }

  /* Hide blog card grid when pp-list has empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards:has(.pp-list > .pp-item:only-child:not(.pp-card)) .pp-blog-card-grid {
    display: none !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* 0-580px: 1 column */
@media (max-width: 580px) {
  #parker-pathways-root.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  /* Always show pp-list if it only contains empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards .pp-list:has(> .pp-item:only-child:not(.pp-card)) {
    display: grid !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    display: grid;
  }

  /* Hide blog card grid when pp-list has empty state message (not real cards) */
  #parker-pathways-root.pp-use-blog-cards:has(.pp-list > .pp-item:only-child:not(.pp-card)) .pp-blog-card-grid {
    display: none !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pp-blog-card-header {
    height: 180px;
  }

  .pp-blog-card-body {
    min-height: 150px;
  }

  .pp-blog-card-body h4 {
    font-size: 16px;
  }
}

/* 700-768px: Hide blog cards, show standard grid as 1 column */
@media (min-width: 700px) and (max-width: 768px) {
  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    display: none !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 1025px) {
  #parker-pathways-root.pp-use-blog-cards .pp-blog-card-grid {
    display: none !important;
  }

  #parker-pathways-root.pp-use-blog-cards .pp-list {
    display: grid !important;
  }
}

/* Default: hide blog card grid when not in blog card mode (main page only) */
#parker-pathways-root:not(.pp-use-blog-cards) .pp-blog-card-grid {
  display: none !important;
}

/* Override for modal - ensure modal grid isn't hidden by the above rule */
#pp-modal-root .pp-blog-card-grid,
#ppBlogCardGridModal {
  display: grid !important;
}

/* Blog cards in modal */
.pp-full-page-modal .pp-blog-card-grid {
  padding: 0 10px;
  position: relative;
  z-index: 1;
  min-height: 300px;
}

/* Ensure blog cards are visible in modal when enabled */
.pp-full-page-modal.pp-use-blog-cards .pp-blog-card-grid {
  display: grid !important;
  gap: 20px;
}

.pp-full-page-modal .pp-blog-card {
  position: relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

/* 850-1024px: 3 column in modal */
@media (min-width: 850px) and (max-width: 1024px) {
  .pp-full-page-modal.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  .pp-full-page-modal.pp-use-blog-cards .pp-blog-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 769-849px: 2 column in modal */
@media (min-width: 769px) and (max-width: 849px) {
  .pp-full-page-modal.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  .pp-full-page-modal.pp-use-blog-cards .pp-blog-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 581-699px: 2 column in modal */
@media (min-width: 581px) and (max-width: 699px) {
  .pp-full-page-modal.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  .pp-full-page-modal.pp-use-blog-cards .pp-blog-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 0-580px: 1 column in modal */
@media (max-width: 580px) {
  .pp-full-page-modal.pp-use-blog-cards .pp-list {
    display: none !important;
  }

  .pp-full-page-modal.pp-use-blog-cards .pp-blog-card-grid {
    display: grid !important;
    grid-template-columns: 1fr;
  }
}

/* 700-768px and 1024+: Hide blog cards in modal, show standard cards */
@media (min-width: 700px) and (max-width: 768px) {
  .pp-full-page-modal.pp-use-blog-cards .pp-blog-card-grid {
    display: none !important;
  }

  .pp-full-page-modal.pp-use-blog-cards .pp-list {
    display: grid !important;
  }
}

@media (min-width: 1025px) {
  .pp-full-page-modal.pp-use-blog-cards .pp-blog-card-grid {
    display: none !important;
  }

  .pp-full-page-modal.pp-use-blog-cards .pp-list {
    display: grid !important;
  }
}

/* Default: hide blog card grid in modal when not in blog card mode */
.pp-full-page-modal:not(.pp-use-blog-cards) .pp-blog-card-grid {
  display: none !important;
}