/* Scoped methodology diagram - uses site theme tokens from index.css (:root) */
.vapt-methodology-embed,
.vapt-methodology-embed * {
  box-sizing: border-box;
}

/* Prevent flex/grid parents from blocking shrink + horizontal scroll */
.vapt-methodology-embed {
  background: hsl(var(--background));
  font-family: var(--font-sans);
  padding: 1.5rem;
  color: hsl(var(--foreground));
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.vapt-methodology-embed .diagram-wrapper {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: calc(var(--radius) + 4px);
  padding: 28px 20px 20px;
  max-width: 1320px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
  min-width: 0;
  width: 100%;
}

.vapt-methodology-embed .row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
}

.vapt-methodology-embed .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
}

.vapt-methodology-embed .arrow svg {
  display: block;
}

/* Flow arrows - brand blue (secondary) */
.vapt-methodology-embed .arrow svg line,
.vapt-methodology-embed .arrow svg polyline {
  stroke: hsl(var(--secondary)) !important;
}

.vapt-methodology-embed .arrow svg defs polygon,
.vapt-methodology-embed .arrow svg polygon {
  fill: hsl(var(--secondary)) !important;
}

.vapt-methodology-embed .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(var(--card));
  min-width: 0;
  box-shadow: var(--shadow-sm);
}

.vapt-methodology-embed .card-header {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 8px 10px;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 50px;
  word-break: break-word;
  hyphens: auto;
}

.vapt-methodology-embed .card-header .icon {
  font-size: 18px;
  flex-shrink: 0;
}

.vapt-methodology-embed .card-header svg {
  flex-shrink: 0;
}

/* Default step headers: green icons on primary bar (matches original diagram) */
.vapt-methodology-embed .card-header:not(.green):not(.blue):not(.teal) svg,
.vapt-methodology-embed .card-header:not(.green):not(.blue):not(.teal) svg * {
  stroke: hsl(var(--accent)) !important;
}

.vapt-methodology-embed .card-header.green svg,
.vapt-methodology-embed .card-header.green svg *,
.vapt-methodology-embed .card-header.blue svg,
.vapt-methodology-embed .card-header.blue svg *,
.vapt-methodology-embed .card-header.teal svg,
.vapt-methodology-embed .card-header.teal svg * {
  stroke: currentColor !important;
}

.vapt-methodology-embed .card-body {
  padding: 10px 10px 12px;
  flex: 1;
  background: hsl(var(--card));
}

.vapt-methodology-embed .card-body ul {
  list-style: disc;
  padding-left: 16px;
  margin: 0;
}

.vapt-methodology-embed .card-body ul li {
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  line-height: 1.5;
  margin-bottom: 3px;
  word-break: break-word;
}

.vapt-methodology-embed .card-header.green {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.vapt-methodology-embed .card-header.blue {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* Teal-style header: blend secondary + accent to stay on-brand */
.vapt-methodology-embed .card-header.teal {
  background: hsl(192 45% 34%);
  background: color-mix(in hsl, hsl(var(--secondary)) 52%, hsl(var(--accent)) 48%);
  color: hsl(var(--primary-foreground));
}

.vapt-methodology-embed .phase-row {
  display: flex;
  margin-top: 10px;
  margin-bottom: 18px;
  gap: 0;
}

/* Inline spacer bars from diagram HTML - match page background */
.vapt-methodology-embed .phase-row > div[style*="width:6px"] {
  background: hsl(var(--background)) !important;
}

.vapt-methodology-embed .phase-block {
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 9px 16px;
  letter-spacing: 0.02em;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  gap: 8px;
}

.vapt-methodology-embed .phase-block.first {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.vapt-methodology-embed .phase-block.last {
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
}

.vapt-methodology-embed .phase-block.middle {
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 50%,
    calc(100% - 16px) 100%,
    16px 100%,
    0 50%
  );
}

.vapt-methodology-embed .phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--accent));
  flex-shrink: 0;
}

.vapt-methodology-embed .phase-block svg {
  stroke: hsl(var(--accent)) !important;
}

.vapt-methodology-embed .phase-spacer {
  flex: 1;
  background: transparent;
}

.vapt-methodology-embed .section-divider {
  border: none;
  border-top: 1px solid hsl(var(--border));
  margin: 4px 0 22px;
}

/* Application Security Testing Approach - 3-stage flow (matches methodology card style) */
.vapt-methodology-embed .ast-approach-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.vapt-methodology-embed .ast-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
}

.vapt-methodology-embed .ast-stage-header {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.8125rem;
  text-align: center;
  line-height: 1.35;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vapt-methodology-embed .ast-stage-body {
  padding: 12px 14px 14px;
  flex: 1;
  background: hsl(var(--card));
}

.vapt-methodology-embed .ast-stage-body ul {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  line-height: 1.5;
  list-style: disc;
}

.vapt-methodology-embed .ast-stage-body li {
  margin-bottom: 4px;
}

.vapt-methodology-embed .ast-stage-body li:last-child {
  margin-bottom: 0;
}

.vapt-methodology-embed .ast-approach-between {
  flex-shrink: 0;
  align-self: center;
  color: hsl(var(--secondary));
}

.vapt-methodology-embed .ast-approach-between svg {
  display: block;
}

/* Decorative validation marks / medal in card body - warm accent from palette */
.vapt-methodology-embed .card-body div[style*="margin-top:8px"] svg polyline {
  stroke: hsl(var(--accent)) !important;
}

.vapt-methodology-embed .card-body div[style*="text-align:right"] svg {
  stroke: hsl(var(--chart-3)) !important;
}

/* Tablet / small laptop: swipeable row instead of squashed flex */
@media (min-width: 768px) and (max-width: 1279px) {
  .vapt-methodology-embed .diagram-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  .vapt-methodology-embed .row {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    min-width: 100%;
  }

  .vapt-methodology-embed .card {
    flex: 0 0 auto;
    width: 210px;
    min-width: 210px;
  }

  .vapt-methodology-embed .arrow {
    width: 30px;
  }
}

/* Phones: vertical flow - no horizontal scroll, full-width steps */
@media (max-width: 767px) {
  .vapt-methodology-embed {
    padding: 0.5rem;
  }

  .vapt-methodology-embed .diagram-wrapper {
    padding: 0.75rem 0.5rem;
    overflow-x: visible;
    overflow-y: visible;
  }

  .vapt-methodology-embed .row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .vapt-methodology-embed .card {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .vapt-methodology-embed .card-header {
    font-size: 0.6875rem;
    padding: 8px 8px;
    min-height: 44px;
  }

  /* Horizontal arrow → points down between steps */
  .vapt-methodology-embed .arrow {
    width: 100%;
    height: 32px;
    margin: 2px 0;
  }

  .vapt-methodology-embed .arrow svg {
    transform: rotate(90deg);
    transform-origin: center center;
  }

  /* Phase ribbons: stack */
  .vapt-methodology-embed .phase-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  .vapt-methodology-embed .phase-row > div[style*="width:6px"] {
    display: none !important;
  }

  .vapt-methodology-embed .phase-block {
    clip-path: none;
    border-radius: var(--radius);
    width: 100% !important;
    flex: none !important;
    justify-content: flex-start;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
  }

  .vapt-methodology-embed .section-divider {
    margin: 0.25rem 0 1rem;
  }

  .vapt-methodology-embed .ast-approach-row {
    flex-direction: column;
  }

  .vapt-methodology-embed .ast-approach-between {
    width: 100%;
    height: 28px;
    margin: 2px 0;
  }

  .vapt-methodology-embed .ast-approach-between svg {
    transform: rotate(90deg);
    transform-origin: center center;
    margin: 0 auto;
  }
}

/* Narrow tablet: horizontal scroll for approach flow */
@media (min-width: 768px) and (max-width: 1023px) {
  .vapt-methodology-embed.ast-approach-wrap .diagram-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vapt-methodology-embed.ast-approach-wrap .ast-approach-row {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }

  .vapt-methodology-embed.ast-approach-wrap .ast-stage {
    flex: 0 0 200px;
    width: 200px;
    min-width: 200px;
  }
}