/* ============================================================
   MIRAJ AHMED — CASE STUDY PAGES (companion to home.css)
   Plain HTML/CSS. Zero dependencies.

   Loaded AFTER home.css on project / case-study pages only.
   Everything here is scoped to .page-head and .case so the
   home page (index.html) is never affected.

   It re-implements the small set of Bootstrap-ish classes the
   case pages were authored with (row/col, card, table, alert,
   list-group, bg-light, spacing + text utilities) using the
   site's own design tokens, so the pages match the exhibition
   look of the index.
   ============================================================ */

/* ---------- Page head (title banner) ---------- */
.page-head {
  position: relative;
  padding: 64px 0 44px;
  border-bottom: 1.5px solid var(--ink);
  background:
    radial-gradient(620px circle at 88% -40%, var(--accent-soft), transparent 60%);
  overflow: hidden;
}

.page-head h1 {
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  max-width: 18ch;
}

/* Breadcrumbs */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.breadcrumbs a { color: var(--accent-ink); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { color: var(--line); margin: 0 4px; }
.breadcrumbs span:last-child { color: var(--ink); font-weight: 500; }

/* ---------- Case layout ---------- */
.case .wrap { max-width: 1080px; }

/* Bootstrap-style 12-col grid (scoped) */
.case .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -14px;
}
.case .row.gy-4 { row-gap: 28px; }
.case [class*="col-"] {
  width: 100%;
  padding: 0 14px;
}

@media (min-width: 768px) {
  .case .col-md-6 { width: 50%; }
  .case .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
  .case .col-lg-4 { width: 34%; }
  .case .col-lg-8 { width: 66%; }
  .case .order-lg-1 { order: 1; }
  .case .order-lg-2 { order: 2; }
}

/* ---------- Sidebar info card(s) ---------- */
.case .portfolio-info {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 rgba(var(--accent-rgb), 0.9);
  padding: 24px 24px 26px;
  margin-bottom: 24px;
}

@media (min-width: 992px) {
  /* keep the sidebar in view while reading the long write-up */
  .case .col-lg-4 .portfolio-info:first-child { position: sticky; top: 90px; }
}

.case .portfolio-info h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed var(--line);
}

.case .portfolio-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case .portfolio-info > ul > li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.case .portfolio-info > ul > li:last-child { border-bottom: 0; }
.case .portfolio-info strong { color: var(--ink); font-weight: 600; }

.case .portfolio-info ul.small li { padding: 3px 0; border: 0; }
.case .portfolio-info p strong { color: var(--ink); }

/* "View dashboard / demo / notebook" button */
.case .btn-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
}
.case .btn-visit::after { content: "\2197"; }
.case .btn-visit:hover {
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(var(--accent-rgb), 0.9);
}

/* ---------- Main write-up ---------- */
.case .portfolio-description > h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  margin: 0 0 18px;
}

.case .portfolio-description h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 38px 0 14px;
  padding-left: 16px;
  position: relative;
}
.case .portfolio-description h3::before {
  content: "";
  position: absolute;
  left: 0; top: 0.18em;
  width: 5px;
  height: 0.82em;
  border-radius: 3px;
  background: var(--accent);
}

.case h4 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.case h5, .case h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 8px;
}
.case h5 { font-size: 16px; }
.case h6 { font-size: 14.5px; }

.case .portfolio-description p { margin: 0 0 14px; }

.case .lead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 22px;
}
.case .lead strong { font-weight: 700; }

.case .portfolio-description > ul,
.case .portfolio-description > ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.case .portfolio-description > ul > li,
.case .portfolio-description > ol > li { margin-bottom: 8px; }
.case strong { color: var(--ink); font-weight: 600; }
.case em { color: var(--accent-ink); font-style: italic; }

/* ---------- Images / figures ---------- */
.case .portfolio-description img {
  border-radius: 14px;
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.case figure { margin: 0; }

/* ---------- Embeds (Kaggle / Power BI / Tableau iframes) ---------- */
.case .ratio { position: relative; }
.case .ratio > iframe,
.case .ratio > * {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
.case iframe {
  max-width: 100%;
  background: var(--surface);
  border-radius: 12px;
}

/* ---------- Soft panels (.bg-light boxes / metric cards) ---------- */
.case .bg-light {
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}

/* the recurring "p-3 border rounded bg-light h-100" metric tile */
.case .border {
  border: 1.5px solid var(--line) !important;
}
.case .border-0 { border: 0 !important; }
.case .rounded { border-radius: 14px; }

.case .col-md-6 > .bg-light,
.case .col-md-12 > .bg-light {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.case .col-md-6 > .bg-light:hover,
.case .col-md-12 > .bg-light:hover {
  transform: translateY(-3px);
  border-color: var(--accent) !important;
  box-shadow: var(--shadow);
}

/* ---------- Cards (Bootstrap .card used inside content) ---------- */
/* home.css already gives .card a border/shadow/radius; refine here. */
.case .card { transform: none; }
.case .card-body { padding: 20px 22px; }
.case .card-title { margin-bottom: 10px; }
.case .card.bg-light,
.case .card.border-0 { box-shadow: var(--shadow); }
.case .card ul { margin: 6px 0 0; padding-left: 20px; }
.case .card li { margin-bottom: 6px; }
.case .card code,
.case code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ---------- List group ---------- */
.case .list-group,
.case .list-group-flush {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.case .list-group-item {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
  transition: background 0.15s;
}
.case .list-group-item:last-child { border-bottom: 0; }
.case .list-group-item:hover { background: var(--accent-soft); }

/* ---------- Tables ---------- */
.case .table-responsive { overflow-x: auto; margin: 0 0 18px; }
.case .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
}
.case .table th,
.case .table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.case .table.text-center th,
.case .table.text-center td,
.case .table .text-center { text-align: center; }
.case .table-bordered th,
.case .table-bordered td { border: 1px solid var(--line); }
.case .table thead th,
.case .table-light th,
.case .table .table-light th {
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 1.5px solid var(--ink);
}
.case .table-hover tbody tr:hover { background: var(--accent-soft); }
.case .table .table-primary,
.case .table tr.table-primary {
  background: var(--accent-soft);
}
.case .table .table-primary td { color: var(--ink); font-weight: 700; }
.case .align-middle td,
.case .align-middle th { vertical-align: middle; }

/* ---------- Alerts / callouts ---------- */
.case .alert {
  position: relative;
  border: 1.5px solid var(--ink);
  border-left-width: 6px;
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--surface);
  font-size: 15px;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.case .alert strong { color: var(--ink); }
.case .alert-success {
  border-left-color: var(--st-green);
  background: color-mix(in srgb, var(--st-green) 12%, var(--surface));
}
.case .alert-info {
  border-left-color: var(--st-blue);
  background: color-mix(in srgb, var(--st-blue) 12%, var(--surface));
}
.case .alert-light {
  border-left-color: var(--accent);
}

/* ---------- Bootstrap utility shims (scoped) ---------- */
.case .text-primary { color: var(--accent-ink) !important; }
.case .text-muted { color: var(--muted) !important; }
.case .text-center { text-align: center; }
.case .fw-bold { font-weight: 700 !important; }
.case .fw-light { font-weight: 300 !important; }
.case .small { font-size: 0.86rem; }
.case .display-6 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.case .fs-4 { font-size: 1.3rem; }
.case .list-unstyled { list-style: none; padding-left: 0; }
.case .list-unstyled li { margin-bottom: 6px; }

.case .w-100 { width: 100%; }
.case .h-100 { height: 100%; }
.case .img-fluid { max-width: 100%; height: auto; }
.case .shadow-sm { box-shadow: var(--shadow); }

.case .d-flex { display: flex; }
.case .flex-column { flex-direction: column; }
.case .align-items-center { align-items: center; }
.case .justify-content-center { justify-content: center; }

/* spacing (Bootstrap spacer = 1rem) */
.case .p-3 { padding: 1rem; }
.case .mb-0 { margin-bottom: 0 !important; }
.case .mb-1 { margin-bottom: 0.25rem; }
.case .mb-2 { margin-bottom: 0.5rem; }
.case .mb-3 { margin-bottom: 1rem; }
.case .mb-4 { margin-bottom: 1.5rem; }
.case .mt-2 { margin-top: 0.5rem; }
.case .mt-3 { margin-top: 1rem; }
.case .mt-4 { margin-top: 1.5rem; }
.case .mt-5 { margin-top: 3rem; }
.case .my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.case .my-5 { margin-top: 3rem; margin-bottom: 3rem; }
.case .me-2 { margin-right: 0.5rem; }
.case .me-3 { margin-right: 1rem; }
.case hr { border: 0; border-top: 1.5px dashed var(--line); margin: 2rem 0; }

@media (min-width: 768px) {
  .case .mt-md-0 { margin-top: 0; }
}

/* ---------- Neutralise Bootstrap Icons (font not loaded) ---------- */
/* The pages reference <i class="bi bi-..."> from an icon font that the
   zero-dependency site never loads. Hide the empty glyphs so they don't
   leave stray gaps before headings. */
.case i[class^="bi-"],
.case i[class*=" bi-"],
.case i.bi { display: none; }

/* ---------- Small-screen polish ---------- */
@media (max-width: 991px) {
  .page-head { padding: 48px 0 34px; }
  .case .portfolio-info { box-shadow: 4px 4px 0 rgba(var(--accent-rgb), 0.9); }
}