/**
 * Shared hero heading typography for Orbix Dijital case studies.
 *
 * Brand-specific layouts, media and content stay intact. The shared layer only
 * standardizes hero titles, section labels and primary section headings.
 */

.orbix-karaca-case-page #main-content .karaca-case__hero h1,
.orbix-spori-case-page #main-content .spori-case__hero h1,
.orbix-esta-case-page #main-content .esta-case__hero h1,
.orbix-caselook-case-page #main-content .caselook-case__hero h1,
.orbix-social-brand-case-page #main-content .social-brand-case__hero h1,
.orbix-video-brand-case-page #main-content .video-brand-case__hero h1,
.orbix-web-design-case-page #main-content .web-design-case__hero h1,
.orbix-portfolio-page #main-content .orbix-project-hero h1 {
  font-family: inherit !important;
  font-size: clamp(3.25rem, 4.8vw, 4.125rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

/*
 * Service-page section label standard:
 * blue text, circular gradient marker, shared weight and spacing.
 */
.orbix-portfolio-page #main-content :is(
  [class$="__section-no"],
  [class*="__section-no "],
  .portfolio-kicker
) {
  display: inline-flex !important;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  color: #214f9c !important;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.orbix-portfolio-page #main-content :is(
  [class$="__section-no"],
  [class*="__section-no "],
  .portfolio-kicker
)::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #3478f6, #7557e8);
  box-shadow: 0 0 0 7px rgba(52, 120, 246, .1);
  content: "";
}

/* Keep the same blue system legible on dark case-study sections. */
.orbix-portfolio-page #main-content :is(
  .spori-case__system,
  .spori-case__work,
  .esta-case__scope,
  .esta-case__work,
  .esta-case__cta,
  .karaca-case__showcase,
  .karaca-case__closing,
  .social-brand-case__services,
  .social-brand-case__work,
  .social-brand-case__cta,
  .video-brand-case__system,
  .video-brand-case__work,
  .video-brand-case__cta,
  .caselook-case__system,
  .caselook-case__work,
  .web-design-case__cta
) :is(
  [class$="__section-no"],
  [class*="__section-no "]
) {
  color: #9ab9ff !important;
}

/*
 * Primary case-study headings use the same Sora scale, weight, rhythm and
 * spacing as service-page section headings. Card titles remain untouched.
 */
.orbix-portfolio-page #main-content :is(
  [class$="__section-heading"],
  [class*="__section-heading "],
  [class$="__system-heading"],
  [class$="__scope-heading"],
  [class$="__gallery-heading"],
  [class$="__showcase-heading"],
  [class$="__wide-heading"],
  [class$="__routes-heading"],
  [class$="__work-heading"],
  [class$="__outcomes-heading"],
  [class$="__outcomes-copy"],
  .karaca-case__intro,
  .karaca-case__story-row,
  .karaca-case__principle,
  .karaca-case__closing,
  [class$="__cta"],
  .portfolio-section-heading--project
) h2 {
  max-width: 800px;
  margin: 12px 0 0 !important;
  font-family: inherit !important;
  font-size: clamp(2rem, 4.3vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -.05em !important;
  text-wrap: balance;
}

/* Preserve Karaca's orange emphasis without introducing a second typeface. */
.orbix-karaca-case-page #main-content .karaca-case__hero h1 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

@media (max-width: 1020px) {
  .orbix-karaca-case-page #main-content .karaca-case__hero h1,
  .orbix-spori-case-page #main-content .spori-case__hero h1,
  .orbix-esta-case-page #main-content .esta-case__hero h1,
  .orbix-caselook-case-page #main-content .caselook-case__hero h1,
  .orbix-social-brand-case-page #main-content .social-brand-case__hero h1,
  .orbix-video-brand-case-page #main-content .video-brand-case__hero h1,
  .orbix-web-design-case-page #main-content .web-design-case__hero h1,
  .orbix-portfolio-page #main-content .orbix-project-hero h1 {
    font-size: clamp(2.75rem, 6.4vw, 3.5rem) !important;
  }
}

@media (max-width: 760px) {
  .orbix-karaca-case-page #main-content .karaca-case__hero h1,
  .orbix-spori-case-page #main-content .spori-case__hero h1,
  .orbix-esta-case-page #main-content .esta-case__hero h1,
  .orbix-caselook-case-page #main-content .caselook-case__hero h1,
  .orbix-social-brand-case-page #main-content .social-brand-case__hero h1,
  .orbix-video-brand-case-page #main-content .video-brand-case__hero h1,
  .orbix-web-design-case-page #main-content .web-design-case__hero h1,
  .orbix-portfolio-page #main-content .orbix-project-hero h1 {
    font-weight: 700 !important;
  }

  .orbix-portfolio-page #main-content :is(
    [class$="__section-no"],
    [class*="__section-no "],
    .portfolio-kicker
  ) {
    gap: 9px;
    margin-bottom: 16px;
    font-size: .7rem;
    letter-spacing: .14em;
  }

  .orbix-portfolio-page #main-content :is(
    [class$="__section-heading"],
    [class*="__section-heading "],
    [class$="__system-heading"],
    [class$="__scope-heading"],
    [class$="__gallery-heading"],
    [class$="__showcase-heading"],
    [class$="__wide-heading"],
    [class$="__routes-heading"],
    [class$="__work-heading"],
    [class$="__outcomes-heading"],
    [class$="__outcomes-copy"],
    .karaca-case__intro,
    .karaca-case__story-row,
    .karaca-case__principle,
    .karaca-case__closing,
    [class$="__cta"],
    .portfolio-section-heading--project
  ) h2 {
    max-width: 100%;
    font-size: var(--orbix-mobile-subheading, clamp(26px, 7.2vw, 34px)) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    text-wrap: pretty;
  }
}