/* =========================
   Project detail: client + team
   ========================= */

.client-logo-lg {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  box-shadow: var(--shadow-soft);
}

.client-logo-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.client-link {
  color: inherit;
  text-decoration: none;
}

.client-link:hover {
  text-decoration: underline;
}

.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

.team-link {
  color: inherit;
  text-decoration: none;
}

.team-link:hover .team-name {
  text-decoration: underline;
}

.team-name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Meta rows (Group/Tags/Duration each on its own line) */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.meta-label {
  font-weight: 700;
  font-size: 0.9rem;
}

/* =========================================================
   HERO IMAGE (service_detail, career_detail, blog_detail)
   Goal: consistent 16:9 hero that never stretches or overflows.
   ========================================================= */

.content-hero {
  background: #f1f5f9;
}

/* Fixed ratio container (canonical hero behavior) */
.content-hero-frame {
  width: 100%;
  max-width: 1280px; /* match content card width */
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  background: #f1f5f9;
  border-radius: var(--radius-card-xl, 18px);
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 1;
}

/* Image always fills the frame safely */
.content-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops, never stretches */
  display: block;
}

/* When NO hero image exists — remove hero shadow/rounding if you want */
.no-hero .content-hero-frame {
  box-shadow: none;
  border-radius: 0;
}


/* =========================================================
   MAIN CONTENT CARD
   ========================================================= */

.content-card {
  background: var(--surface);
  border-radius: var(--radius-card-xl, 18px);

  /* more padding */
  padding: 3.5rem 3.5rem 3rem;

  /* match hero width */
  max-width: 1280px;

  margin: 0 auto;

  /* overlap feel (canonical + predictable) */
  margin-top: -180px;

  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-strong);
  overflow: hidden;
}

/* Slightly different spacing option for careers if needed */
.content-card-career {
  margin-top: 40px;
}

/* When no hero — use normal spacing */
.no-hero .content-card {
  margin-top: 2.5rem;
}


/* =========================================================
   TEXT CONTENT
   ========================================================= */

.content-title {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  line-height: 1.25;
}

.content-body {
  font-size: 1.07rem;
  line-height: 1.74rem;

  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.content-body p {
  margin-bottom: 1rem;
}

/* SECURITY: rich text must NEVER render images */
.content-body img {
  display: none !important;
}


/* =========================================================
   CHIPS
   ========================================================= */

.chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  margin: 0.2rem;
  background: #eef3f5;
  color: #1f2933;
}

.chip-group {
  background: #e6f5f0;
  color: #0c604b;
}


/* =========================================================
   2-column detail layout helper
   ========================================================= */

.content-card .card {
  border-radius: 14px;
}


/* =========================================================
   AUTHOR BIO PREVIEW
   ========================================================= */

.author-bio-preview {
  line-height: 1.4;
}

.author-bio-preview a {
  font-weight: 500;
  color: var(--accent);
}

.author-bio-preview a:hover {
  text-decoration: underline;
}

/* Client background / long text wrap */
.client-background {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Small label above main title */
.section-label{
  font-size: 0.9rem;
  font-weight: 600;
  opacity: .75;
  letter-spacing: .02em;
}

/* Client block wrapping */
.client-card, .client-bg, .content-card {
  overflow: hidden; /* prevent spill outside rounded corners */
}

.client-bg{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* If your client background text is inside a div, apply this class */
.client-card .text-muted{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Team layout (smaller than before) */
.team-avatar{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.team-name{
  font-size: .95rem;
  font-weight: 600;
}

.team-role{
  font-size: .8rem;
  opacity: .75;
}

.chip { display:inline-flex; align-items:center; }
.chip:hover { text-decoration: none; }
/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */

@media (max-width: 992px) {
  .content-hero-frame {
    max-width: 100%;
    border-radius: var(--radius-card-lg, 14px);
  }

  .content-card {
    margin-top: -100px; /* still overlaps, but less on tablets */
    padding: 2rem 1.75rem;
  }

  .content-title {
    font-size: 1.9rem;
  }
}

@media (max-width: 576px) {
  .content-card {
    margin-top: -60px;
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-card-lg, 14px);
  }

  .content-title {
    font-size: 1.7rem;
  }
}

/* =========================================================
   HERO HEIGHT CONTROL (Mobile-first refinement)
   ========================================================= */

/* Mobile: cap hero height */
@media (max-width: 576px) {
  .content-hero-frame {
    max-height: 240px;   /* <-- KEY VALUE */
  }

  .content-hero-img {
    height: 100%;
  }
}

/* Tablet: slightly taller, still controlled */
@media (min-width: 577px) and (max-width: 992px) {
  .content-hero-frame {
    max-height: 320px;
  }
}