/* ===========================
   HomeHarbor – Projects Rail
   Scope: #hh-inline-projects
   =========================== */

#hh-inline-projects{
  --ink:#0f172a; --muted:#475569;
  --card:#fff; --surface:#f8fafc; --border:#e2e8f0;
  --blue:#2563eb; --cyan:#38bdf8; --green:#22c55e; --green-ink:#166534;
  --shadow:0 8px 24px rgba(2,6,23,.06); --shadow-lg:0 12px 28px rgba(2,6,23,.1);
  --r-card:16px; --r-soft:12px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
}
#hh-inline-projects .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#hh-inline-projects .hh-proj{max-width:1100px;margin:0 auto;padding:24px 16px;text-align:center;}
#hh-inline-projects h2{margin:0 0 8px;font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.01em;}
#hh-inline-projects .swipe{display:none;margin:8px 0 16px;color:var(--muted);font-size:14px;opacity:.9;}
@media (max-width:820px){ #hh-inline-projects .swipe{display:block;} }

/* Rail */
#hh-inline-projects .rail{
  display:flex; gap:16px; overflow-x:auto; padding:8px 4px 12px;
  scroll-snap-type:x mandatory; scroll-snap-stop:always;
  -webkit-overflow-scrolling:touch; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--blue) var(--border);
  justify-content:flex-start; position:relative;
}
@media (min-width:821px){ #hh-inline-projects .rail{ justify-content:center; } }
#hh-inline-projects .rail::-webkit-scrollbar{height:8px}
#hh-inline-projects .rail::-webkit-scrollbar-track{background:var(--border);border-radius:8px}
#hh-inline-projects .rail::-webkit-scrollbar-thumb{background:var(--blue);border-radius:8px}

/* Cards */
#hh-inline-projects .card{
  flex:0 0 clamp(280px, 30vw, 340px);
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:18px; text-align:left;
  display:flex; flex-direction:column; gap:14px; position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden; scroll-snap-align:center; box-sizing:border-box;
}
#hh-inline-projects .card > *{ min-width:0; } /* Overflow-Fix */
@media (hover:hover){
  #hh-inline-projects .card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:rgba(37,99,235,.25);}
}

/* Header */
#hh-inline-projects .head{border-bottom:1px solid var(--border); padding-bottom:10px; text-align:center;}
#hh-inline-projects .title{margin:0 0 6px;font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--green);}
#hh-inline-projects .meta{margin:0;color:var(--muted);font-size:14px}

/* Progress */
#hh-inline-projects .fill{display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; margin-top:10px;}
#hh-inline-projects .fill.muted{opacity:.7}
#hh-inline-projects .fill-bar{position:relative; height:8px; border-radius:999px; background:#eef2f7; overflow:hidden;}
#hh-inline-projects .fill-bar::after{content:""; position:absolute; inset:0; width:calc(var(--p,0) * 1%); border-radius:inherit; background:linear-gradient(90deg, var(--blue), var(--cyan)); transition:width .8s ease;}
#hh-inline-projects .fill-label{font-weight:800; font-size:12.5px; color:#0f172a; white-space:nowrap;}
#hh-inline-projects .fill-label.full{ color:#166534; }
#hh-inline-projects .fill-label.warn{ color:#b45309; }

/* Highlights */
#hh-inline-projects .high dl{display:flex;flex-direction:column;gap:10px;margin:0;align-items:center}
#hh-inline-projects .high .metric{width:100%; max-width:280px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px;}
#hh-inline-projects .high dt{font-weight:700;color:var(--ink);font-size:14px;margin:0 0 4px}
#hh-inline-projects .high dd{margin:0;font-size:clamp(22px,3.6vw,28px);font-weight:800;color:var(--blue)}
#hh-inline-projects .num sub{font-size:.7em;vertical-align:baseline;position:relative;top:.2em}

/* CO2 card */
#hh-inline-projects .card-soft{background:linear-gradient(180deg,#f0fdf4,#ffffff); border:1px solid rgba(34,197,94,.35); border-left-width:4px; border-radius:var(--r-soft); padding:14px}
#hh-inline-projects .co2{ min-width:0; }
#hh-inline-projects .co2-title{margin:0 0 6px; text-align:center; font-size:clamp(18px,2.8vw,22px); font-weight:800; color:var(--green)}
#hh-inline-projects .co2-intro{margin:0 0 10px;text-align:center;color:var(--muted);font-size:14px}
#hh-inline-projects .co2-list{list-style:none;margin:0 0 10px;padding:0;text-align:center}
#hh-inline-projects .co2-list li{margin:6px 0;font-size:15px}

/* Toggle */
#hh-inline-projects .co2-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:6px auto 0;
  padding:10px 12px;border-radius:999px;border:1px solid rgba(34,197,94,.45);
  background:#fff;color:var(--green-ink);font-weight:800;font-size:14px;cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap; hyphens:none; max-width:100%; box-sizing:border-box;
}
#hh-inline-projects .co2-toggle:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(34,197,94,.2)}
#hh-inline-projects .co2-toggle[disabled]{opacity:.6; cursor:not-allowed; box-shadow:none; transform:none}
#hh-inline-projects .co2-body{max-height:0; overflow:hidden; opacity:0; padding:0; transition:max-height .35s ease, opacity .25s ease, padding .35s ease; border-top:1px solid var(--border); margin-top:8px}
#hh-inline-projects .co2-body.open{max-height:420px; opacity:1; padding:10px 6px}
#hh-inline-projects .co2-body p{margin:8px 0; color:#64748b; font-size:14px; text-align:center}
#hh-inline-projects .chev{display:inline-block; transition:transform .2s ease}
#hh-inline-projects .co2-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* Card-CTA (Alle Infos) */
#hh-inline-projects .card-cta{margin-top:auto; display:flex; justify-content:center;}
#hh-inline-projects .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:10px 14px; border-radius:12px; font-weight:800; text-decoration:none; line-height:1;
  -webkit-tap-highlight-color:transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  font-size:14px;
}
#hh-inline-projects .btn-info{ background:#fff; border:1px solid rgba(2,6,23,.08); color:#0f172a; }
#hh-inline-projects .btn-info:hover{ background:#f8fafc; transform:translateY(-1px); }

/* Section-CTA */
#hh-inline-projects .section-cta{ margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:6px; }
#hh-inline-projects .btn-info-lg{ padding:12px 18px; border-radius:12px; background:#fff; border:1px solid rgba(2,6,23,.08); font-weight:800; color:#0f172a; text-decoration:none; }
#hh-inline-projects .btn-info-lg:hover{ background:#f8fafc; transform:translateY(-1px); }
#hh-inline-projects .section-micro{ color:#64748b; font-size:12.5px; }

/* Coming Soon ribbon */
#hh-inline-projects .card.is-soon::after{
  content:"COMING SOON";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-14deg);
  width:90%; text-align:center; background:rgba(17,17,17,.9); color:#fff; padding:6px 0;
  font-weight:900; letter-spacing:.12em; font-size:clamp(12px, 1.7vw, 15px);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.25); pointer-events:none; z-index:3;
}

/* Footer text */
#hh-inline-projects .disc{margin:0;text-align:center;color:#64748b;font-size:12.5px}

/* Mobile centering */
@media (max-width:520px){
  #hh-inline-projects .rail{
    padding:8px 15vw 12px;
    scroll-padding-inline:15vw;
  }
  #hh-inline-projects .card{ flex-basis:70vw; }
  #hh-inline-projects .title{font-size:22px}
  #hh-inline-projects .card-cta .btn{ width:100%; }
  #hh-inline-projects .btn-info-lg{ width:min(92vw,640px); }

  /* Toggle darf umbrechen – verhindert Überlauf */
  #hh-inline-projects .co2-toggle{
    white-space:normal; text-align:center; line-height:1.25;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #hh-inline-projects *{transition:none !important; animation:none !important}
  #hh-inline-projects .co2-body{max-height:none !important; opacity:1 !important; padding:8px 6px !important}
}