/* LHDA case study styles
   Reusable variables & utilities inspired by your AUTU blog styles. 
   (based on files you uploaded). References: styles.css + index.html + script.js. 
   :contentReference[oaicite:4]{index=4} :contentReference[oaicite:5]{index=5} :contentReference[oaicite:6]{index=6}
*/

/* ===== root variables (colors, spacing, reuse) ===== */
:root{
    --max-width: 1100px;
    --page-bg: #ffffff;
    --muted: #6b7280;
    --text: #111827;
    --primary: #0a6cf1;
    --primary-2: #60a5fa;
    --border: #e5e7eb;
    --shadow: 0 10px 30px rgba(15,23,42,0.06);
    --radius: 12px;
    --gap: 20px;
    --container-pad: 28px;
    --card-bg: #ffffff;
  }
  
  /* base reset */
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;color:var(--text);background:var(--page-bg);line-height:1.6}
  img{max-width:100%;display:block}
  a{text-decoration:none;color:inherit}
  
  /* layout container (does NOT include nav/footer) */
  .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 row */
  .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:#0f1724}
  .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 */
  .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}
  
  /* sections inside panels */
  .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 inside a section */
  .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 */
  .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%;text-align:left;padding:12px 14px;background:transparent;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600; border: 1px solid rgba(0,0,0,0.03);}
  .acc-icon{color:var(--primary)}
  .acc-body{padding:12px 14px;color:var(--muted);display:none}
  
  /* quick cards */
  .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}
    .stats{grid-template-columns:repeat(3,1fr)}
    .site-container{padding:18px;margin:18px}
  }
  
  @media (max-width:520px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .hero-right{order:2}
  }