/* Azule case study styles — follows the same design tokens & layout as previous Lesotho case.
   Reusable variables & utility patterns. */

   :root{
    --max-width:1100px;
    --muted:#6b7280;
    --text:#0f1724;
    --primary:#0a6cf1;
    --primary-2:#60a5fa;
    --border:#e5e7eb;
    --card-bg:#ffffff;
    --radius:12px;
    --gap:20px;
    --container-pad:28px;
    --shadow:0 10px 30px rgba(15,23,42,0.06);
  }
  
  /* base */
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;color:var(--text);background:#fff;line-height:1.6}
  img{max-width:100%;display:block}
  
  /* container */
  .site-container{max-width:var(--max-width);margin:36px auto;padding:var(--container-pad)}
  .case-container{background:transparent}
  
  /* hero */
  .case-hero{display:grid;grid-template-columns:1fr 340px;gap:var(--gap);align-items:start;margin-bottom:18px}
  .hero-left{padding:12px}
  .eyebrow{color:var(--primary);text-transform:uppercase;font-weight:700;letter-spacing:0.12em;font-size:12px;margin-bottom:8px}
  .case-title{margin:0;font-size:24px;line-height:1.05}
  .case-sub{color:var(--muted);margin-top:8px}
  
  /* meta */
  .meta-row{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .meta{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
  .meta-label{font-weight:600;color:var(--text)}
  .meta-value{color:var(--muted);margin-top:4px}
  
  /* hero right */
  .hero-right{display:flex;flex-direction:column;gap:12px}
  .hero-image{height:180px;border-radius:12px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{background:linear-gradient(180deg, rgba(10,108,241,0.06), rgba(96,165,250,0.03));padding:10px;border-radius:10px;text-align:center}
  .stat-num{font-weight:800}
  .stat-label{font-size:12px;color:var(--muted)}
  
  /* grid & panels */
  .case-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--gap)}
  .panel{background:var(--card-bg);border-radius:var(--radius);padding:18px;border:1px solid var(--border);box-shadow:var(--shadow)}
  .main-panel{min-height:200px}
  .side-panel{display:flex;flex-direction:column;gap:12px}
  
  /* content */
  .panel-section{margin-bottom:16px}
  .panel-section h2{margin:0 0 10px 0;font-size:18px}
  .panel-section h3{margin:10px 0 8px 0;font-size:15px}
  .bullet-list{padding-left:18px;color:var(--muted)}
  .bullet-list li{margin:8px 0}
  
  /* two-column */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  
  /* placeholders */
  .img-placeholder {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(
      135deg,
      rgba(10,108,241,0.04),
      rgba(96,165,250,0.02)
    );
    border: 1px dashed rgba(15,23,42,0.04);
  }
  
  .img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills container nicely */
    display: block;
  }
  
  .img-placeholder.small {
    height: 110px;
  }
  
  .hero-image {
    height: 190px;
  }
  
  
  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
  .btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff}
  .btn-outline{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--primary)}
  .btn--ghost {
    background: #fff;
    color: var(--color-primary);
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.5);
  }
  
  /* accordion (same visual behaviour as LHDA) */
  .accordion{margin-top:6px}
  .acc-item{border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,0.03);margin-bottom:8px}
  .acc-head{width:100%;padding:12px 14px;background:transparent;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600}
  .acc-head .acc-title{font-size:14px}
  .acc-toggle{font-weight:700;color:var(--primary)}
  .acc-body{padding:12px 14px;color:var(--muted);display:none;border-top:1px solid rgba(0,0,0,0.03)}
  
  /* mini card */
  .mini-card{padding:12px;border-radius:10px;background:linear-gradient(180deg,#fff,#fff);border:1px solid var(--border)}
  .mini-list{font-size:13px;color:var(--muted);margin-top:8px}
  .mini-list li{margin:8px 0}
  
    /* CTA */
    .project-cta {
        margin-top: 2rem;
        text-align: center;
        padding: 1.5rem 1.4rem 1.7rem;
      }
      
      .project-cta h3 {
        margin: 0 0 0.4rem;
        font-size: 1rem;
      }
      
      .project-cta p {
        margin: 0 0 1rem;
        font-size: 0.9rem;
        color: var(--muted);
      }

      .project-cta__actions {
        display: flex;
        justify-content: center;
        gap: 0.7rem;
        flex-wrap: wrap;
      }
      
  /* responsive */
  @media (max-width:1000px){
    .case-hero,.case-grid{grid-template-columns:1fr}
    .two-col{grid-template-columns:1fr}
    .hero-image{height:160px}
    .site-container{padding:18px;margin:18px}
  }
  @media (max-width:520px){
    .stats{grid-template-columns:repeat(2,1fr)}
  }