/* ==========================================================================
   Bold Etik — Project case study pages (/work/<slug>)
   ========================================================================== */

.be-project {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 20px 20px;
}
.be-project-hero { width: 100%; --hero-gap-phone: 22px; --hero-desc-w-tablet: 200px; }
.be-project-hero .be-hero__desc { bottom: 30px; }
.be-project-hero .be-hero__title .t-hero { margin-right: 0; }

.be-project__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 100px 0 20px;
}

/* ---------- Case study ---------- */
.be-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1400px;
  padding-bottom: 150px;
}
.be-case__intro { display: flex; align-items: center; gap: 40px; width: 100%; }
.be-case__summary {
  flex: 1 0 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.be-case__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.be-case__lead .t-h3 { max-width: 650px; }
.be-case__facts { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.be-case__fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  box-shadow: inset 0 -1px 0 #d6d6d6;
}
.be-case__fact dt { color: var(--be-ink-50); }
.be-case__fact dd { margin: 0; text-align: right; }
.be-case__fact { gap: 20px; }

.be-case__image { overflow: hidden; border-radius: 10px; }
.be-case__image img { width: 100%; height: 100%; object-fit: cover; }
.be-case__cover { flex: 1 0 0; height: 750px; min-width: 0; }
.be-case__showcase { width: 100%; height: 762px; }
.be-case__pair { display: flex; gap: 30px; width: 100%; }
.be-case__pair .be-case__image { flex: 1 0 0; height: 750px; min-width: 0; }

.be-case__more { display: flex; flex-direction: column; gap: 30px; width: 100%; margin: 30px 0 20px; }
.be-case__more-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 30px; width: 100%; }
.be-case__frame { overflow: hidden; border-radius: 20px; background: var(--be-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.be-case__frame--wide { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); }
.be-case__frame img { width: 100%; height: auto; border-radius: 20px; }

@media (max-width: 1199.98px) {
  .be-project { padding: 0 10px 20px; }
  .be-case__intro { flex-direction: column; }
  .be-case__summary { flex: none; align-self: auto; width: 100%; height: 355px; }
  .be-case__cover { flex: none; width: 100%; height: 600px; }
  .be-case__showcase { height: 545px; }
  .be-case__pair .be-case__image { height: 662px; }
}
@media (max-width: 809.98px) {
  .be-project { padding: 0 0 20px; }
  .be-project__body { padding: 20px 10px; }
  .be-case { gap: 15px; padding-bottom: 100px; }
  .be-case__summary { height: auto; justify-content: center; gap: 30px; }
  .be-case__cover { height: 500px; }
  .be-case__showcase { height: 250px; }
  .be-case__pair { flex-direction: column; gap: 20px; }
  .be-case__pair .be-case__image { flex: none; width: 100%; height: 500px; }
}

/* ---------- Related work ---------- */
.be-related {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 100px 20px;
  border-radius: 20px;
  background: var(--be-surface);
}
.be-related__header { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 750px; }
.be-related__title { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; white-space: nowrap; }
.be-related__script { position: relative; display: flex; align-items: center; width: 240px; min-height: 112px; }
.be-related__script span { position: absolute; left: -12px; bottom: 6px; color: var(--be-orange); }
.be-related__divider { width: 100%; height: 50px; }
.be-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; width: 100%; max-width: 1400px; }
.be-related__grid .be-feature-card { --feature-media-h: 688px; }

@media (max-width: 1199.98px) {
  .be-related { padding: 100px 10px; }
  .be-related__header { gap: 20px; }
  .be-related__script { width: 155px; height: 49px; min-height: 0; }
  .be-related__script span { left: -11px; bottom: 0; }
  .be-related__divider { height: 60px; }
  .be-related__grid { gap: 30px; }
}
@media (max-width: 809.98px) {
  .be-related { padding: 60px 10px; }
  .be-related__script { width: auto; height: auto; }
  .be-related__script span { position: relative; left: auto; bottom: auto; }
  .be-related__grid { gap: 5px 10px; }
}