/* ===========================================================================
   ServicesTourismDx — SVG Figure display rules, media queries, and responsive sizing.
   5 SVG pairs: hero (tdhl/tdhp), story (tdsl/tdsp), why-two (tdwl/tdwp),
   why-entry (tdel/tdep), compare (tdcl/tdcp).
   Breakpoint: 600px.
   - Viewport > 600px: landscape visible, portrait display:none.
   - Viewport <= 600px: portrait visible, landscape display:none.
   =========================================================================== */

/* Default / Viewport > 600px */
svg.tdhl,
svg.tdsl,
svg.tdwl,
svg.tdel,
svg.tdcl {
  display: block;
}

svg.tdhp,
svg.tdsp,
svg.tdwp,
svg.tdep,
svg.tdcp {
  display: none !important;
}

@media (min-width: 601px) {
  svg.tdhl,
  svg.tdsl,
  svg.tdcl {
    width: 100%;
    max-width: 640px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  svg.tdwl,
  svg.tdel {
    width: 100%;
    max-width: 360px;
    min-width: 312px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Viewport <= 600px */
@media (max-width: 600px) {
  svg.tdhl,
  svg.tdsl,
  svg.tdwl,
  svg.tdel,
  svg.tdcl {
    display: none !important;
  }

  svg.tdhp,
  svg.tdsp,
  svg.tdwp,
  svg.tdep,
  svg.tdcp {
    display: block !important;
  }

  svg.tdhp,
  svg.tdsp,
  svg.tdcp {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  svg.tdwp,
  svg.tdep {
    width: 100%;
    max-width: 320px;
    min-width: 278px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Wrapper elements */
.td-hero__fig {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.td-mini {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--td-navy);
  border-radius: 8px;
  padding: 14px 6px;
  box-sizing: border-box;
  margin: 0 0 16px;
}

/* Ensure SVG text has proper rendering */
svg.tdhl, svg.tdhp,
svg.tdsl, svg.tdsp,
svg.tdwl, svg.tdwp,
svg.tdel, svg.tdep,
svg.tdcl, svg.tdcp {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}