/* Targeted fixes for the supplied desktop-first export. */
/* Reserve the same geometry before the image component upgrades. */
image-slot:not(:defined) { display: block; position: relative; width: 100%; height: 100%; aspect-ratio: 3 / 2; }
@media (max-width: 860px) {
  .tj-page-spacing { padding-left: 22px !important; padding-right: 22px !important; }
  .tj-responsive-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
  .tj-responsive-grid > * { min-width: 0; }
  .tj-button-row { flex-wrap: wrap !important; }
  h1 > div { white-space: normal !important; flex-wrap: wrap !important; }
  #hero-image { height: auto !important; min-height: 280px; aspect-ratio: 1 / 1; }
  #ueber-portrait { max-width: 440px; margin-inline: auto; }
  image-slot { max-width: 100%; }
  /* Explicit content pairs only: preserve desktop alternation, heroes and icons. */
  .tj-mobile-image-first > image-slot,
  .tj-mobile-image-first > .tj-mobile-image { order: -1 !important; }
  .tj-mobile-image-first > .tj-mobile-image-divider { display: none !important; }
  /* Explicit section hooks preserve desktop spacing and leave dialogs/header alone. */
  .tj-mobile-section { padding-block: 44px !important; }
  .tj-mobile-hero { padding-top: 44px !important; padding-bottom: 48px !important; }
  .tj-mobile-cta { padding-block: 52px !important; }
  .tj-mobile-support { padding-block: 40px !important; }
  .tj-mobile-compact { padding-block: 32px !important; }
  .tj-mobile-stats { padding-bottom: 32px !important; }
  .tj-mobile-footer { padding-block: 32px !important; }
  .tj-mobile-contact, .tj-mobile-reading { padding-top: 40px !important; padding-bottom: 48px !important; }
  .tj-mobile-section .tj-responsive-grid { gap: 24px !important; }
  .tj-mobile-section-title { margin-bottom: 32px !important; }
  .tj-mobile-section-quote { margin-top: 32px !important; }
  /* Center only standalone content icons; keep their text full-width and left-aligned. */
  .tj-mobile-icon-card { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .tj-mobile-icon-card > img,
  .tj-mobile-icon-card > svg,
  .tj-mobile-icon-card > image-slot { align-self: center !important; margin-inline: auto !important; }
  .tj-mobile-icon-card > div { width: 100%; min-width: 0; box-sizing: border-box; }
}

@media (max-width: 480px) {
  h1, h2 { overflow-wrap: anywhere; }
  #format .tj-responsive-grid > div { flex-direction: column; align-items: flex-start !important; }
}

/* Mobile visitors can read the hero immediately; desktop keeps its staggered reveal. */
@media (max-width: 860px) {
  .tj-mobile-hero h1, .tj-mobile-hero h1 *,
  .tj-mobile-hero p span, .tj-mobile-hero .tj-button-row {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}