/**
 * Mobile-only hero stability and typography.
 *
 * Desktop sizes stay owned by the existing components and front editor. These
 * selectors only apply at phone widths and intentionally outrank saved inline
 * editor rules so long Turkish headings cannot return to the oversized state.
 */
@media (max-width: 760px) {
  :root {
    --orbix-mobile-display-heading: clamp(32px, 9vw, 38px);
    --orbix-mobile-subheading: clamp(26px, 7.2vw, 34px);
    --orbix-mobile-card-heading: clamp(18px, 4.8vw, 24px);
  }

  /*
   * The hero is the mobile type ceiling. Saved front-editor typography can
   * carry important declarations, so the editable variants are included
   * explicitly to keep every semantic level inside the same hierarchy.
   */
  body[class] #main-content h1,
  body[class] #main-content h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id] {
    font-size: var(--orbix-mobile-display-heading) !important;
  }

  body[class] #main-content h2,
  body[class] #main-content h2[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] .growth-modal__intro h2 {
    font-size: var(--orbix-mobile-subheading) !important;
  }

  body[class] #main-content h3,
  body[class] #main-content h3[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id] {
    font-size: var(--orbix-mobile-card-heading) !important;
  }

  /*
   * Primary headings on white or light content areas share the mobile H2
   * scale used by the "Meta ve Google..." channel heading. The hero remains
   * the type ceiling; card headings, modal copy, CTA headings and supporting
   * content keep their existing semantic levels.
   */
  body[class] #main-content :is(
    .section:not(.section--dark) .section-heading,
    .section--white .story-copy,
    .section--white .contact-copy,
    .portfolio-section--light .portfolio-section-heading,
    .portfolio-section--light .portfolio-category-actions,
    .reference-showcase__heading,
    .service-section--white .service-section__heading,
    .service-section--soft .service-section__heading,
    .karaca-case__intro
  ) :is(
    h2,
    h2[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id]
  ),
  body[class] #main-content .section--white :is(
    .detail-content,
    .legal-content,
    .article-content
  ) > :is(
    h2,
    h2[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id]
  ):first-of-type {
    max-width: 100%;
    font-size: var(--orbix-mobile-subheading) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty;
  }

  body[class] #main-content .hero,
  body[class] #main-content .inner-hero,
  body[class] #main-content .article-hero,
  body[class] #main-content .service-hero,
  body[class] #main-content .portfolio-index-hero,
  body[class] #main-content .spori-hero,
  body[class] #main-content .orbix-project-hero,
  body[class] #main-content .karaca-case__hero,
  body[class] #main-content .not-found {
    max-width: 100%;
    overflow-x: clip;
  }

  body[class] #main-content .hero h1,
  body[class] #main-content .inner-hero h1,
  body[class] #main-content .article-hero h1,
  body[class] #main-content .service-hero h1,
  body[class] #main-content .portfolio-index-hero h1,
  body[class] #main-content .spori-hero h1,
  body[class] #main-content .orbix-project-hero h1,
  body[class] #main-content .karaca-case__hero h1,
  body[class] #main-content .not-found h1,
  body[class] #main-content .hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] #main-content .inner-hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] #main-content .article-hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] #main-content .service-hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] #main-content .portfolio-index-hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] #main-content .spori-hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] #main-content .orbix-project-hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id],
  body[class] #main-content .karaca-case__hero h1[data-orbix-edit-field][data-orbix-entity-type][data-orbix-entity-id] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    font-size: var(--orbix-mobile-display-heading) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty;
  }

  body[class] #main-content .hero__grid,
  body[class] #main-content .hero__copy,
  body[class] #main-content .hero__actions,
  body[class] #main-content .inner-hero__content,
  body[class] #main-content .service-hero__grid,
  body[class] #main-content .service-hero__copy,
  body[class] #main-content .service-hero__inner,
  body[class] #main-content .service-hero__content,
  body[class] #main-content .portfolio-shell,
  body[class] #main-content .spori-hero__inner,
  body[class] #main-content .orbix-project-hero__content,
  body[class] #main-content .karaca-case__hero-copy {
    min-width: 0;
    max-width: 100%;
  }

  body[class] #main-content .hero__actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body[class] #main-content .hero__actions > .button,
  body[class] #main-content .hero__actions > a,
  body[class] #main-content .hero__actions > button {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    padding-right: 18px;
    padding-left: 18px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Keep the logged-in front editor inside the same phone viewport. */
  body .orbix-front-toolbar {
    right: max(12px, env(safe-area-inset-right)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
  }
}