/* ======================================================
   CASE CARD LOGO — homepage + Product Thinking article stylesheet
   Scoped deliberately: case-study-extras.css is reserved for
   case study pages and must never be linked from index.html or
   the pt-*.html Product Thinking articles. This file ports just
   the fixed-tone plate system (same hex tones, same rule shape)
   so homepage cards and article heroes can carry a theme-safe
   brand logo without pulling in the rest of the case-study
   component layer. See CASE_STUDY_FORMAT.md.
   ====================================================== */

.case-card__logo-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.case-card__logo-wrap .case-card__logo {
  height: 18px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  display: block;
}

/* TED's mark is a dense, solid-fill 3-letter block, so it reads
   heavier than the iHeart lockup at the same numeric height.
   Sized a couple of pixels shorter to balance optically. */
.case-card__logo-wrap .case-card__logo--ted {
  height: 15px;
  max-width: 96px;
}

/* Headstart's source file is a solid-colour rectangular lockup (its
   own brand background baked in, not transparent) — sized like the
   other two logos, no crop needed since it's natively wide. Given
   no plate since it already reads as a self-contained chip. */
.case-card__logo-wrap .case-card__logo--headstart {
  height: 20px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  border-radius: 4px;
}

/* Product Thinking cards — Urban Company, Netflix, Domino's sit on a
   light plate; JioHotstar's source is its own colourful gradient
   banner (opaque, not transparent) so it gets no plate at all,
   same resolution as the earlier Headstart/Overlap cases. */
.case-card__logo-wrap .case-card__logo--urban {
  height: 18px;
  max-width: 90px;
}
.case-card__logo-wrap .case-card__logo--netflix {
  height: 18px;
  max-width: 90px;
}
.case-card__logo-wrap .case-card__logo--dominos {
  height: 18px;
  max-width: 90px;
}
.case-card__logo-wrap .case-card__logo--jiohotstar {
  height: 24px;
  max-width: 92px;
  border-radius: 3px;
}

/* Logo legibility plate — constant tone regardless of theme,
   chosen from the logo's own ink, never from the page background.
   Never combine with a filter, invert, or blend mode. */
.csx-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
}

.csx-logo-plate--light {
  background: #F2F2F2;
}

.csx-logo-plate--dark {
  background: #1C1C1C;
}

/* ======================================================
   PRODUCT THINKING ARTICLE HERO LOCKUP
   Single-logo chip in the article hero, sized a touch taller
   than the card versions to match the hero's larger scale
   (same hero-vs-card ratio used on the iHeart case study).
   ====================================================== */
.pt-hero-lockup {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.pt-hero-lockup .case-card__logo--urban {
  height: 20px;
  max-width: 100px;
}
.pt-hero-lockup .case-card__logo--netflix {
  height: 20px;
  max-width: 100px;
}
.pt-hero-lockup .case-card__logo--dominos {
  height: 20px;
  max-width: 100px;
}
.pt-hero-lockup .case-card__logo--jiohotstar {
  height: 26px;
  max-width: 100px;
  border-radius: 3px;
}