/* ==========================================================================
   Bold Etik — content sections shared by several pages:
   project cards and the clients block with its logo ticker.
   ========================================================================== */

/* ---------- Project cards ---------- */
.be-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
  width: 100%;
}
.be-project-card { display: flex; flex-direction: column; width: 100%; }
.be-project-card__media {
  position: relative;
  display: block;
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
}
.be-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.be-project-card__media:hover img,
.be-project-card__media:focus-visible img { transform: scale(1.05); }
.be-project-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.be-project-card__title {
  padding: 28px 0;
  font: 600 26px/1.15 var(--be-sans);
  letter-spacing: -0.03em;
  color: var(--be-ink);
  transition: color 0.3s ease;
}
.be-project-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
.be-project-card { position: relative; }
.be-project-card:hover .be-project-card__title { color: var(--be-orange); }
.be-project-card__service {
  font: 500 12px/1.2 var(--be-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  color: var(--be-grey);
}

@media (max-width: 1199.98px) {
  .be-project-card__media { height: 420px; }
}
@media (max-width: 809.98px) {
  .be-project-grid { grid-template-columns: 1fr; gap: 36px; }
  .be-project-card__media { height: 340px; }
  .be-project-card__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .be-project-card__title { font-size: 22px; }
  .be-project-card__service { font-size: 11px; text-align: left; }
}

/* ---------- Clients ---------- */
.be-clients { width: 100%; padding: 20px 10px; }
.be-clients__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 100px 20px;
  border-radius: 20px;
  background: var(--be-surface);
  overflow: hidden;
}
.be-clients__header,
.be-clients__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.be-clients__actions { gap: 10px; }
.be-clients__header .be-eyebrow { align-self: start; }
.be-clients__title { grid-column: span 3; max-width: 750px; }
.be-clients__divider { height: 100px; }
.be-clients__buttons { grid-column: span 3; justify-self: center; display: flex; gap: 16px; }

@media (max-width: 1199.98px) {
  .be-clients__card { padding: 100px 10px; }
  .be-clients__divider { height: 60px; }
}
@media (max-width: 809.98px) {
  .be-clients { padding: 20px 0; }
  .be-clients__card { padding: 60px 10px; }
  .be-clients__header { display: flex; flex-direction: column; }
  .be-clients__actions { display: flex; }
  .be-clients__buttons { justify-self: auto; }
}

/* ---------- Logo ticker ---------- */
.be-ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.be-ticker.is-dragging { cursor: grabbing; }
.be-ticker__track { display: flex; gap: 10px; width: max-content; will-change: transform; }
.be-logo-tile {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 190px;
  height: 220px;
  padding: 20px 5px;
  border-radius: 20px;
  background: var(--be-bg);
  color: var(--be-grey);
}
.be-logo-tile img { width: 81px; height: 90px; object-fit: contain; object-position: top; pointer-events: none; }

/* ---------- Feature card: big image with a script title overlapping its edge ----------
   Used for featured work (home) and related work (project pages).
   Image height is set per use with --feature-media-h. */
.be-feature-card { position: relative; display: flex; flex-direction: column; }
.be-feature-card__media {
  display: block;
  height: var(--feature-media-h, 645px);
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}
.be-feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
.be-feature-card__meta { position: relative; height: 112px; }
.be-feature-card__row {
  position: absolute;
  top: -19px;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 112px;
}
/* Long names wrap inside the card instead of running off the page */
.be-feature-card__title { min-width: 0; max-width: 100%; overflow-wrap: break-word; color: var(--be-orange); }
.be-feature-card__title a::after { content: ""; position: absolute; inset: 0; }
.be-feature-card__label { flex: none; color: var(--be-grey); }

@media (max-width: 1199.98px) {
  .be-feature-card__media { height: var(--feature-media-h-tablet, 421px); }
  .be-feature-card__meta { height: 48px; }
  .be-feature-card__row { top: 0; height: auto; }
}
@media (max-width: 809.98px) {
  .be-feature-card__media { height: var(--feature-media-h-phone, 168px); }
  .be-feature-card__meta { height: auto; }
  .be-feature-card__row { position: static; flex-direction: column; align-items: flex-start; gap: 10px; }
}