/* Two diagrams for the Google Cloud Cybersecurity Certificate learning post. */
.post .chapter-nav { display:none; }
.post .post-header { margin-bottom:1.4em; }
.gcc-figure .gcc-board { border-radius: 16px; }
.gcc-figure .ed-title { display:block; }
.gcc-map { margin-top:25px; }
.gcc-map-top { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:12px; margin-bottom:14px; }
.gcc-pill { display:grid; gap:5px; padding:15px 18px; border:1px solid var(--ed-line); background:var(--ed-panel); border-radius:12px; }
.gcc-pill b { font:600 17px/1.2 var(--sans); }
.gcc-pill small, .gcc-resource small, .gcc-response-step small { display:block; font-size:13px; line-height:1.42; color:var(--ed-muted); }
.gcc-identity { border-top:4px solid var(--ed-blue); }
.gcc-scc { border-top:4px solid var(--ed-green); }
.gcc-cloud { border:2px dashed var(--ed-blue); background:color-mix(in srgb,var(--ed-blue) 5%,var(--ed-bg)); border-radius:18px; padding:22px; }
.gcc-cloud-label { display:block; margin-bottom:16px; color:var(--ed-blue); font:600 12px/1.3 var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.gcc-resource-row { display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr); gap:9px; align-items:stretch; }
.gcc-resource { padding:16px 12px; border:1px solid var(--ed-line); border-radius:10px; background:var(--ed-bg); min-width:0; }
.gcc-resource b { display:block; margin:4px 0 6px; font-size:15px; line-height:1.25; }
.gcc-icon { display:block; color:var(--ed-blue); font:30px/1 var(--mono); }
.gcc-path { align-self:center; text-align:center; color:var(--ed-blue); font:25px/1 var(--mono); }
.gcc-response { margin-top:28px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; border-top:1px solid var(--ed-line); border-bottom:1px solid var(--ed-line); }
.gcc-response-step { padding:18px 14px 22px; min-height:190px; border-right:1px solid var(--ed-line); }
.gcc-response-step:last-child { border-right:0; }
.gcc-response-step span { display:block; font:600 11px/1.3 var(--mono); letter-spacing:.05em; color:var(--ed-blue); }
.gcc-response-step b { display:block; margin:17px 0 8px; font:600 19px/1.2 var(--serif); }
.gcc-contain span { color:var(--ed-red); }
.gcc-recover span, .gcc-remediate span, .gcc-verify span { color:var(--ed-green); }
.gcc-footnote { margin:18px 0 0 !important; font-size:13px; line-height:1.5; color:var(--ed-muted); }
@media(max-width:700px) {
  .gcc-map-top { grid-template-columns:1fr; gap:8px; }
  .gcc-cloud { padding:16px; }
  .gcc-resource-row { grid-template-columns:1fr; gap:4px; }
  .gcc-path { transform:rotate(90deg); padding:3px; }
  .gcc-resource { padding:14px; }
  .gcc-response { grid-template-columns:1fr; }
  .gcc-response-step { min-height:0; padding:16px 8px 18px 48px; border-right:0; border-bottom:1px solid var(--ed-line); position:relative; }
  .gcc-response-step:last-child { border-bottom:0; }
  .gcc-response-step::before { content:'↓'; position:absolute; left:8px; top:22px; font:22px/1 var(--mono); color:var(--ed-blue); }
  .gcc-response-step b { margin:6px 0; }
}