/* Case Study Hero Alignment
   Align hero content left across all case study pages. */

:root {
  --cs-hero-align-max: 1240px; /* 1200 content + 20px left/right gutters */
  --cs-hero-align-gutter: 20px;
}

body.case-study-page .cs-hero-content {
  width: min(100%, var(--cs-hero-align-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cs-hero-align-gutter) !important;
  padding-right: var(--cs-hero-align-gutter) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body.case-study-page .cs-hero .hero-context-pills,
body.case-study-page .cs-hero .hero-discipline-pills,
body.case-study-page .cs-hero .cs-meta {
  justify-content: flex-start !important;
}

body.case-study-page .cs-hero .hero-supporting,
body.case-study-page .cs-hero .cs-intro {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.case-study-page .cs-hero .hero-headline,
body.case-study-page .cs-hero-cinematic .hero-headline {
  text-align: left !important;
  text-transform: uppercase !important;
  font-size: clamp(1.75rem, 5.5vw, 5.1rem) !important;
  font-weight: 650 !important;
  line-height: 1.07 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 0 !important;
  color: #0f0f0f !important;
}

body.case-study-page .cs-hero .hero-subheading,
body.case-study-page .cs-hero-cinematic .hero-subheading {
  text-align: left !important;
  font-size: clamp(1.10rem, 1.9vw, 1.42rem) !important;
  font-weight: 700 !important;
  font-variation-settings: "wght" 700 !important;
  font-synthesis: none !important;
  line-height: 1.38 !important;
  letter-spacing: -0.025em !important;
  color: #4a4a4a !important;
  margin-top: clamp(1.6rem, 2.8vw, 2.9rem) !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #4a4a4a !important;
}

body.case-study-page .cs-hero .meta-pill,
body.case-study-page .cs-hero-cinematic .meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(15, 15, 15, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: #0f0f0f !important;
}

/* HBO cinematic hero uses a separate structure */
body.case-study-page .hero-cinematic-content {
  width: min(100%, var(--cs-hero-align-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cs-hero-align-gutter) !important;
  padding-right: var(--cs-hero-align-gutter) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body.case-study-page .cs-hero-cinematic .hero-context-pills,
body.case-study-page .cs-hero-cinematic .hero-discipline-pills {
  justify-content: flex-start !important;
}

body.case-study-page .cs-hero-cinematic .hero-discipline-pills {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

body.case-study-page .cs-hero-cinematic .discipline-pill {
  color: rgba(0, 0, 0, 0.62) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.case-study-page .cs-hero-cinematic .discipline-mark {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain !important;
  opacity: 0.72 !important;
  margin-right: 2px !important;
}

body.case-study-page .cs-hero-cinematic .discipline-separator {
  color: rgba(0, 0, 0, 0.45) !important;
  font-size: 0.84rem !important;
  line-height: 1 !important;
}

body.case-study-page .cs-hero-cinematic .hero-supporting {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* HBO cinematic hero needs the same outer side gutter as other case-study heroes */
body.case-study-page .cs-hero-cinematic {
  padding-left: var(--cs-hero-align-gutter) !important;
  padding-right: var(--cs-hero-align-gutter) !important;
  box-sizing: border-box !important;
}

/* Charlotte Tilbury hero keeps white headline/subheading on dark hero */
body.email-case-study .cs-hero .hero-headline,
body.email-case-study .cs-hero .hero-subheading {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 768px) {
  body.case-study-page .cs-hero .hero-context-pills,
  body.case-study-page .cs-hero-cinematic .hero-context-pills {
    margin-top: 0.9rem !important;
  }
}