/* Professional (cat 2) - V11 LEAN: 5 blocks, Web Standard 4.0 multi-color (Apr 30 2026) */
/* Each block has DISTINCT visual identity through color + border style + layout */

/* CSS Custom Properties for theming */
:root {
  --prof-strategic: #1e3a8a;     /* Navy Blue - strategic authority */
  --prof-strategic-bg: hsl(225, 64%, 97%);
  --prof-leadership: #6b21a8;    /* Royal Purple - leadership/wisdom */
  --prof-leadership-bg: hsl(280, 60%, 97%);
  --prof-governance: #9f1239;    /* Burgundy - formal compliance */
  --prof-governance-bg: hsl(345, 78%, 97%);
  --prof-stakeholder: #0f766e;   /* Teal - structured analysis */
  --prof-stakeholder-bg: hsl(174, 78%, 96%);
  --prof-competency: #b45309;    /* Gold/Amber - achievement */
  --prof-competency-bg: hsl(35, 90%, 96%);
}

/* ===== Common base styling ===== */
.strategic-framework,.leadership-principle,.governance-callout,.stakeholder-matrix,.competency-card{
  margin-block:18px;padding:clamp(14px,3vw,18px);
  font-size:15px;line-height:1.6;
}
.strategic-framework .content-block-header,
.leadership-principle .content-block-header,
.governance-callout .content-block-header,
.stakeholder-matrix .content-block-header,
.competency-card .content-block-header{
  font-weight:600;margin-block-end:12px;display:flex;align-items:center;gap:8px;
}

/* ===== 1. strategic-framework (NAVY BLUE - subtle gradient, standard rectangle) ===== */
.strategic-framework{
  background:linear-gradient(135deg, var(--prof-strategic-bg) 0%, hsl(225, 50%, 99%) 100%);
  border-left:4px solid var(--prof-strategic);
  border-radius:6px;
  box-shadow:0 1px 3px hsla(225, 64%, 30%, 0.06);
}
.strategic-framework .content-block-header{color:var(--prof-strategic)}
.strategic-framework strong{color:color-mix(in srgb, var(--prof-strategic) 80%, black)}
.strategic-framework ul{margin-block:8px;padding-inline-start:24px}
.strategic-framework li{margin-block:4px}

/* ===== 2. leadership-principle (PURPLE - double-line border, italic pull-quote) ===== */
.leadership-principle{
  background:var(--prof-leadership-bg);
  border-left:4px double var(--prof-leadership);
  border-radius:6px;
  padding-inline-start:clamp(20px,4vw,24px);
}
.leadership-principle .content-block-header{color:var(--prof-leadership);font-style:normal}
.leadership-principle p{font-style:italic;color:#1f2937}
.leadership-principle strong{color:color-mix(in srgb, var(--prof-leadership) 85%, black);font-style:normal}

/* ===== 3. governance-callout (BURGUNDY - boxed all-around, sharp corners) ===== */
.governance-callout{
  background:var(--prof-governance-bg);
  border:2px solid var(--prof-governance);
  border-radius:4px;
}
.governance-callout .content-block-header{color:var(--prof-governance);text-transform:uppercase;letter-spacing:0.5px;font-size:14px}
.governance-callout strong{color:color-mix(in srgb, var(--prof-governance) 85%, black)}
.governance-callout p{margin-block:6px}

/* ===== 4. stakeholder-matrix (TEAL - top border, grid/table layout) ===== */
.stakeholder-matrix{
  background:var(--prof-stakeholder-bg);
  border-top:4px solid var(--prof-stakeholder);
  border-radius:8px;
}
.stakeholder-matrix .content-block-header{color:var(--prof-stakeholder)}
.stakeholder-matrix strong{color:color-mix(in srgb, var(--prof-stakeholder) 80%, black)}
.stakeholder-matrix table{width:100%;border-collapse:collapse;margin-block:8px;background:#fff;border-radius:4px;overflow:hidden}
.stakeholder-matrix th{background:var(--prof-stakeholder);color:#fff;padding:8px 12px;text-align:start;font-weight:600;font-size:14px}
.stakeholder-matrix td{padding:8px 12px;border-bottom:1px solid hsl(174, 30%, 88%)}
.stakeholder-matrix tr:last-child td{border-bottom:none}

/* ===== 5. competency-card (GOLD/AMBER - badge style, gold accent) ===== */
.competency-card{
  background:linear-gradient(135deg, var(--prof-competency-bg) 0%, #fff 60%);
  border-left:4px solid var(--prof-competency);
  border-radius:6px;
  position:relative;
  padding-inline-end:clamp(18px,4vw,28px);
}
.competency-card::after{
  content:'';position:absolute;top:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 24px 24px 0;
  border-color:transparent var(--prof-competency) transparent transparent;
}
.competency-card .content-block-header{color:var(--prof-competency)}
.competency-card strong{color:color-mix(in srgb, var(--prof-competency) 85%, black)}
.competency-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-block:8px;background:#fff;padding:12px;border-radius:4px}
.competency-card dt{font-weight:600;color:var(--prof-competency)}
.competency-card dd{margin:0;color:#1f2937}

/* ===== Phase 5 mask-image icons ===== */
.strategic-framework .content-block-header::before,
.leadership-principle .content-block-header::before,
.governance-callout .content-block-header::before,
.stakeholder-matrix .content-block-header::before,
.competency-card .content-block-header::before{
  content:'';display:inline-block;width:18px;height:18px;
  background-color:currentColor;mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;flex-shrink:0;
}
.strategic-framework .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7M3 12h18'/%3E%3C/svg%3E")}
.leadership-principle .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E")}
.governance-callout .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E")}
.stakeholder-matrix .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E")}
.competency-card .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z'/%3E%3C/svg%3E")}

/* ===== Accessibility: respect reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .strategic-framework,.leadership-principle,.governance-callout,.stakeholder-matrix,.competency-card{
    transition:none;
  }
}

/* ===== Mobile responsive ===== */
@media (max-width: 768px){
  .competency-card dl{grid-template-columns:1fr}
  .competency-card dt{margin-block-start:8px}
  .stakeholder-matrix{font-size:14px}
  .competency-card::after{border-width:0 18px 18px 0}
}